jquery常用幾種選擇器的實例用法區別-js教程-PHP中文網

首頁

web前端

js教程

jquery常用幾種選擇器的實例用法區別

伊谢尔伦

Jun 19, 2017 pm 01:58 PM

jquery幾種實例常用選擇器

一、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>

以上是jquery常用幾種選擇器的實例用法區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。