正文
jQuery选择器。 5.21 《深夜还在编码的你》
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
(之所以字体弄那么大是因为省眼，程序员不容易， 程序员 的眼睛更不容易，请保护我们的眼睛)
选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。
熟练地使用选择器，不但能简化代码，而且能够事半功倍。
jQuery选择器可通过CSS选择器、条件过滤两种方式获取元素。
可以通过CSS选择器语法规则获取元素的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', '');
});
$(document).ready(function(){
$('#.nihao').hover(
function(){
$(this).addClass("")
},function(){
$(this).removeClass("")
});
});
基本过滤选择器
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>
2. :not（取非元素）
$(document).ready(function () {
$('div:not(.wrap)').css('color', '#FF0000');
});//下面的代码，G1会变色
<div>G1</div>
<div class="wrap">G2</div>
//但是，请注意下面的代码：
<div>
G1
<div class="wrap">G2</div>
</div>
当G1所在div和G2所在div是父子关系时，G1和G2都会变色。
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
<table width="" cellpadding="" cellspacing="">
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</tbody>
</table>
$("#myELement") // 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") // 选择所有的div标签元素，返回div元素数组
$(".myClass") // 选择使用myClass类的css的所有元素
$("*") // 选择文档中的所有的元素，可以运用多种的选择方式进行合选择：例如$("#myELement,div,.myclass")
One(层次选择器):
$("form input") // 选择所有的form元素中的input元素
$("#main > *") // 选择id值为main的所有的子元素
$("label + input") // 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元 // 素
$("#prev ~ div") // 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
1. parent > child（直系子元素）
$(document).ready(function () {
// 选取div下的第一代span元素，将字体颜色设为红色
$('div > span').css('color', '#FF0000');
});下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。
<div>
<span></span>
<p>
<span></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会变色
<p class="item"></p>
<div></div>
<div></div>
<span class="item"></span>
<div></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会变色
<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>
Two(属性选择器):
$("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元素
[attribute]（取拥有attribute属性的元素）
下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线
<script type="text/javascript">
$(document).ready(function() {
$('a[title]').css('text-decoration', 'none');
});
</script>
<ul>
<li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
<li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
<li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
<li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
<li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
<li><a href="#" class="item">其他</a></li>
</ul>——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素） 分别为class="item"和class!=item的a标签指定文字颜色 .main_shipin a:hover img{filter:Alpha(Opacity=);opacity:0.7;}
Three(基本过滤选择器):
$("tr:first") // 选择所有tr元素的第一个
$("tr:last") // 选择所有tr元素的最后一个
$("input:not(:checked) + span") //过滤掉：checked的选择器的所有的input元素
过滤掉：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")
Four(可见性过滤选择器):
$("div:hidden") // 选择所有的被hidden的div元素
$("div:visible") // 选择所有的可视化的div元素
:hidden（取不可见的元素）
jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。
下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
div
{
margin: 10px;
width: 200px;
height: 40px;
border: 1px solid #FF0000;
display:block;
}
.hid-
{
display: none;
}
.hid-
{
visibility: hidden;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div:hidden').show();
alert($('input:hidden').val());
});
</script>
</head>
<body>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
</body>
</html>
——3.2 :visible（取可见的元素）
下面的代码，最后一个div会有背景色
<script type="text/javascript">
$(document).ready(function() {
$('div:visible').css('background', '#EEADBB');
});
</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>
jQuery选择器
</div>
Five(内容过滤选择器):
$("div:contains('John')") //选择所有div中含有John文本的元素
$("td:empty") // 选择所有的为空（也不包括文本节点）的td元素的数组
$("div:has(p)") // 选择所有含有p标签的div元素
$("td:parent") // 选择所有的以td为父节点的元素数组
1. :contains(text)（取包含text文本的元素）
$(document).ready(function () {
// dd元素中包含"jQuery"文本的会变色
$('dd:contains("jQuery")').css('color', '#FF0000');
});下面的代码，第一个dd会变色
<dl>
<dt>技术</dt>
<dd>jQuery, .NET, CLR</dd>
<dt>SEO</dt>
<dd>关键字排名</dd>
<dt>其他</dt>
<dd></dd>
</dl>
2. :empty（取不包含子元素或文本为空的元素）
$(document).ready(function () {
$('dd:empty').html('没有内容');
});
上面第三个dd会显示"没有内容"文本
3. :has(selector)（取选择器匹配的元素）
$(document).ready(function () {
// 为包含span元素的div添加边框
$('div:has(span)').css('border', '1px solid #000');
});即使span不是div的直系子元素，也会生效
<div>
<h2>
A
<span>B</span>
</h2>
</div>
4. :parent（取包含子元素或文本的元素）
$(document).ready(function () {
$('ol li:parent').css('border', '1px solid #000');
});下面的代码，A和D所在的li会有边框
<ol>
<li></li>
<li>A</li>
<li></li>
<li>D</li>
</ol>
Six(子元素过滤选择器):
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") // 返回所有的div元素的第一个子节点的数组
$("div span:last-child") // 返回所有的div元素的最后一个节点的数组
$("div button:only-child") // 返回所有的div中只有唯一一个子节点的所有子节点的数组
Seven(表单元素选择器):
$(":input") // 选择所有的表单输入元素，包括input, textarea, select 和 button
$(":text") // 选择所有的text input元素
$(":password") // 选择所有的password input元素
$(":radio") // 选择所有的radio input元素
$(":checkbox") // 选择所有的checkbox input元素
$(":submit") // 选择所有的submit input元素
$(":image") // 选择所有的image input元素
$(":reset") // 选择所有的reset input元素
$(":button") // 选择所有的button input元素
$(":file") // 选择所有的file input元素
$(":hidden") // 选择所有类型为hidden的input元素或表单的隐藏域
Eight(表单元素过滤选择器):
1 $(":enabled") // 选择所有的可操作的表单元素
2 $(":disabled") // 选择所有的不可操作的表单元素
3 $(":checked") // 选择所有的被checked的表单元素
4 $("select option:selected")// 选择所有的select 的子元素中被selected的元素
—————————————————————————————华丽的分割线——————————————————————————————————
//选取一个Name 为”S_2222″的input text框的上一个td的text值
$(”input[@ name =S_2222]“).parent().prev().text() //名字以”S_”开始，并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“) //一个名为 radio_1294的radio所选的值
$(”input[@ name =radio_1294][@checked]“).val();
$(
"A B"
) 查找A元素下面的所有子节点，包括非直接子节点
$(
"A>B"
) 查找A元素下面的直接子节点
$(
"A+B"
) 查找A元素后面的兄弟节点，包括非直接子节点
$(
"A~B"
) 查找A元素后面的兄弟节点，不包括非直接子节点
//1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点
//例：找到表单中所有的 input 元素
//HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
//jQuery 代码:
$("form input")
//结果:
[ <input name="name" />, <input name="newsletter" /> ]
//2. $("A>B") 查找A元素下面的直接子节点
//例：匹配表单中所有的子级input元素。
//HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
//jQuery 代码:
$("form > input")
//结果:
[ <input name="name" /> ]
--
//3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
//例子：匹配所有跟在 label 后面的 input 元素
//HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
//jQuery 代码:
$("label + input")
//结果:
[ <input name="name" />, <input name="newsletter" /> ]
--
//4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点
//例子：找到所有与表单同辈的 input 元素
//HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
//jQuery 代码:
$("form ~ input")
//结果:
[ <input name="none" /> ]
编写选择器时要注意特殊符号和空格。
以上是我所总结 谢谢你的观看！
生活其实和代码是一样的 总有不顺的时候 在那时转换一下你的思维 或许 你可以改变那不顺。
爱自己 爱生活 爱代码 爱音乐 爱文字 爱交友
©北京你好！
作者：微冷的风
出处：http://www.cnblogs.com/smbk/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
