jQuery选择器的完整说明

选择器是jQuery最基本的东西。本文中列出的选择器基本上包括了所有的jQuery选择器。也许您可以通过本文加深对jQuery选择器的理解。它们的用法很简单。希望能提高个人编写jQuery代码的效率。介绍了所有jQuery选择器，有截图，有代码，有简单的总结，并列出了一些需要注意和区分的地方。

一、基本选择器

1.id选择器(指定id元素)

将id为“one”的元素的背景颜色设置为黑色。(id选择器返回单个元素)

$(文档)。ready(function () { $('#one '))。css('背景'，' # 000 ')；});2.类选择器(遍历css类元素)

将class='cube '的元素背景颜色设置为黑色

$(文档)。ready(function () { $(')。立方体’)。css('背景'，' # 000 ')；});3.元素选择器(遍历html元素)

将p元素的文本大小设置为12px

$(文档)。ready(function () { $('p '))。css('font-size '，' 12px ')；});4.*选择器(遍历所有元素)

$(文档)。ready(function(){//遍历form下的所有元素，并将字体颜色设置为red $ ('form * ')。CSS ('color '，' # ff 0000 ')；});5.并行选择器

$(文档)。ready(function(){//将p元素和div元素的边距设置为0 $('p，div ')。css('边距'，' 0 ')；});第二，级别选择器

1.父子(直接子元素)

$(文档)。ready(function(){//选择div下的第一代span元素，并将字体颜色设置为red $ ('div span ')。CSS ('color '，' # ff 0000 ')；});在下面的代码中，只有第一个跨度会改变颜色，第二个跨度不属于div的generation子元素，所以颜色保持不变。

div span 123/span p span 456/span/p/div 2 . prev next(下一个同级元素，相当于next()方法)

$(文档)。ready(function(){//选择下一个div同级元素$(')。itemdiv ')。类为item的CSS ('color '，' # ff 0000 ')；//等效代码//$('。项目')。下一个(' div ')。CSS ('color '，' # ff 0000 ')；});以下代码中，只有123和789会变色

p class=' item '/pdiv 123/div div 456/div span class=' item '/span div 789/div 3 . prev ~兄弟(prev元素的所有兄弟元素，相当于nextAll()方法)

$(文档)。ready(function(){//选择所有div同级元素$(')。内部~ div ')。类后的CSS ('color '，' # ff0000 ')在里面；//等效代码//$('。内部')。nextall ('div ')。CSS ('color '，' # ff 0000 ')；});以下代码G2和G4将改变颜色

div class=' inside ' G1/div G2/div span G3/span div G4/div III。滤波器选择器

1.基本过滤器选择器

——1.1 :第一个和：最后一个(取第一个元素或最后一个元素)

$(文档)。ready(function(){ $(' span : first ')。css('color '，' # ff 0000 ')；$(“span : last”)。css('color '，' # ff 0000 ')；});下面的代码，G1(第一个元素)和G3(最后一个元素)将改变颜色

span G1/span span G2/span span 3/span ——1.2 : not(取非元素)

$(文档)。ready(function(){ $(' div : not()。wrap)')。css('color '，' # ff 0000 ')；});下面的代码，G1会变色

DivG1/divdiv class='wrap'G2/div但是，请注意以下代码：

Div G1 Div class='wrap'G2/div/div当G1所在的div和G2所在的div是父子关系时，G1和G2都会变色。

——1.3 :偶数和：奇数(取偶数索引或奇数索引元素，索引从0开始，偶数表示偶数，奇数表示奇数)

$(文档)。ready(function(){ $(' tr : even ')。css('背景'，' # EEE ')；//偶数行颜色$ ('tr:odd ')。CSS('背景'，' #达达')；//奇数行颜色})；行a和c中的颜色#EEE(第一行的索引为0)，行b和d中的颜色#DADADA。

表宽=' 200 '单元格填充=' 0 '单元格间距=' 0 ' t body trtda/TD/tr trtdb/TD/tr trtdc/TD/tr trtdd/TD/tr/t body/table 33541.4 : eq(x)(取指定索引的元素)

$(文档)。ready(function(){ $(' tr : eq(2)')。css('背景'，' # ff 0000 ')；});改变第三行的背景色，C的背景会在上面的代码中改变颜色。

——1.5 :gt(x)和：lt(x)(取索引大于x或小于x的元素)

$(文档)。就绪(功能(){ $(' ul Li : gt(2)').css('color '，' # ff 0000 ')；$('ul li:lt(2)').css('color '，' # 0000 ff ')；});哌泊噻嗪棕榈酸酯和L5会是红色，L1和L2会是蓝色，L3是默认颜色

ul LIl 1/Li LIl 2/Li LIl 3/Li LIl 4/Li LIl 5/Li/ul ——1.6 :表头（取H1~H6标题元素)

$(文档)。ready(function(){ $(' : header ')).css('background '，' # EFEFEF ')；});下面的代码H1~H6的背景色都会变

h1 h1/h1 H2/H2 H3 H3/H3 H4/H4 H5/H5 h6h 6/h62 .内容过滤选择器

——2.1 :contains(text)()取包含文本文本的元素)

$(文档)。就绪(函数(){ //dd元素中包含' jQuery '文本的会变色$(“DD :包含”(“Jquery”)).css('color '，' # ff 0000 ')；});下面的代码，第一个截止日期(截止日期的缩写)会变色

dl dt技术/dt ddjQuery，1 .NET，CLR/dd dtSEO/dt dd关键字排名/dd dt其他/dt DD/DD/dl33542.2 :空(取不包含子元素或文本为空的元素)

$(文档)。ready(function(){ $(' DD : empty ')).html(")没有内容');});

上面第三个截止日期(截止日期的缩写)会显示'没有内容'文本

——2.3 :has(选择器)(取选择器匹配的元素)

$(文档)。就绪（函数(){ //为包含跨度元素的差异添加边框$(“div :有(span)”).css(“”边框，' 1px实心# 000 ');});即使跨度不是差异的直系子元素，也会生效

H2 A/SPan B/SPan/H2/——2.4 :分部母公司(取包含子元素或文本的元素)

$(文档)。ready(function(){ $(' ol Li : parent ')).css(“”边框，' 1px实心# 000 ');});下面的代码，A和D所在的里会有边框

ol li/li liA/li li/li liD/li/ol3 .可见性过滤选择器

——3.1 :隐藏（取不可见的元素)

jQuery至1.3.2之后的：隐藏选择器仅匹配display:none或输入类型='隐藏'/的元素，而不匹配隐藏的可见性：或opacity:0的元素。这也意味着隐藏的只匹配那些"隐藏的"并且不占空间的元素，像可见性：隐藏或opactity:0的元素占据了空间，会被排除在外。

参照：http://www .jquery SDK。com/API/隐藏选择器

下面的代码，先弹出你好对话框，然后hid-1会显示，hid-2仍然是不可见的。

html xmlns=' http://www。w3。org/1999/XHTML ' head runat=' server ' title/title style type=' text/CSS ' div { margin : 10px；宽度： 200像素；高度： 40pxborder: 1px实心# FF0000显示：块；} .hid-1 {显示：无；} .hid-2 {可视性：隐藏；}/style脚本类型=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(' div : hidden ')).演出(500场);警报($('输入3360隐藏').val())；});/script/head body div class=' hid-1 '显示： none/div class=' hid-2 '可见性：隐藏/div输入类型=' hidden '值=' hello '/body/html ——3。2 :能见度(取可见的元素)

下面的代码，最后一个差异会有背景色

脚本类型='text/javascript' $(文档)。ready(function(){ $(' div :可视')).css(“”背景，' # EEADBB ')；});/script div class=' hid-1 ' display : none/div div class=' hid-2 '可视性： hidden/divinput type=' hidden ' value=' hello '/div jQuery选择器大全/div4 .属性过滤选择器

——4.1[属性](取拥有属性属性的元素)

下面的代码，最后一个a标签没有标题属性，所以它仍然会带下划线

脚本类型='text/javascript' $(文档)。ready(function() { $('a[title]).css(“”文本装饰','无');});/script ul lia href='#' title='DOM对象和jQuery对象class='item'DOM对象和jQuery对象/a/li lia href='#' title='jQuery选择器大全class='item-selected'jQuery选择器大全/a/li lia href='#' title='jQuery事件大全class='item'jQuery事件大全/a/li lia href='#' title='基于jQuery的插件开发class='item '基于jQuery的插件开发/a/Li lia href=' # ' title=' Wordpress Jquery ' class=' item ' Wordpress Jquery/a/Li lia href=' # ' class=' item '其他/a/Li/ul ——4.2[属性=值]和【属性！=值](取属性属性值等于价值或不等于价值的元素)

分别为class='item '和同学们！=项目的a标签指定文字颜色

脚本类型='text/javascript' $(文档)。ready(function(){ $(' a[class=item]).css('color '，' # FF99CC ')；$('a[class！=item]').css('color '，' # FF6600 ')；});/script ——4.3[属性=值],[属性$=值]和[属性*=值](属性属性值以价值开始，以价值结束，或包含价值值)

在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，*模糊匹配，类似于结构化查询语言中的像" %str% "一样。

脚本类型='text/javascript' //识别大小写，输入字符串时可以输入引号，[title^=jQuery]和[title^='jQuery']是一样的$('a[title^=jQuery]').css('font-weight '，' bold ')；$('a[title$=jQuery]).css('font-size '，' 24px ')；$('a[title*=jQuery]).css(“”文本装饰','线条贯穿');/script ——4.4[选择器1][选择器2](复合型属性过滤器，同时满足多个条件)

将标题以' jQuery '开始，并且class='item '的a标签隐藏，那么a href='#' title='jQuery事件大全class='item'jQuery事件大全/a会被隐藏

脚本类型='text/javascript' $(文档)。就绪（功能(){ $('a[title^=jquery][class=item]').hide()；});/script5 .子元素过滤选择器

第一个孩子和：最后一个孩子

:第一胎表示第一个子元素，最后一个孩子表示最后一个子元素。

需要大家注意的是，fisrst和：最后返回的都是单个元素，而：第一胎和：最后一个孩子返回的都是集合元素。举个例子：div:first返回的是整个数字正射影像图文档中第一个差异元素，而div:first第一胎是返回所有差异元素下的第一个元素合并后的集合。

这里有个问题：如果一个元素没有子元素，第一个孩子和：最后一个孩子会返回空吗？请看下面的代码：

html xmlns=' http://www。w3。org/1999/XHTML ' head runat=' server ' title/title脚本类型=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ var len 1=$(' div : first-child ').长度；var len2=$('div:last-child ').长度；});/script/head dydiv/div/div/div/body/html也许你觉得这个答案，是不是太简单了？len1=2，len2=2。但实际确并不是，它们俩都等于3。把上面的代码稍微修改一下：

html xmlns=' http://www。w3。org/1999/XHTML ' head runat=' server ' title/title脚本类型=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ var len 1=$(' div : first-child ').长度；var len2=$('div:last-child ').长度；$(“div :第一个孩子”).每个（函数(){ alert($(this)).html())；});});/script/headdydiv 123 div 456 div/div/div/div/body/html结果却是弹出三个警惕，只不过最后一个警报里面是空白的。

——5.2 :独生子女

当某个元素有且仅有一个子元素时，独生子女才会生效。

html xmlns=' http://www。w3。org/1999/XHTML ' head runat=' server ' title/title脚本类型=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(' div :独生子').css(“”边框，' 1px实心#FF0000 ').css('width '，' 200px ')；});/script/headdydiv 123 div 456 div/div/div/div/body/html这里：独生子女也是三个元素，从最后一个很粗的红色边框（实际是两个元素的边框重叠了)也可以看出来。

——5.3第：个孩子

看到这个就想起英文单词里的，第四，第五，第六…,第n表示第n个，第：个孩子就表示第n个儿童元素。要注意的是，这儿的n不像方程式(x)、gt(x)或lt(x)是从0开始的，它是从一开始的，英文里好像也没有零的这样的序号词吧。

第：个孩子有三种用法：

1)第：个孩子(x)，获取第x个子元素2)第：个孩子（偶数)和第：个孩子（奇数),从一开始，获取第偶数个元素或第奇数个元素3): th-child(xn y)，x=0，y=0。例如x=3，y=0时就是3n，表示取第3n个元素(n=0)。实际上xn y是上面两种的通项式。(当x=0，y=0时，等同于： hth-child(x)；当x=2，y=0时，等同于第n个孩子（偶数);当x=2，y=1时，等同于第：个孩子（奇数))

