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元素

代码如下:

层次选择器：
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个元素分开，

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

转载于:https://www.cnblogs.com/lcyuhe/p/5165699.html

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

Jquery第一章基础、过滤、层次选择器第二节1/2
1. 基础选择器 Basics 1.根据标签名进行选择 var input_query=$("input"); 2.根据id值选取 var text11_query=$(" ...
html 层次选择器,5.CSS层次选择器-CSS进阶
五.CSS选择器选择器,就是用一种方式把我们想要的那一个标签选中.把它选中了,你才能操作这个标签的CSS样式. CSS中有很多把你所需要的标签选中的方式,这些不同的方式就是不同的选择器. 在2.CS ...
jQuery中append()、prepend()与after()、before()的区别
原文地址:https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append().prepend()和 after().be ...
Jquery中的parent()与parents()取父元素的区别
关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合. parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可 ...
html load方法的区别,jQuery 中的.load()、$get()、$,post()用法和区别
.load()方法是局部方法,因为他需要一个包含元素的jQuery 对象作为前缀.而$.get()和$.post()是全局方法,无须指定某个元素.对于用途而言,.load()适合做静态文件的异步获取, ...
JQuery中2个等号与3个等号的区别
首先,== equality 等同,=== identity 恒等. ==, 两边值类型不同的时候,要先进行类型转换,再比较. ===,不做类型转换,类型不同的一定不等. 下面分别说明: 先说 === ...
jquery中append、prepend, before和after方法的区别
1. append()和prepend() 假设 <div class='a'> //<---you want div c to append in this<div clas ...
jquery中attr和prop以及removeAttr和removeProp的区别
结论:attr和prop都可以获取自定义对象的属性值,区别是attr能获取标签元素自定义属性,prop无法获取,返回undefined,它只能获取标签自带属性. removeAttr标签上的属性都可以 ...
html层次选择器例题,详解强大的jQuery选择器之基本选择器、层次选择器
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器.另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件, ...

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

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

最新文章

热门文章