jQuery|"~"同級選擇器

實例

選取 <div> 元素同級的所有 <p> 元素:

$("div ~ p")

定義和用法

("element ~ siblings") 選擇器選取指定元素 "element" 同級的所有元素。

比如:

$("div ~ p") - 選取 <div> 元素同級的所有 <p> 元素。

語法

("element ~ siblings")

參數
element 必需。任何有效的 jQuery 選擇器。
siblings 必需。規定 element 參數的同級。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div ~ p").css("background-color","yellow");
});
</script>
</head>
<body>

<h2>$("div ~ p") 會選取什么?</h2>

<p>這是一個 p 元素 (不會被選取)。</p>
<div style="border:1px solid black;padding:10px;">這是一個 div 元素</div>
<p>這是一個 p 元素</p>
<p>這是另外一個 p 元素</p>

<div style="border:1px solid black;padding:10px;">
<p>這個 p 元素在 div 內(不會被選取).</p></div>
<h2>這是一個標題</h2>
<p>這是一個 p 元素</p>

</body>
</html>
image.png
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 通過jQuery,您可以選取(查詢,query)HTML元素,并對它們執行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 671評論 0 3
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,202評論 0 1
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,379評論 0 2
  • 分享人:蔡永堅 1. 查看數據庫操作記錄 2. 彈窗問題 A頁面通過AlertPage彈出高為200px的B頁面,...
    胡諾閱讀 724評論 0 1
  • 在山的這邊海的那邊有一群程序猿 他們老實又靦腆 他們聰明又有錢 一天到晚坐在那里認真的改bug 餓了就吃一口方便面...
    Amosvison閱讀 371評論 1 2