手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery 中多条件选择器,相对选择器,层次选择器的区别
jquery 中多条件选择器,相对选择器,层次选择器的区别
摘要:一、Jquery常用的过滤选择器如下所示:1、:first,选取第一个元素,比如$("div:first")选取第一个div元素2、:las...

一、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 中多条件选择器,相对选择器,层次选择器的区别】相关文章:

JQuery中属性过滤选择器用法

在HTML中插入JavaScript代码的示例

JQuery boxy插件在IE中边角图片不显示问题的解决

浅谈javascript的call()、apply()、bind()的用法

JQuery中层次选择器用法实例详解

jquery任意位置浮动固定层插件用法实例

jQuery切换所有复选框选中状态的方法

javascript搜索框效果实现方法

js去除字符串里中文与空格的例子

JQuery勾选指定name的复选框集合并显示的方法

精品推荐
分类导航