jQuery 基本選擇器&層次選擇器
作者：曾慶林
jQuery選擇器的優勢
- 寫法簡單
- 支持CSS1至CSS3選擇器
- 完善的處理機制
CSS選擇器回顧
| 選擇器 | 語法 |
|---|---|
| ID選擇器 | #ID{CSS規則} |
| 類選擇器 | .className{CSS規則} |
| 分組選擇器 | E1,E2,E3{CSS規則} |
| 包含選擇器 | E F{CSS規則} |
| 通配符選擇器 | *{CSS規則} |
jQuery選擇器的分類
- 基本選擇器
- 層次選擇器
- 過濾選擇器
- 基本過濾選擇器
- 內容過濾選擇器
- 可見性過濾選擇器
- 屬性過濾選擇器
- 子元素過濾選擇器
- 表單物件屬性過濾選擇器
- 表單選擇器
jQuery基本選擇器
| 選擇器 1 | 描述 | 回傳 | 示例 |
|---|---|---|---|
| #id | 根據指定的id匹配元素 | 單個元素 | $(“#hel”)選擇id=hel的元素 |
| .class | 根據類匹配元素 | 集合元素 | $(“.hel”)選擇class=hel的元素 |
| Element | 根據元素名匹配元素 | 集合元素 | $(“div”)選擇所有的div元素 |
| * | 匹配所有元素 | 集合元素 | $(“*”)選擇所有元素 |
| E1,E2,E3 | 分組匹配元素 | 集合元素 | $(“div,span,.hotclass”)選擇所有div，span,和class為hotcalss的元素 |
層次選中器
| 選擇器 | 描述 | 回傳值 | 示例 |
|---|---|---|---|
| $(“E1 E2”) | 選擇E1下所有E2 | 集合元素 | $“div span”)選擇div下所有span |
| $(“E1> E2”) | 選擇E1下的子E2,不包含E2下滿足的元素 | 集合元素 | $("div > span”)選擇div下的span元素，不包含span下的span元素 |
| $(“E1+ E2”) | 選擇E1后緊相鄰的E2 | 集合元素 | $(".one + div")選擇class=one的下一個div元素 |
| $(“E1~ E2”) | 選擇E1之后的所有E2 | 集合元素 | $("#one ~ div")選擇id為one后的所有div元素 |
補充說明：
(
"
E
1
+
E
2
"
)
可
以
用
("E1 + E2")可以用
("E1+E2")可以用(E1).next(E2)代替
(
"
E
1
E
2
"
)
可
以
用
("E1 ~ E2")可以用
("E1 E2")可以用(E1).nextAll(E2)代替
jQuery 過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出需要的DOM元素，過濾規則與CSS中的偽類選擇器語法相同，即過濾選擇器都是以冒號:開頭，
過濾選擇器分類：
- 基本過濾選擇器
- 內容過濾選擇器
- 可見性過濾選擇器
- 屬性過濾選擇器
- 子元素過濾選擇器
- 表單物件屬性過濾選擇器
基本過濾選擇器
| 選擇器 | 描述 | 回傳 | 示例 |
|---|---|---|---|
| :first | 選擇第1個元素 | 單個元素 | $(“div:first”)選擇第1個div元素 |
| :last | 選擇最后1個元素 | 單個元素 | $(“div:last”)選擇最后1個div元素 |
| :not(E1) | 去除所有E1選擇器匹配的元素 | 集合元素 | $(“input:not(.my)”)選擇class不是.my的所有input元素 |
| :even | 選擇索引是偶數的所有元素，索引從0開始 | 集合元素 | $(“tr:even”)選擇表格中所有偶數的行 |
:odd | 選擇索引是奇數的所有元素，索引從0開始 | 集合元素 | $(“tr:odd”)選擇表格中所有奇數的行 |
| :eq(index) | 選擇索引值是index的元素，index從0開始 | 單個元素 | $(“tr:eq(1)”)選擇表格行索引等于1的行 |
| :gt(index) | 選擇索引值大于index的元素,index從0開始 | 集合元素 | $(“tr:gt(1) ”)選擇表格行索引大于1的行 |
| :lt(index) | 選擇索引值小于index的元素,index從0開始 | 集合元素 | $(“tr:lt(1)”)選擇表格行索引小于1的行 |
| :header | 所取所有的標題元素,h1~h6 | 集合元素 | $(“:header”)選擇網頁中所有的,… |
| :animated | 選擇當前正在執行影片的所有元素 | 集合元素 | $(“div:animated”)選擇正在執行影片的div元素 |
內容過濾選擇器
| 選擇器 | 描述 | 回傳值 | 示例 |
|---|---|---|---|
| :contains(text) | 選擇含有text文本內容的元素 | 集合元素 | $(“div:contains(‘我’)”)選擇內容里包含我的所有div |
| :empty | 選擇不包含子元素或文本的空元素 | 集合元素 | $(“div:empty”)選擇不包含子元素（含文本）的所有div元素 |
| :has(E1) | 選擇包含有(E1選擇器匹配的元素)的所有元素 | 集合元素 | $(“div:has§”)選擇含有p元素的所有div元素 |
| :parent | 選擇含有子元素或文本的元素 | 集合元素 | $(“div:parent”)選擇擁有子元素（包含文本）的所有div元素 |
可見性過濾選擇器
| 選擇器 | 描述 | 回傳值 | 示例 |
|---|---|---|---|
| :hidden | 選擇所有不可見元素 | 集合元素 | $(“:hidden”)選擇所有不可見元素，包括：,
和
等，如果只選擇元素，則可以使用 $(“input:hidden”)
|
| :visible | 選擇所有可見元素 | 集合元素 | $(“div:visible”)選取所有可見的div元素 |
案例-tab切換 可見過濾
思路
單擊第幾個，顯示第幾個，以前顯示的隱藏
html結構
<div id="tab1" class="tabs">
<ul>
<li class="tab-title active">li1</li>
<li class="tab-title">li2</li>
<li class="tab-title">li3</li>
</ul>
<div class="tab-content" style="display: block;">內容1</div>
<div class="tab-content" >內容2</div>
<div class="tab-content">內容3</div>
</div>
css 部分
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
ul {
list-style: none;
}
.tabs .tab-title {
height: 35px;
line-height: 35px;
border: 1px solid #aaa;
padding-left: 15px;
padding-right: 15px;
float: left;
margin-right: 15px;
position: relative;
z-index: 10;
}
.tabs .active{border-bottom-color:#fff; color: #F80;}
.tabs .tab-content {
clear: both;
border: 1px solid #aaa;
padding: 25px;
width: 450px;
height: 300px;
display: none;
position: relative;
top: -1px;
z-index: 0;
}
#tab2 .tab-content{width: 800px;}
js寫法
//[1] 單擊第幾個，顯示第幾個，以前顯示的隱藏
$(function(){
$(".tab-title").click(function(){
//以前顯示的現在隱藏
$(".tab-content:visible").hide();
// 求出是第幾個
var num=$(".tab-title").index($(this));
$(".tab-content:eq("+num+")").show();
//之前有.active li 去掉active
//當前li 添加actvie
$(".active").removeClass("active");
$(this).addClass("active");
})
})
完整的示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jquery選擇器</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
ul {
list-style: none;
}
.tabs .tab-title {
height: 35px;
line-height: 35px;
border: 1px solid #aaa;
padding-left: 15px;
padding-right: 15px;
float: left;
margin-right: 15px;
position: relative;
z-index: 10;
}
.tabs .active{border-bottom-color:#fff; color: #F80;}
.tabs .tab-content {
clear: both;
border: 1px solid #aaa;
padding: 25px;
width: 450px;
height: 300px;
display: none;
position: relative;
top: -1px;
z-index: 0;
}
#tab2 .tab-content{width: 800px;}
</style>
</head>
<body>
<div id="tab1" class="tabs">
<ul>
<li class="tab-title active">li1</li>
<li class="tab-title">li2</li>
<li class="tab-title">li3</li>
</ul>
<div class="tab-content" style="display: block;">內容1</div>
<div class="tab-content" >內容2</div>
<div class="tab-content">內容3</div>
</div>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
//[1] 單擊第幾個，顯示第幾個，以前顯示的隱藏
$(function(){
$(".tab-title").click(function(){
//以前顯示的現在隱藏
$(".tab-content:visible").hide();
// 求出是第幾個
var num=$(".tab-title").index($(this));
$(".tab-content:eq("+num+")").show();
//之前有.active li 去掉active
//當前li 添加actvie
$(".active").removeClass("active");
$(this).addClass("active");
})
})
</script>
</body>
</html>
jquery過濾選擇器-屬性
屬性過濾選擇器
| 選擇器 | 描述 | 回傳 | 示例 |
|---|---|---|---|
| [attribute] | 選擇擁有此屬性的元素 | 集合元素 | $(“div[id]”)選擇擁有id屬性的div元素 |
| [attribute=value] | 選擇屬性值為value的元素 | 集合元素 | $(“div[id=test]”)選擇id屬性值為test的div元素 |
| [attribute!=value] | 選擇屬性值不為value的元素 | 集合元素 | $(“div[id!=test]”)選擇id屬性值不為test的div元素,沒有id屬性的div也會被選擇 |
| [attribute^=value] | 選擇屬性值以value開始的元素 | 集合元素 | $(“div[id^=test]”)選擇id屬性值以test開始的所有div元素 |
| [attribute$=value] | 選擇屬性以value值結束的元素 | 集合元素 | ( “ d i v [ i d (“div[id (“div[id=test]”)選擇id屬性值以test結束的所有div元素 |
| [attribute*=value] | 選擇屬性中含有value的元素 | 集合元素 | $(“div[id*=test]”)選擇id屬性值中含有test的所有div元素 |
| [A1][A2]…A[N] | 用屬性選 | 擇器合并成一個復合屬性選擇器，滿足多個條件， | 集合元素 |
案例根據不同的 a鏈接添加不同的圖示背景
html
<h3>jquery 屬性過慮資料下載</h3>
<ul>
<li><a href="./課件" target="_blank" > 課件</a></li>
<li><a href="精通JavaScript.pdf" target="_blank"> 參考書</a></li>
<li><a href="課件/第二章jQuery選擇器.pptx" target="_blank">第二章jQuery選擇器</a></li>
<li><a href="filter.txt" target="_blank" >選擇器總結</a></li>
<li><a href="filter.html" target="_blank" >案例1</a></li>
<li><a href="taotest2.html" target="_blank">案例2</a></li>
</ul>
js
$(function(){
$("a[href$=html]").addClass("html");
$("a[href$=txt]").addClass("txt");
$("a[href^=./]").addClass("fl");
})
css
ul,li,a{
margin:0; padding:0;
list-style:none;
text-decoration:none;
color:#444;}
a:visited{color:#444;
}
a:hover{ color:#000;}
li{
height:30px;
line-height:30px;
border-bottom:1px dashed #444;
width:200px;
}
li a{
display:block;
height:30px;
line-height:30px;
padding-left:25px;
background-image:url(pkg_comm_z527307bd.png); background-repeat:no-repeat;
}
.pdf{ background-position:0 -2px;}
.fl{ background-position:0 -255px;}
.pptx{ background-position:0 -440px;}
.txt{ background-position:0 -160px;}
.html{background-position:0 -347px;}
過濾選擇器-子元素過濾
作者：曾慶林
| 選擇器 | 描述 | 回傳 | 示例 |
|---|---|---|---|
| :nth-child(index/even/odd/equation) | 選取每個父元素下的第index個子元素或奇偶元素.(index從1開始） | 集合元素 | :eq(index)只匹配一個元素,而:nth-child(index)將為每一個父元素匹配子元素,并且:nth-child(index)的index從1開始,而:eq(index)的index從0開始. |
| :first-child | 選擇每個父元素的第1個子元素 | 集合元 | :first只選擇單個元素,而:first-child將為每個父元素匹配第1個子元素如:$(“ul li:first-child”)選擇每個ul下的第一個 |
| :last-child | 選取每個父元素的最后1個子元素 | 集合元素 | $(“ul li:last-child”)選擇每個ul下的最后一個 |
:only-child | 如果某個元素是它父元素中惟一的子元素,那么將會被匹配.如果父元素中含有其他元素,則不會被匹配 | 集合元素 | $(“ul li:only-child”)在
|
:nth-child()選擇器詳細功能描述:
:nth-child(even) 能選擇每個父元素下的索引值是偶數的元素
:nth-child(odd) 選擇出每個父元素下的索引值是奇數的元素
:nth-child(2) 選取每個父元素下的索引值等于2的元素
:nth-child(3n) 能選出每個父元素下的索引值是3的倍數的元素,n從0開始
:nth-child(3n+1) 能選取每個父元素下的索引值是3n+1的元素.n從0開始
表單物件屬性過濾選擇器
| 選擇器 | 描述 | 回傳 | 示例 |
|---|---|---|---|
| :enabled | 選擇所有可用元素 | 集合元素 | $(“#form1 :enabled”)選取id為form1的表單內的所有可用元素 |
| :disabled | 選擇所有不可用元素 | 集合元素 | $(“#form1 :disabled”)選取id為form1的表單內所有不可用元素 |
| :checked | 選擇愾有被選中的元素(單選框,復選框) | 集合元素 | $("input:checked")選擇所有被選中的<input元素> |
:selected | 選擇所有被選中的選項元素(下拉串列) | 集合元素 | $("select :selected")選取所有被選中的選項元素 |
jquery 表單選擇器
表單選擇器
| 選擇器 | 描述 | 回傳 | 示例 |
|---|---|---|---|
| :input | 匹配所有 元素 集合元素 | $(“:input”) 同描述 | |
| :text | 選擇所有單行文本框 | 集合元素 | $(“:text”)匹配所有單行文本框 |
| :password | 選擇所有密碼框 | 集合元素 | $(“:password”) |
| :radio | 選擇所有單選框 | 集合元素 | $(“:radio”) |
| :checkbox | 選擇所有復選框 | 集合元素 | $(“:checkbox”) |
:submit | 匹配所有提交按鈕 | 集合元素 | $(“:submit”) |
| :image | 匹配所有影像按鈕 | 集合元素 | $(“:image”) |
| :reset | 匹配所有重置按鈕 | 集合元素 | $(“:reset”) |
| :button | 匹配所有按鈕 | 集合元素 | $(“:button”) |
| :file | 匹配所有檔案域 | 集合元素 | $(“:file”) |
| :hidden | 匹配所有不可見元素 | 集合元素 | $(“:hidden”) |
選擇器中的一些注意事項
選擇器中包含空格
選擇器中的空格是不容忽視的，多一個空格或少一個空格會得到截然不同的結果.
如:
$(“div:input”)
和
$(“div :input”)
jQuery中的方法初探
| 方法 | 功能描述 |
|---|---|
| show() | 顯示隱藏的匹配元素，可帶整數引數表示時間，單位是毫秒 |
| hide() | 隱藏顯示的匹配元素，可帶整數引數表示時間，單位是毫秒 |
| css(name,value) | 給匹配的元素設定css樣式 |
| text(string) | 獲取或設定匹配元素的文本內容,不包含html標簽 |
| filter(expr) | 篩選出與指定運算式匹配的元素集合，其中expr可以是多個選擇器的組合， |
| addClass(class) | 為匹配的元素增加一個 類樣式 |
| removeClass(class) | 為匹配的元素移除一個類樣式 |
| html() | 獲取或設定匹配元素的內容，包含html標簽 |
| siblings() | $(“.abc”).siblings()匹配得到class=abc的其它兄弟元素 |
IT入門 感謝關注
練習地址： www.520mg.com/it
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/97786.html
標籤：其他
上一篇：React學習（三）：JSX簡介