改变所有的<span> 元素和id 为two的元素的背景颜色 $('span,#two').css("background","#bbffaa"); |
$("ancestor descendant") 选取ancestor 元素的所有descendant（后代）元素 集合 $("div span")选取<div>里的所有的<span> 元素 |
$("parent>child") 选取parent元下的child（子）元素 集合 $("div>span")选取<div> 元素下元素名是<span>的子元素 |
$('prev+next') 选取紧接在prev元素后的next元素 集合 $('.one+div')选取class为one的下一个<div>元素 |
$('prev~siblings') 选取prev元素之后的所有siblings元素 集合 $("#two~div")选取id为two的元素后面的所有<div>兄弟 元素 |
1.改变<body> 内所有的<div> 的背景色 $('body div').css("background","#bbffaa"); |
2.改变<body> 内<div>元素的背景颜色 $('body>div').css("background","#bbffaa"); |
3.改变class为one的下一个<div>元素背景色 $(".one+div").css("background","#bbffaa"); |
4.改变id 为two的元素后面的所有<div>兄弟元素的背景色 $('#two~div').css("background","#bbffaa"); |
5. $("table").find("tr") //找子孙都可以
$("table>tbody>tr") 找所有tr
$("table>tbody>tr:first") 找第一行
$("table>tbody>tr").eq(0) 找第一行
$("table>tbody>tr:odd") 所有奇数行
$("table>tbody>tr:even") 所有偶数行 .
因为子代只是后代里的第一代所以要一层一层找。
$("table>tbody>tr") 而后台选择直接 $("table tr")就可以。
在层次选择器中，第1个和第2个选择器比较常用，而后面两个因为在jQuery里可以用更加简单的方法来代替， |
可以使用next() 方法来替$('prev+next')选择器，如表2-6所示。 |
可以使用nextAll方法来替代$('prev~siblings')选择器。 |
等价关系 $(".one+div"); $(".one").next("div"); |
$("#prev~div"); $("#prev").nextAll("div"); |
$("#prev~div").css("background","#bbffaa"); |
$("#prev").nextAll().css("background","#bbffaa"); |
$("#prev").siblings("div").css("background","#bbffaa"); 选取#prev所有同辈div元素,无论前后位置（与前面两个还是有不同的） |
:first 选取第一个元素 单个元素 $("div:first")选取所有<div> 元素中第一个<div>元素。 |
:last 选取最后一个元素 单个元素 $("div:last") 选取所有<div>元素中最后一个<div>元素。 |
:not(selector) 去除所有与给定选择器匹配的元素 集合元素 $("input:not(.myclass)")选取class不是myclass的<input>元素。 |
:even 选取索引是偶数的所有元素，索引从0 开始 集合元素 $("input:even")选取索引是偶数的<input> 元素。 |
:odd 选取索引是奇数的所有元素，索引从0开始 集合元素 $("input:dd") 选取索引是奇数的<input>元素。 |
:eq(index) 选取索引等于index的元素(index从0开始)单个元素 $("input:eq(1)")选取索引等于1的<input>元素。 |
:gt(index) 选取索引大于index的元素(index从0开始)集合元素 $("input:gt(1)")选取索引大于1的<input>元素 大于1 不包含 。 |
:lt(index) 选取索引小于index的元素(index从0开始)集合元素 $("input:lt(1)")选取索引大于1的<input>元素。 |
:header 选取所有的标题元素，h1 ,h2 ,h3 等 集合元素 $(":header") 选取网页中所有的<h1> <h2> <h3> |
:animate 选取当前正在执行动画的所有元素 集合元素 $("div:animated")选取正在执行动画的<div>元素 |
:contains(text) 选取含有文本内容"text"的元素 集合元素 $("div:contains("我")")选取所有文本含有"我"的<div>元素 |
:empty 选取不包含子元素或者文本的空元素 集合元素 $("div:empty")选取不包含子元素(包括文本元素)的<div>空元素 |
:has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $("div:has(p)")选取含所有<p>元素的<div>元素 |
:parent 选取含有子元素或者文本的元素 集合元素 $("div:parent")选取拥有子元素(包括文本元素)的<div>元素。（parent是内容过滤器） |
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。 |
:hidden 选取所有不可见的元素 集合元素 $(":hidden")选取所有不可见的元素。包括<input type="hidden">,<div style="display:nooe"> 如果只选取<input>元素 ，可以使用 $("input:hidden"); |
:visible 选取所有可见的元素 集合元素 $("div:visible") 选取所有可见的<div>元素 |
在可见性选择器中，需要注意选择器:hidden ，它不仅包括样式属性display 为"none"的元素,也包括文本隐藏<input type="hidden" />和 visibility:hidden 之类的元素。 |
注意 show()是jQuery的方法，它的功能是显示元素,3000 是时间，单位为毫秒 。 |
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。属性过滤选择器的介绍说明如表 2-14所示。 |
attribute 选取拥有此属性的元素 集合元素 $("div[id]")选取属性拥有id的元素 |
attribute=value 选取属性的值为value的元素 集合元素 $("div[title=test]")选取属性title为test的<div>元素 |
attribute!=value 选取属性的值不等于value的元素 集合元素 $("div[title=test]")选取属性title不等于test的<div>元素（没有title的<div>元素也会被选取） |
attribute^=value 选取属性的值以value开始的元素 集合元素 $("div[title^=test]")选取属性title以"test"开始的<div> 元素 |
attribute$=value 选取属性的值以value结束的元素 集合元素 $("div[title$=test]")选取属性title以"test"结束的<div> 元素 |
attribute*=value 选取属性的值含有value的元素 集合元素 $("div[title*=test]")选取属性title含有test的<div>元素 |
[select1][slect2] 用属性选择器合并成一个复合属性选择器，满足多个条件，每一次，缩小一次范围 集合元素 $("div[id][title$='test']")选取拥有属性id，并且属性title以test结束的<div>元素 |
子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂，不过没有关系，只要将元素的父元素和子元素区别清楚，那么使用起来就很简单。 |
:nth-child(index/evenodd/equation) 选取每个父元素的第index个子元素或者奇偶元素(index) 集合元素 :eq(index)只匹配一个元素，而nth-child将为每一个父元素匹配子元素，并且nth-child(index)的index 是从1开始的。而eq(index)是从0开始的 |
:first-child 选取每个父元素的第1个子元素 集合元素 :first 是返回单个元素，而first-child选择符将为每个父元素匹配1个子元素。 |
:last-child 选取每个父元素的最后一个子元素 |
:only-child 如果某个元素是它父元素中惟一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会匹配 集合元素 $("ul li:only-child")在<ul>中选取是惟一子元素的<li>元素 |
:nth-child()选择器是很常用的子元素过滤选择器，详细功能如下。 |
(1) :nth-child()选择器是很常用的子元素过滤选择器。 |
1.:nth-child(even)能选取每个父元素下的索引值是偶数的元素。 |
2.:nth-child(old) 能选取每个父元素下的索引值是奇数的元素。 |
3.:nth-child(2) 能选取每个父元素下的索引值等于2的元素 |
4.:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素。 |
5.:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素 |
改版每个class为one 的<div>父元素下的第2个子元素的背景色 $('div.one :nth-child(2)').css("background","#bbffaa"); |
改变每个class为one的<div>父元素的第1个子元素的背景色 $('div.one :first-child').css("background","#bbffaa"); |
改变每个class 位one的<div>父元素下的最后一个子元素的背景色 $('div.one :last-child').css("background","#bbffaa"); |
如果class为one 的<div> 父元素下只有一个子元素，那么则改变这个子元素的背景色 $('div.one:only-child').css("background","#bbffaa"); |
选择器主要是对所选择的表单元素进行过滤，例比如选择被选中的下拉框，多选框等等。 |
:enable 选取所有可用元素 集合元素 $("#from :enable") 选取id为from1的表单内的所有可用元素 |
:disabled 选取所有不可用元素 集合元素 $("#from2")：disabled选取id为from2的表单内的所有不可用元素 |
:checked 选取所有被选中的元素(单选框，复选框) 集合元素 $("input:checked")选取所有被选中的<input>元素 |
:selected 选取所有被选中的选项元素(下拉列表) 集合元素 $("select:selected");选取所有被选中的选项元素 |
为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器，利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。 |
:input 选取所有的<input>,<textarea>,<select>和<button>元素 集合元素 $(":input")选取所有<input>,<textare>,<select>和<button>元素 |
:text 选取所有的单行文本框 集合元素 $(":text")选取所有的单行文本框 |
:password 选取所有的密码框 集合元素 $(":password")选取所有的密码框 |
:radio 选取是以体育的单选框 集合元素 $(":radio") 选取所有的单选框 |
:checkbox 选取所有的多选框 集合元素 $(":checkbox")选取所有的复选框 |
:submit 选取所有的提交按钮 集合元素 $(":submit")选取所有的提交按钮 |
:image 选取所有的图像按钮 集合元素 $(":image")选取所有的图像按钮 |
:rest 选取所有的重置按钮 集合元素 $(":rest")选取所有的重置按钮 |
:button 选取所有的按钮 集合元素 $(":button");选取所有的按钮 |
:file 选取所有的上传域 集合元素 $(":file")选取所有的上传域 |
:hidden 选取所有不可见元素 集合元素 $(":hidden")选取所有不可见元素（已经在不可见性过滤选择器中讲过） |
$("#from1:input").length; |
$("#from1 :password").length; |
总结：
发现一篇很好文章地址如下：
http://www.cnblogs.com/qiantuwuliang/archive/2009/08/02/1537187.html 。
里面不仅详细介绍了jquery 选择器，还介绍了jquery 选择器实验室来学习jquery（很好的学习方法）(URL:http://codylindley.com/jqueryselectors/) 。
文中总结了选择和过滤的区别和DOM 对象和jquery 包装集的相互转化。
如：
jQuery包装集转Dom对象
var domObject = $("#testDiv")[0];
注意, 通过索引器返回的不再是jQuery包装集, 而是一个Dom对象!
选择和过滤的区别：
1.jQuery选择器按照功能主要分为"选择"和"过滤". 并且是配合使用的. 可以同时使用组合成一个选择器字符串.
2.主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中筛选, "过滤"选择器也可以单独使用, 表示从全部"*"中筛选. 比如:
(":[title]")
等同于:
$("*:[title]")
而"选择"功能的选择器则不会有默认的范围, 因为作用是"选择"而不是"过滤".
3.判断选择的对象存不存在不能通过if(null!=$(""))来判断只能通过length 来判断。
因为jQuery在获得对象的时候，无论要获得的对象是否存在，都会返回jQuery对象。
所以，以往的 js 判断是否存在在jQuery是行不通的。
假设有如下代码。
var target_obj = jQuery('#target_obj_id');
则，若需要判断id为target_obj_id是否存在的话，可以实现的方法有一下两种：
3.1
if (target_obj.length > 0) { //如果大于0 标识 id 为target_obj_id的对象存在，否则不存在
//对象存在的处理逻辑
} else {
//对象不存在的处理逻辑
}
3.2
if (target_obj[0]) {
//对象存在的处理逻辑
} else {
//对象不存在的处理逻辑
}
4.
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都可以一个冒号（：）开头。
除了属性过滤器不是以(:)打头。
留下来的问题：
最近写代码获取对象时发现通过$（"#id #id"）获取出现问题如下代码：
var appContainerConfirmDiv=$("#hostAndAppToConfirmDiv #appContainerConfirmDiv");
后来测试：$（"#id #id"）
方式没问题：
最下面def123 就是通过
$（"#id #id"）方式获取的。
js代码如下：
$(document).ready(function(){
$("#save").bind("click",function(){
var div=$("div div");
var div2=$("#div1 [type='checkbox']");
var div3=$("#div1 :[type='checkbox'] :checked");
var div4=$("#div1 :checked");
var divtext=$("div div").text();
$("#divShow").html(divtext);
$("#divShow1").html($("#div1 #div2").text());
$("#divShow2").html("#div1 [type='checkbox']:"+div2.length+" , #div1 [type='checkbox'] :checked"+div3.length+" , #div1 :checked"+div4.length);
});
});
html代码：
<body>
<body>
<div id="div1">
abc
<div id="div2">
<input type="checkbox" name="CheckboxGroup" value="复选框" id="CheckboxGroup_1">
<input type="checkbox" name="CheckboxGroup" value="复选框" id="CheckboxGroup_1">
def
<div id="div3">
123
</div>
</div>
</div>
<div id="divShow">
</div>
<div id="divShow1">
</div>
<div id="divShow2">
</div>
<input type="button" title="立即注册" value="保存" id="save" />
</body>
发现通过下面代码
var div3=$("#div1 :[type='checkbox'] :checked");
获取不到选中的复选框，不知是什么原因。这个在jquery 选择器实验室网页上也试过选择不到。这个疑问有待解决。
$("#div1 [type='checkbox']");和$("#div1 :checked"); 都能获取到。
按思路来讲应该可以的，也许我还有一些细节不知道，有知道原因的大侠tell。
1141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
