脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery知识快览之一―选择器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 阅读指导：本文参考最新的1.10.2版写成，针对用得比较多的1.4版，所有1.5版之后的函数都会注明哪一版新增。对于熟悉1.4版想学1.10版的请直接搜索"新增"。
jquery是一个JavaScript库，它提供了很多有用的API,简化了我们使用JavaScript的方式。
JQuery由JQuery.COM提供，你可以在该网站上下到最新的
有两种类型的JQuery，一种是未压缩的，便于你学习其源代码，另一种是压缩的，不易阅读但是更节约流量。
现在有两个版本的JQuery，V1.x支持ie6,7,8，V2.x开始不支持ie6,7,8了。
现在1.x的最新版本是1.10.2
如果你不愿意在自己的计算机上存放JQuery库，你可以连接到以下的一些CDN.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//ajax.GOOGLEapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.clouDFlare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
使用CDN的好处，用户已经访问了包含这些资源的网站的话，在访问你的网站时就不用重复下载资源了。
本文主要介绍JQuery选择器，这可以说是JQuery的亮点之一，JQuery提供了有丰富功能的选择器，可以方便的获取页面中的元素。
使用选择器注意事项
1.选择器对元素，属性，值的大小是不敏感的
2.对于!"#$%&'()*+,./:;<=>?@[/]^`{|}~等特殊符号，需要用//转义
基础选择器
1.选择所有的元素
$("*")
2.根据元素Id选择
$("#myid")
注意一个页面的id都是唯一的，这个只能选择第一个match的
3.根据元素的名称选择
$("p")
4.根据元素的css类选择
$(".myclass")
注意：一个元素可以有多个css类，只要其中一个匹配就会被选择
5.复合选择器
做多种选择器的和，比如$("#myid,p,.myclass)相当于$("#myid").add("p").add(".myclass")
层次选择器
1.选择选择器1中所选元素的所有符合选择器2条件的直接子节点
$("body > p")
2.选择选择器1中所选元素的所有符合选择器2条件的所有子孙节点
$("body p")
3.选择选择器1中所选元素后面的一个符合选择器2条件的节点，选择器2所选元素和选择器1所选元素要在同一节点下。
$("#myid + li")
4.选择选择器1中所选元素后面的所有符合选择器2条件的节点，选择器2所选元素和选择器1所选元素要在同一节点下。
$("#myid ~ li")
表单选择器
用表单选择器要注意两点，一点是最好和input一起用，比如$("input:submIT")。另一点是大多数选择器都不属于css规范，无法用其优化功能。最好是先做别的选择，再用表单选择器过滤。
1.匹配所有按钮
$(":button")
匹配所有的<button>;mybutton</button>和<input tyPE="button" value="mybutton" />
2.匹配提交按钮
$(":submit")
匹配所有的<button>mybutton</button>，<button type="submit">mybutton</button>和<input type="submit" value="提交" />
3.匹配所有文本
$(":text")
匹配所有的<input type="text" >
注意：从版本1.5.2开始，<input>也能被匹配。
4.匹配当前焦点
$(":focus")
这是1.6版新增的，能获取当前获得焦点的元素
5.获取被选择状态的元素
$(":checked")
注意:它适用于checkbox,radio button和select列表。
6.其他的一些，很容易理解的。
$(":selected")
$(":reset")
$(":password")
$(":input")
$(":image")
$(":file")
$(":enabled")
$(":disabled")
属性选择器
1.有某属性
$("[attribute]")
如$("p[id]")选择有id属性的p
2.属性为某值
$("[attribute='value']")
3.属性为某值或‘某值-’打头的值
$("[attribute|='value']")
4.属性的值中含有某值
$("[attribute*='value']")
5.属性含有某值
$("[attribute~='value']")
注意：一个属性可以有多个值，每个值之间用空格分开，这个选择器正好能处理多个值中包含给定值就被选择的情况
6.属性的值以某值打头
$("[attribute^='value']")
7.属性的值以某值结尾
$("[attribute$='value']")
8.不含某属性或有该属性但是属性不为某值
$("[attribute!='value']")
注意：该选择器不属于css规范，无法用其优化功能。最好是先做别的选择，再用该选择器过滤。
9.复合属性选择器
$("[attributeFilter1][attributeFilter2][attributeFilterN]")
基本过滤器
1.获取当前选择器中给定位置的元素,从0开始计数
$("selector:First")
$("selector:last")
$("selector:even")偶数位
$("selector:odd")奇数位
$("selector:eq(index)")等于给定索引值的元素
$("selector:gt(index)")所有大于给定索引值的元素
$("selector:lt(index)")所有小于给定索引值的元素
注意:从1.8版开始，给定索引值可以为负数，表示从尾部开始索引。
2.去除与给定选择器匹配的元素
$(":not(selector)")
最好用.not()函数
3.选择h1,h2等header标签
$(":header")
4.选择给定语言的元素
1.9版新增
对于<p lang="en-us"></p>
用$("p:lang(en)")可以匹配所有lang属性为en或en-打头的元素
5.获取根元素
1.9版新增
$(":root")获取<htML>元素
6.获取文档URI所指向的元素。
比如有个URI是http://example.com/#foo,$("p.target")会获取<p id="foo">元素
7.获取当前正在动画的对象
$(":aniMATEd")
内容过滤器
1.匹配包含给定文本的元素
$(":contains(text)")
2.匹配所有不包含子元素或者文本的空元素
$(":empty")
3.匹配所有包含子元素或者文本的元素
$(":parent")
注意：所有的p都认为非空
4.匹配含有选择器所匹配的元素的元素.
$(":has(selector)")
注意:被匹配的元素可以是其孙子元素
子元素过滤器
1.获取在父元素中给定位置的元素，从1开始计数，对每个父元素分别计数。
需要注意的是如果选择器中的元素有n个在一个父元素中，但是这n个并不在父元素中的给定位置处，这样这n个元素都不会被选择。
$(":first-child")
$(":last-child")
$(":nth-child(index/even/odd/equation)")
equation的写法如:
$(":nth-child(3n+2)")
$(":nth-last-child(index/even/odd/equation)") 1.9版新增
2.选择在其父元素中是唯一元素的元素
$(":only-child")
3.获取在父元素中给定位置的元素，从1开始计数，对每个父元素分别计数。
针对原有的:nth-child等选择器对位置的判断是针对父元素中所有的元素的情况，1.9版新增了一些选择器，其对位置的判断变为针对父元素中所有在选择器中的元素来计数。
$(":first-of-type")
$(":last-of-type")
$(":nth-of-type(index/even/odd/equation)")
$(":nth-last-of-type(index/even/odd/equation)")
4.选择在选择器中是父元素唯一元素的元素
$(":only-of-type")
这个也是1.9版新增的
可见性过滤器
只有两个
$(":hidden")和$(":visible")
下面这些元素被认为是hidden的：
2.type="hidden"
3.元素的长或宽被设置为0
4.祖先为hidden，则元素为hidden
注意：不在document中的元素无法判断是否可见。
visibility:hidden或opacity:0被认为是可见的，因为它们仍会消耗布局空间。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery知识快览之一―选择器全部内容，希望文章能够帮你解决javascript代码实例教程-JQuery知识快览之一―选择器所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。