下面的两个例子是针对2)和3)的，1)的例子我就不列举了。

例2:

html xmlns=' http://www。w3。org/1999/XHTML ' head runat=' server ' title/title style type=' text/CSS ' TD { width : 200 px；高度： 32px线高： 32px}/style脚本类型=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(文档)。就绪（函数(){ //偶数行背景红色$(' tr : th-child(偶数)')。css(“”背景，' # ff 0000 ')；//奇数行背景蓝色$("tr : th-child(奇数)")。css(“”背景，' # 0000 ff ')；});/script/head dy table trtd 1 .NBA 2012季后赛TD/tr/trtd 2 .NBA 2011季后赛TD/tr/trtd/3 .NBA 2010季后赛TD/tr/trtd 4 .NBA 2009季后赛TD/tr/trtd .NBA 2008季后赛TD/tr/trtd .NBA 2007季后赛/td/tr /table/body/html例3(html代码和例2是一样的):

脚本类型='text/javascript' $(文档)。ready(function(){ $(' tr : th-child(3n)')).css(“”背景，' # 0000 ff ')；});/script6 .表单对象属性过滤选择器

——6.1 :已启用和：disabled(取可用或不可用元素)

:已启用和：数据库的匹配范围包括输入，选择，文本区。

脚本类型='text/javascript' $(文档)。就绪(函数(){ $(' : enabled ')).css(“”边框，' 1px实心# ff 0000’)；$(':disabled ').css(“”边框，' 1px实心# 0000 ff’)；});/脚本div输入类型=“文本”值='可用的文本框//div输入类型='text' disabled='disabled '值='不可用的文本框//div div文本区域禁用='禁用'不可用的文本域/textarea /div选择disabled='disabled '选项英语/option选项简体中文/option/select/div ——6.2 :选中(取选中的单选框或复选框元素)

下面的代码，更改边框或背景色仅在工业管理学(工业工程)下有效果铬合金和火狐浏览器不会改变，但是警报都会弹出来。

脚本类型='text/javascript' $(文档)。ready(function(){ $(' : checked ')).css(“”背景，' #FF0000 ').每个（函数(){ alert($(this)).val())；});});/scriptdiv输入类型='复选框'选中='选中'值='必须'/必须勾选/divdiv你现在工作的企业属于：输入类型='收音机'名称=“无线电”已检查=“已检查”值='外企'/外企输入类型='收音机'名称='收音机'值='国企'/国企输入类型='收音机'名称='收音机'值='民企'/民企/div——6.3 :selected(取下拉列表被选中的元素)

