jQuery入门级part.1
jquery的选择器:
基本选择器:
#id 根据id的属性值来获取元素
TagName 根据标签名来获取元素
selector1,selector2 匹配列表中的选择器
.class 根据class的属性值来获取元素
层级选择器:
祖先元素 后代元素 匹配祖先元素下面的指定的后代元素
parent > child 匹配父元素下面的指定的子元素
prev + next 匹配当前元素的下一个兄弟元素 要求这两个元素必须邻居
prev~siblings 匹配当前元素的下面的指定所有的兄弟元素
简单选择器:
:first 匹配第一个元素
:last 匹配最后一个元素
:even 匹配下标值为偶数的所有元素
:odd 匹配下标值为奇数的所有元素
:eq(index) 匹配下标值为指定值的元素
:gt(index) 匹配下标值大于指定值的所有元素
:lt(index) 匹配下标值小于指定值的所有元素
:not(selector) 匹配不包含指定选择器的所有元素
内容选择器:
:contains(text) 匹配内容中包含指定值的元素
:empty 匹配内容为空的元素
:has(selector) 匹配内容中包含指定选择器的元素
:parent 匹配内容不为空的元素
可见性选择器:
:hidden 匹配隐藏的元素 CSS中:display:none
:visible 匹配显示的元素 CSS中:display:block
属性选择器:
[attribute] 匹配指定属性的所有元素
[attribute=value] 匹配属性等于指定值的元素 input[name=”username”]
[attribute!=value] 匹配属性不等于指定值的所有元素
[attribute^=value] 匹配属性以指定值开头的所有元素
[attribute$=value] 匹配属性以指定值结束的所有元素
[attribute*=value] 匹配属性中包含指定值的所有元素
[selector1][selector2][selectorN] 匹配列表中所有属性
子元素选择器:
:nth-child(index/even/odd) 匹配索引值为指定值或者索引值为奇偶的子元素 这里的是从1开始的
:first-child 第一个子元素
:last-child 最后一个子元素
:only-child 匹配有且仅有一个子元素
!css3也可以用
表单属性选择器:
:input 匹配表单里面所有元素 包含select textarea !$(“input”)它是匹配到所有的input标签 !$(“:input”)它是匹配到除了input标签以外 select textarea 所有的表单控件元素
:text 匹配单行文本框
:password 匹配单行密码框
:radio 匹配单选按钮
:checkbox 匹配多选按钮
:submit 匹配提交按钮
:reset 匹配重置按钮
:image 匹配图片按钮
:button 匹配普通按钮
:file 匹配文件上传
:hidden 匹配隐藏域 如果是要匹配表单中的隐藏域控件 一定要先加上input标签 $(“input:hidden”)
表单对象选择器:
:enabled 匹配表单中可用的表单控件
:disabled 匹配表单中不可用的表单控件
:checked 匹配表单中默认选中的元素 单选按钮和多选按钮
:selected 匹配表单中默认选中的元素 下拉列表
jQuery对象与JavaScript对象之间相互转换:
jQuery对象转换为JavaScript对象:
方法:jQuery对象[下标]
将JavaScript对象转换为jQuery对象:
方法:$(JavaScript对象)
jQuery中的方法来操作HTML标签中的属性:
attr(name) 获取当前对象的指定的属性的值
attr(key,value) 给当前对象设置属性值
attr(properties) 一次给当前对象设置多个属性值 要求参数必须是一个JSON对象
removeAttr(name) 移动当前对象的属性名和属性值
jQuery对象操作标签中的class属性:
addClass(class) 给当前对象添加class属性值
removeClass(class) 将当前对象的class属性值移除
toggleClass(class) 当前对象中如果有指定的class属性值则移除 反之则添加
hasClass(class) 如果有指定的class属性值就返回true 反之没有就返回false
jQuery对象对标签中的style属性的操作:
css(name) 获取到当前对象的style属性指定的CSS样式的属性值
css(key,value) 给当前对象的的style属性中设置css样式
css(properties) 一次设置多个 要求参数必须是一个JSON对象
尺寸方法:
width() width(value) height() height(value)
文本、值:
html():获取双边标记中的内容
html(val):往双边标记设置内容
val():获取单边标记中的value属性值
val(val):往单边标记中的value属性设置值
text():获取双边标记的中的内容
text(val):往双边标记设置内容
html()和text()方法之间的区别: 一个可以解析HTML标签 一个解析不了
html()获取的时候将标签中的所有的内容都会获取到
text()获取的时候只会获取到标签中的文本内容
jQuery入门级part.1的更多相关文章
- jQuery入门级part.2
一,事件编程 基本事件: blur(fn) 当失去焦点时 change(fn) 当内容发生改变时 click(fn) 当鼠标单击时 dblclick(fn) 当鼠标双击时 focus ...
- jQuery简单面试题
干货 | jQuery经典面试题及答案精选 面试题来啦! 毫无疑问,JavaScript是一门如此有用,但总是被低估的一门语言. 在 jQuery 粉墨登场之前,我们曾经会写出冗长的JavaScrip ...
- 如何自学 Java 开发
如何自学 Java 开发? 568赞同反对,不会显示你的姓名 李艾米IT路上学习 568 人赞同 Java Web前端技术 HTML 入门视频课程 1 HTML 简介 2 HTML基本结构[ 3 HT ...
- 个人Web工具箱&资源整理(1)
很久就想把使用的工具及收藏的资源整理一番:一是为了传达博客社区的理念:资源共享,而是方便自己及团队快速获取. 学习资源: 首推两个入门级在线参考网站. 1 w3c school. 2 Runoob.c ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现
使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这篇文章进行安装和破解 ...
- jQuery对象入门级介绍
你是否曾经见过像 $(".cta").click(function(){})这样的JavaScrip代码?或许你还会思考下 $('#X') 是什么,如果看到这些你都觉得摸不着头脑 ...
- jquery mobile 入门级实战1
第一步:使用CDN接入jquery mobile CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环 ...
- 自己手写简约实用的Jquery tabs插件(基于bootstrap环境)
一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不够美观,操作也相对来说比较麻烦.于是有了自己利用Jquery来做一个图书展示的tabs ...
随机推荐
- php WIN下编译注意问题
下载VC2012,安装打开CMD 须运行 vcvars32.bat (初始化VC编译环境) 下载PHP WIN编译包:http://windows.php.net/downloads/php-sdk/ ...
- toolkit学习笔记
- JDE Client开发端 左侧边栏设置
- SQL Server 中的 NOLOCK 用法
大家都知道,每新建一个查询,都相当于创建一个会话,在不同的查询分析器里面进行的操作,可以影响到其他会话的查询,极端的情况可能会一直处于阻塞中,哪怕只是一个很简单的查询都“特别慢”. BEGIN TRA ...
- UITableView编辑
UITableView 编辑步骤如下: 1.让TableView处于编辑状态 2.协议设定 2.1.确定Cell是否处于编辑状态 2.2.设定Cell的编辑样式(删除.添加) 2.3.编辑状 ...
- jquery 、 JS 脚本参数的认识与使用
jquery . JS 脚本参数的认识与使用 如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload(); //刷新当前页面. par ...
- php常量的声明和使用
(1)声明 define("var",value) (2)先声明后使用 (3)默认区分大小写,如要不区分 define ("var",value,true); ...
- RSA非对称加密
先上RSA加密算法的一些简介(截图自轩辕老师的课件): 嗯--RSA就是这么一回事,于是有了如下题目: 1.In an RSA system, the public key of a given us ...
- WAMPSERVER 与 IIS冲突 及如何修改网站根目录
如果之前打开过IIS服务或者用过xampp则输入localhost时,浏览器显示如下: 这说明WAMPSERVER 与 IIS服务的默认端口冲突: 可以测试80端口是否被占用: 如上端口被IIS服务占 ...
- 利用中文数据跑Google开源项目word2vec
一直听说word2vec在处理词与词的相似度的问题上效果十分好,最近自己也上手跑了跑Google开源的代码(https://code.google.com/p/word2vec/). 1.语料 首先准 ...