Rumah > Artikel > hujung hadapan web > jquery常用几种选择器的实例用法区别

jquery常用几种选择器的实例用法区别

伊谢尔伦asal: 2017-06-19 13:58:091154semak imbas

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

1、:first，选取第一个元素，比如$("p:first")选取第一个p元素
2、:last，选取最后一个元素，比如$("p:last")选取最后一个p元素
3、:not(选择器)，选取不满足“选择器”条件的元素,比如$("p:not(.className)"),选取样式不是className的所有p元素
4、：even/：odd，选取索引为偶数/奇数的元素，比如$("p:even"),选取索引号为偶数的所有p元素
5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号)，选取等于索引号/大于索引号/小于索引号的元素，比如$("p:lt(3)"),选取索引号小于3的所有p元素
注意：
过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础，即过滤的逐级性，比如
$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号，不要写成lt(4)

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

2. 相对选择器
只要在$()指定第二个参数，第二个参数为相对的元素。比如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>

3. 层次选择器：
a $("#p li")获取p下的所有li元素（后代，子，子的子....）
b $("#p > li")获取p下的直接li子元素//注意空格
c $(".menuitem + p")获取样式名为menuitem之后的第一个p元素，不常用。
d $(".menuitem ~ p")获取样式名为menuitem之后的所有的p元素，不常用。
细节区别在于（易错点）：
多条件选择器：$("p,p,span,menuitem"),相对选择器：$("td", $(this)).css("background", "red")",层次选择器：$("#p li")获取p下的所有li元素（后代，子，子的子....）

三者的区别是：
1. 多条件选择器：在一个“”内有逗号区分，
2. 相对选择器：2个元素分开，
3. 层次选择器在一个“”内以空格区分

示例代码如下：

<style type="text/css">
  /*高亮显示*/
  .highlight{   
   background-color: gray
  }
 </style>

<body>
   <div>
      <p>Hello</p>
   </div>
   <div id="test">ID为test的DIV</div>
   <input type="checkbox" id="s1" name="football" value="足球" />足球
   <input type="checkbox" name="volleyball" value="排球" />排球
   <input type="checkbox" id="s3" name="basketball" value="篮球" />篮球
   <input type="checkbox" id="s4" name="other" value="其他" />其他
  </body>

Atas ialah kandungan terperinci jquery常用几种选择器的实例用法区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：使用jquery选择器获取父元素、子元素、同级元素的方法实例Artikel seterusnya：详细介绍jQuery select操作方法

Artikel berkaitan

Lihat lagi