jQuery选择器
没有什么新意，全是从网上摘抄的，如果哪天忘了，就来查查吧。
选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。
一、基本选择器
1.id选择器（指定id元素）
将id="one"的元素背景色设置为黑色。（id选择器返单个元素）
$(document).ready(function(){
$('#one').css('background','#000');
});
2.class选择器（遍历css类元素）
将class="cube"的元素背景色设为黑色
$(document).ready(function(){
$('.cube').css('background','#000');
});
3.element选择器（遍历html元素）
将p元素的文字大小设置为12px
$(document).ready(function(){
$('p').css('font-size','12px');
});
4.*选择器（遍历所有元素）
$(document).ready(function(){
//遍历form下的所有元素，将字体颜色设置为红色
$('form*').css('color','#FF0000');
});
5.并列选择器
$(document).ready(function(){
//将p元素和div元素的margin设为0
$('p,div').css('margin','0');
});
二、层次选择器
1.parent>child（直系子元素）
$(document).ready(function(){
//选取div下的第一代span元素，将字体颜色设为红色
$('div>span').css('color','#FF0000');
});
下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。
<div>
<span>123</span>
<p>
<span>456</span>
</p>
</div>
2.prev+next（下一个兄弟元素，等同于next()方法）
$(document).ready(function(){
//选取class为item的下一个div兄弟元素
$('.item+div').css('color','#FF0000');
//等价代码
//$('.item').next('div').css('color','#FF0000');
});
下面的代码，只有123和789会变色
<pclass="item"></p>
<div>123</div>
<div>456</div>
<spanclass="item"></span>
<div>789</div>
3.prev~siblings（prev元素的所有兄弟元素，等同于nextAll()方法）
$(document).ready(function(){
//选取class为inside之后的所有div兄弟元素
$('.inside~div').css('color','#FF0000');
//等价代码
//$('.inside').nextAll('div').css('color','#FF0000');
});
下面的代码，G2和G4会变色
<divclass="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>
三、过滤选择器
1.基本过滤选择器
——1.1:first和:last（取第一个元素或最后一个元素）
$(document).ready(function(){
$('span:first').css('color','#FF0000');
$('span:last').css('color','#FF0000');
});
下面的代码，G1（first元素）和G3（last元素）会变色
<span>G1</span>
<span>G2</span>
<span>G3</span>
——1.2:not（取非元素）
$(document).ready(function(){
$('div:not(.wrap)').css('color','#FF0000');
});
下面的代码，G1会变色
<div>G1</div>
<divclass="wrap">G2</div>
但是，请注意下面的代码：
<div>
G1
<divclass="wrap">G2</div>
</div>
当G1所在div和G2所在div是父子关系时，G1和G2都会变色。
——1.3:even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）
$(document).ready(function(){
$('tr:even').css('background','#EEE');//偶数行颜色
$('tr:odd').css('background','#DADADA');//奇数行颜色
});
A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA
image
<tablewidth="200"cellpadding="0"cellspacing="0">
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</tbody>
</table>
——1.4:eq(x)（取指定索引的元素）
image
$(document).ready(function(){
$('tr:eq(2)').css('background','#FF0000');
});
更改第三行的背景色，在上面的代码中C的背景会变色。
——1.5:gt(x)和:lt(x)（取大于x索引或小于x索引的元素）
$(document).ready(function(){
$('ulli:gt(2)').css('color','#FF0000');
$('ulli:lt(2)').css('color','#0000FF');
});
L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色
image
<ul>
<li>L1</li>
<li>L2</li>
<li>L3</li>
<li>L4</li>
<li>L5</li>
</ul>
——1.6:header（取H1~H6标题元素）
$(document).ready(function(){
$(':header').css('background','#EFEFEF');
});
下面的代码，H1~H6的背景色都会变
image
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
2.内容过滤选择器
——2.1:contains(text)（取包含text文本的元素）
$(document).ready(function(){
//dd元素中包含"jQuery"文本的会变色
$('dd:contains("jQuery")').css('color','#FF0000');
});
下面的代码，第一个dd会变色
image
<dl>
<dt>技术</dt>
<dd>jQuery,.NET,CLR</dd>
<dt>SEO</dt>
<dd>关键字排名</dd>
<dt>其他</dt>
<dd></dd>
</dl>
——2.2:empty（取不包含子元素或文本为空的元素）
$(document).ready(function(){
$('dd:empty').html('没有内容');
});
image
上面第三个dd会显示"没有内容"文本
——2.3:has(selector)（取选择器匹配的元素）
$(document).ready(function(){
//为包含span元素的div添加边框
$('div:has(span)').css('border','1pxsolid#000');
});
即使span不是div的直系子元素，也会生效
image
<div>
<h2>
A
<span>B</span>
</h2>
</div>
——2.4:parent（取包含子元素或文本的元素）
$(document).ready(function(){
$('olli:parent').css('border','1pxsolid#000');
});
下面的代码，A和D所在的li会有边框
image
<ol>
<li></li>
<li>A</li>
<li></li>
<li>D</li>
</ol>
3.可见性过滤选择器
——3.1:hidden（取不可见的元素）
jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<inputtype="hidden"/>的元素，而不匹配visibility:hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。
参照：http://www.jquerysdk.com/api/hidden-selector
下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。
image
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
div
{
margin:10px;
width:200px;
height:40px;
border:1pxsolid#FF0000;
display:block;
}
.hid-1
{
display:none;
}
.hid-2
{
visibility:hidden;
}
</style>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$('div:hidden').show(500);
alert($('input:hidden').val());
});
</script>
</head>
<body>
<divclass="hid-1">display:none</div>
<divclass="hid-2">visibility:hidden</div>
<inputtype="hidden"value="hello"/>
</body>
</html>
——3.2:visible（取可见的元素）
下面的代码，最后一个div会有背景色
image
<scripttype="text/javascript">
$(document).ready(function(){
$('div:visible').css('background','#EEADBB');
});
</script>
<divclass="hid-1">display:none</div>
<divclass="hid-2">visibility:hidden</div>
<inputtype="hidden"value="hello"/>
<div>
jQuery选择器大全
</div>
4.属性过滤选择器
——4.1[attribute]（取拥有attribute属性的元素）
下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线
image
<scripttype="text/javascript">
$(document).ready(function(){
$('a[title]').css('text-decoration','none');
});
</script>
<ul>
<li><ahref="#"title="DOM对象和jQuery对象"class="item">DOM对象和jQuery对象</a></li>
<li><ahref="#"title="jQuery选择器大全"class="item-selected">jQuery选择器大全</a></li>
<li><ahref="#"title="jQuery事件大全"class="item">jQuery事件大全</a></li>
<li><ahref="#"title="基于jQuery的插件开发"class="item">基于jQuery的插件开发</a></li>
<li><ahref="#"title="Wordpress&jQuery"class="item">Wordpress&jQuery</a></li>
<li><ahref="#"class="item">其他</a></li>
</ul>
——4.2[attribute=value]和[attribute!=value]（取attribute属性值等于value或不等于value的元素）
分别为class="item"和class!=item的a标签指定文字颜色
image
JQUERY的父，子，兄弟节点查找方法
jQuery.parent(expr)找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()
的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从
元素开始找,等同于$("pspan")
jQuery使用CSS选择器来选取HTML元素。
$("p")选取<p>元素。
$("p.intro")选取所有class="intro"的<p>元素。
$("p#demo")选取id="demo"的第一个<p>元素。
jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于"#"的元素。
$("[href!='#']")选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
jQueryCSS选择器
jQueryCSS选择器可用于改变HTML元素的CSS属性。
下面的例子把所有p元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
$(this)当前HTML元素
$("p")所有<p>元素
$("p.intro")所有class="intro"的<p>元素
$(".intro")所有class="intro"的元素
$("#intro")id="intro"的第一个元素
$("ulli:first")每个<ul>的第一个<li>元素
$("[href$='.jpg']")所有带有以".jpg"结尾的属性值的href属性
$("div#intro.head")id="intro"的<div>元素中的所有class="head"的元素
*$("*")所有元素
#id$("#lastname")id="lastname"的元素
.class$(".intro")所有class="intro"的元素
element$("p")所有<p>元素
.class.class$(".intro.demo")所有class="intro"且class="demo"的元素
:first$("p:first")第一个<p>元素
:last$("p:last")最后一个<p>元素
:even$("tr:even")所有偶数<tr>元素
:odd$("tr:odd")所有奇数<tr>元素
:eq(index)$("ulli:eq(3)")列表中的第四个元素（index从0开始）
:gt(no)$("ulli:gt(3)")列出index大于3的元素
:lt(no)$("ulli:lt(3)")列出index小于3的元素
:not(selector)$("input:not(:empty)")所有不为空的input元素
:header$(":header")所有标题元素<h1>-<h6>
:animated所有动画元素
:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:empty$(":empty")无子（元素）节点的所有元素
:hidden$("p:hidden")所有隐藏的<p>元素
:visible$("table:visible")所有可见的表格
s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素
[attribute]$("[href]")所有带有href属性的元素
[attribute=value]$("[href='#']")所有href属性的值等于"#"的元素
[attribute!=value]$("[href!='#']")所有href属性的值不等于"#"的元素
[attribute$=value]$("[href$='.jpg']")所有href属性的值包含以".jpg"结尾的元素
:input$(":input")所有<input>元素
:text$(":text")所有type="text"的<input>元素
:password$(":password")所有type="password"的<input>元素
:radio$(":radio")所有type="radio"的<input>元素
:checkbox$(":checkbox")所有type="checkbox"的<input>元素
:submit$(":submit")所有type="submit"的<input>元素
:reset$(":reset")所有type="reset"的<input>元素
:button$(":button")所有type="button"的<input>元素
:image$(":image")所有type="image"的<input>元素
:file$(":file")所有type="file"的<input>元素
:enabled$(":enabled")所有激活的input元素
:disabled$(":disabled")所有禁用的input元素
:selected$(":selected")所有被选取的input元素
:checked$(":checked")所有被选中的input元素
$("#myELement")选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div")选择所有的div标签元素，返回div元素数组
$(".myClass")选择使用myClass类的css的所有元素
$("*")选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")
层叠选择器：
$("forminput")选择所有的form元素中的input元素
$("#main>*")选择id值为main的所有的子元素
$("label+input")选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev~div")同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器：
$("tr:first")选择所有tr元素的第一个
$("tr:last")选择所有tr元素的最后一个
$("input:not(:checked)+span")
过滤掉：checked的选择器的所有的input元素
$("tr:even")选择所有的tr元素的第0，2，4......个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
$("tr:odd")选择所有的tr元素的第1，3，5......个元素
$("td:eq(2)")选择所有的td元素中序号为2的那个td元素
$("td:gt(4)")选择td元素中序号大于4的所有td元素
$("td:ll(4)")选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
内容过滤选择器：
$("div:contains('John')")选择所有div中含有John文本的元素
$("td:empty")选择所有的为空（也不包括文本节点）的td元素的数组
$("div:has(p)")选择所有含有p标签的div元素
$("td:parent")选择所有的以td为父节点的元素数组
可视化过滤选择器：
$("div:hidden")选择所有的被hidden的div元素
$("div:visible")选择所有的可视化的div元素
属性过滤选择器：
$("div[id]")选择所有含有id属性的div元素
$("input[name='newsletter']")选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']")选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']")选择所有的name属性以'news'开头的input元素
$("input[name$='news']")选择所有的name属性以'news'结尾的input元素
$("input[name*='man']")选择所有的name属性包含'news'的input元素
$("input[id][name$='man']")可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
子元素过滤选择器：
$("ulli:nth-child(2)"),$("ulli:nth-child(odd)"),$("ulli:nth-child(3n+1)")
$("divspan:first-child")返回所有的div元素的第一个子节点的数组
$("divspan:last-child")返回所有的div元素的最后一个节点的数组
$("divbutton:only-child")返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器：
$(":input")选择所有的表单输入元素，包括input,textarea,select和button
$(":text")选择所有的textinput元素
$(":password")选择所有的passwordinput元素
$(":radio")选择所有的radioinput元素
$(":checkbox")选择所有的checkboxinput元素
$(":submit")选择所有的submitinput元素
$(":image")选择所有的imageinput元素
$(":reset")选择所有的resetinput元素
$(":button")选择所有的buttoninput元素
$(":file")选择所有的fileinput元素
$(":hidden")选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器：
$(":enabled")选择所有的可操作的表单元素
$(":disabled")选择所有的不可操作的表单元素
$(":checked")选择所有的被checked的表单元素
$("selectoption:selected")选择所有的select的子元素中被selected的元素
选取一个name为”S_03_22″的inputtext框的上一个td的text值
$(”input[@name=S_03_22]“).parent().prev().text()
名字以”S_”开始，并且不是以”_R”结尾的
$(”input[@name^='S_']“).not(”[@name$='_R']“)
一个名为radio_01的radio所选的值
$(”input[@name=radio_01][@checked]“).val();
$("AB")查找A元素下面的所有子节点，包括非直接子节点
$("A>B")查找A元素下面的直接子节点
$("A+B")查找A元素后面的兄弟节点，包括非直接子节点
$("A~B")查找A元素后面的兄弟节点，不包括非直接子节点
1.$("AB")查找A元素下面的所有子节点，包括非直接子节点
例子：找到表单中所有的input元素
HTML代码:
<form>
<label>Name:</label>
<inputname="name"/>
<fieldset>
<label>Newsletter:</label>
<inputname="newsletter"/>
</fieldset>
</form>
<inputname="none"/>
jQuery代码:
$("forminput")
结果:
[<inputname="name"/>,<inputname="newsletter"/>]
2.$("A>B")查找A元素下面的直接子节点
例子：匹配表单中所有的子级input元素。
HTML代码:
<form>
<label>Name:</label>
<inputname="name"/>
<fieldset>
<label>Newsletter:</label>
<inputname="newsletter"/>
</fieldset>
</form>
<inputname="none"/>
jQuery代码:
$("form>input")
结果:
[<inputname="name"/>]
3.$("A+B")查找A元素后面的兄弟节点，包括非直接子节点
例子：匹配所有跟在label后面的input元素
HTML代码:
<form>
<label>Name:</label>
<inputname="name"/>
<fieldset>
<label>Newsletter:</label>
<inputname="newsletter"/>
</fieldset>
</form>
<inputname="none"/>
jQuery代码:
$("label+input")
结果:
[<inputname="name"/>,<inputname="newsletter"/>]
4.$("A~B")查找A元素后面的兄弟节点，不包括非直接子节点
例子：找到所有与表单同辈的input元素
HTML代码:
<form>
<label>Name:</label>
<inputname="name"/>
<fieldset>
<label>Newsletter:</label>
<inputname="newsletter"/>
</fieldset>
</form>
<inputname="none"/>
jQuery代码:
$("form~input")
结果:
[<inputname="none"/>]
作者：TylerNing
出处：http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过以下邮箱地址williamningdong@gmail.com联系我，非常感谢。
分类:程序人生
标签:javascript