jquery 中多条件选择器,相对选择器,层次选择器的区别

更新时间：2012年07月03日 11:16:43 作者：

jquery 中多条件选择器,相对选择器,层次选择器的区别介绍，需要的朋友可以参考下

一、Jquery常用的过滤选择器如下所示：

1、:first，选取第一个元素，比如$("div:first")选取第一个div元素

2、:last，选取最后一个元素，比如$("div:last")选取最后一个div元素

3、:not(选择器)，选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素

4、：even/：odd，选取索引为偶数/奇数的元素，比如$("div:even"),选取索引号为偶数的所有div元素

5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号)，选取等于索引号/大于索引号/小于索引号的元素，比如$("div:lt(3)"),选取索引号小于3的所有div元素

注意：

过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础，即过滤的逐级性，比如

$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号，不要写成lt(4)

二，重点

多条件选择器
多条件选择器：$("p,div,span,menuitem"),同时选择p标签,div标签,和拥有menuitem样式的span标签元素
注意选择器表达式中的空格不能多不能少，易错！

相对选择器

只要在$()指定第二个参数，第二个参数为相对的元素。比如html代码如下

复制代码代码如下:

 
<table id="table1"> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
</table> 

那么可以用如下的js代码操作td的背景色
$("td", $(this)).css("background", "red"),这句代码用的就是相对选择器，选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素，没有涉及到其他行的td元素

复制代码代码如下:

 
<script type="text/javascript"> 
$(function () { 
$("#table1 tr").click(function () { 
$("td", $(this)).css("background", "red"); 
}); 
}); 
</script> 

层次选择器：
1 $("#div li")获取div下的所有li元素（后代，子，子的子....）
2 $("#div > li")获取div下的直接li子元素//注意空格
3 $(".menuitem + div")获取样式名为menuitem之后的第一个div元素，不常用。
3 $(".menuitem ~ div")获取样式名为menuitem之后的所有的div元素，不常用。

细节区别在于（易错点）：
多条件选择器：$("p,div,span,menuitem"),相对选择器：$("td", $(this)).css("background", "red")",层次选择器：$("#div li")获取div下的所有li元素（后代，子，子的子....）

三者的区别是：

多条件选择器：在一个“”内有逗号区分，

相对选择器：2个元素分开，

层次选择器在一个“”内以空格区分

您可能感兴趣的文章:

jQuery中scrollTop()方法用法实例
这篇文章主要介绍了jQuery中scrollTop()方法用法,实例分析了scrollTop()方法的功能、定义及返回或设置匹配元素的滚动条的垂直偏移量时的使用技巧,需要的朋友可以参考下
2015-01-01
jquery获取form表单input元素值的简单实例
下面小编就为大家带来一篇jquery获取form表单input元素值的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
jquery easyui DataGrid简单示例
本篇文章主要介绍了jquery easyui DataGrid简单示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
基于jquery的button默认enter事件(回车事件)。
这里我介绍一下，button按钮默认回车（enter）事件。如果大家可以用submit，就不用看以下代码，因为submit可以直接默认回车事件（enter）
2011-05-05
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
这篇文章主要介绍了jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法,结合实例形式分析了jQuery.eraser.js插件的功能、使用方法与相关注意事项,并附带eraser.js插件源码供读者下载使用,需要的朋友可以参考下
2017-04-04
jQuery EasyUI封装简化操作
这篇文章主要为大家详细介绍了Jquery EasyUI封装简化操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
利用jQuery中的ajax分页实现代码
这篇文章主要介绍了利用jQuery中的ajax分页实现代码的相关资料，对ajax分页感兴趣的朋友可以参考一下
2016-02-02
完美兼容各大浏览器的jQuery插件实现图片切换特效
网友zoeDylan写的原创jquery插件，实现了图片轮播功能，jquery插件名称为zoeDylan.ImgChange，图片路径、跳转链接、提示标题都是有动态数组来配置，jquery插件可灵活配置6个参数， height高、width宽、mgs图片地址、links点击地址、tips图片说明、timers自动切换时间，
2014-12-12
jQuery ajax cache缓存问题
在jquery里面，大部分的时候，属性要用''引起来。否则容易变成变量名。比如red，引不引都差不多。但是引起来也可以认。所以习惯就全部引起来好了。
2010-07-07
为指定的元素添加遮罩层的示例代码
遮罩在某些情况下还是比较实用的，下面为大家介绍下如何为指定的元素添加遮罩层，感兴趣的朋友可以了解下
2014-01-01