jquery選擇器之層次選擇器
阿新 • • 發佈：2019-01-09
層次選擇器中包括：
1、ancestor descendant 使用"form input"的形式選中form中的所有input元素.即ancestor(祖先)為from, descendant(子孫)為input.
例：$("bgRed div") 選擇css類為bgRed的元素中的搜有<div>元素。
2、parent > child 選擇parent的直接子節點chid。child必須包含在parent中並且父類是parent元素。
例：$(".myList>li")選擇css類為myList元素中的直接子節點<li>物件。
3、prev + next prev和next是兩個同級別的元素。選中在prev元素後面的next元素。
例：$("#hibidcus+img")選在id為hibiscus元素後面的img影象
4、prev ~ siblings 選擇prev後面的根據sibilngs過濾的元素（siblings是過濾器）
例：$("#someDiv~[title]")選擇id為someDiv的物件後面所有帶有title屬性的元素
層次選擇器網頁例項，（參考）：
1、ancestor descendant 使用"form input"的形式選中form中的所有input元素.即ancestor(祖先)為from, descendant(子孫)為input.
例：$("bgRed div") 選擇css類為bgRed的元素中的搜有<div>元素。
2、parent > child 選擇parent的直接子節點chid。child必須包含在parent中並且父類是parent元素。
例：$(".myList>li")選擇css類為myList元素中的直接子節點<li>物件。
3、prev + next prev和next是兩個同級別的元素。選中在prev元素後面的next元素。
例：$("#hibidcus+img")選在id為hibiscus元素後面的img影象
4、prev ~ siblings 選擇prev後面的根據sibilngs過濾的元素（siblings是過濾器）
例：$("#someDiv~[title]")選擇id為someDiv的物件後面所有帶有title屬性的元素
層次選擇器網頁例項，（參考）：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>例項</title> <!--請自己連線js檔案--> <script language="javascript" src="jquery.1.8.0.js"></script> <script type="text/javascript"> $(function(){ $("#bt1").click(function(){ $("div > p").text("我們都是div中的兒子，我們的名字叫做p還記得教程中的$(\"父親 > 兒子 > ...\")這種關係嗎？就是以這種方式選擇的我$(\"div > p\")"); }) $("#bt2").click(function(){ $("div + p").text("我是緊跟著div的p既然緊跟著，當然就得使用“+”緊密的連在一起嘛。以這種方式選擇的我$(\"div + p\")"); }) $("#bt3").click(function(){ $("div ~ p").text("我們是div的跟隨者，我們的名字叫做p要以這種方式選擇的我$(\"div ~ p\")"); }) }) </script> </head> <body> <input id="bt1" type="button" value="獲取div下所有的p標籤"/> <input id="bt2" type="button" value="匹配緊跟在 div 元素後的 p 一個元素"/> <input id="bt3" type="button" value="匹配跟在 div 元素後的所有 p 元素"/> <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> <p>5</p> <p>6</p> <p>7</p> <p>8</p> </body> </html>