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

所属分类: 网络编程 / JavaScript 阅读数: 1693
收藏 0 赞 0 分享
一、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个元素分开 ,

层次选择器在一个“”内以空格区分
更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多