脚本类型='text/javascript' $(文档)。ready(function(){ alert($(' : selected ')).val())；});/scriptselect选项值='外企'外企/option选项值='国企'国企/option选项值='私企'私企/option/select四、表单选择器

1.输入（取输入，文本区，选择，按钮元素)

:输入元素这里就不再多说了，前面的一些例子中也已经囊括了。

2.text(取单行文本框元素)和：密码（取密码框元素)

这两个选择器分别和属性选择器$("输入[type=text]"，$("输入[type=password]”)等同。

脚本类型='text/javascript' $(文档)。ready(function() { $(':text ')).css(“”边框，' 1px实心# ff 0000’)；$(':password ').css(“”边框，' 1px实心# 0000 ff’)；//等效代码//$(“输入[type=text]”).css(“”边框，' 1px实心# ff 0000’)；//$("输入[type=password]”.css(“”边框，' 1px实心# 0000 ff’)；});/script字段集样式=' width : 300 px'神话；传奇账户登录/图例差异标签用户名：/labelinput type=' text '/div div标签密码：/labelinput类型='密码'/div/字段集3 .收音机（取单选框元素)

:收音机选择器和属性选择器$("输入[type=radio]”)等同

脚本类型='text/javascript' $(文档)。ready(function() { $(':radio ')).每个（函数(){ alert($(this)).val())；});//等效代码/* $(“input[type=radio]”).每个（函数(){ alert($(this)).val())；});*/});/script你现在工作的企业属于：输入类型='收音机'名称=“无线电”已检查=“已检查”值='外企'/外企输入类型='收音机'名称='收音机'值='国企'/国企输入类型='收音机'名称='收音机'值='民企'/民企4.复选框（取复选框元素)

:复选框选择器和属性选择器$("输入[类型=复选框]")等同

脚本类型='text/javascript' $(文档)。ready(function(){ $(' : checkbox ')).每个（函数(){ alert($(this)).val())；});//等效代码/* $("输入[类型=复选框]")。每个（函数(){ alert($(this)).val())；});*/});/script您的兴趣爱好：输入类型='复选框'/游泳输入类型='复选框'/看书输入类型='复选框'选中='选中'值='打篮球'/打篮球输入类型='复选框'选中='选中'值='电脑游戏'/电脑游戏上面的代码，会将所有额检验盒的价值输出出来。若你想选择选中项，有三种写法：

$(' :复选框：复选框').每个（函数(){ alert($(this)).val())；});$("输入[类型=复选框][选中])。每个（函数(){ alert($(this)).val())；});$(':checked ').每个（函数(){ alert($(this)).val())；});5.submit(取提交按钮元素)

:submit选择器和属性选择器$("输入[类型=提交]")等同

6.复位（取重置按钮元素)

:复位选择器和属性选择器$("输入[类型=重置]")等同

7.按钮（取按钮元素)

:按钮选择器和属性选择器$("输入[type=button]”)等同

8.文件（取上传域元素)

:文件选择器和属性选择器$("输入[类型=文件]")等同

9.隐藏（取不可见元素)

:隐藏选择器和属性选择器$("输入[类型=隐藏]")等同

以上就是jQuery选择器的全部内容了，是不是很全面？如有遗漏的，请告之一下，本文持续更新。