寫(xiě)在前面
jQuery是一個(gè)快速、簡(jiǎn)潔的 JavaScript 框架，是繼Prototype之后又一個(gè)優(yōu)秀的 JavaScript 代碼庫(kù)。jQuery的設(shè)計(jì)宗旨是“WriteLess，DoMore”，即倡導(dǎo)寫(xiě)更少的代碼，做 更多的事情。jQuery封裝了 JavaScript 常用的功能代碼，提供一種簡(jiǎn)便的 JavaScript 設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫(huà)設(shè)計(jì)和Ajax交互。
目錄
??jQuery選擇器
??過(guò)濾器
??1.基本過(guò)濾器? ? ? ? ? ? ? ? ? ?
??2.內(nèi)容過(guò)濾器
??3.可見(jiàn)過(guò)濾器
??4.屬性過(guò)濾器
??5.子元素過(guò)濾器
??jQuery選擇器
??過(guò)濾器
過(guò)濾器主要是通過(guò)特定的過(guò)濾規(guī)則篩選出所需的DOM元素，該選擇器以冒號(hào)開(kāi)頭。按照不同的過(guò)濾規(guī)則，過(guò)濾器又可分為基本過(guò)濾器、內(nèi)容過(guò)濾器、可見(jiàn)性過(guò)濾器、屬性過(guò)濾器、子元素過(guò)濾器和表單對(duì)象屬性過(guò)濾器。
??1.基本過(guò)濾器? ? ? ? ? ? ? ? ? ?
| 選擇器 | 說(shuō)明 |
| :first? | 匹配找到的第一個(gè)元素 |
| :last? | 匹配找到的最后一個(gè)元素 |
| :not(selector)? | 去除所有與給定選擇器匹配的元素 |
| :even? | 匹配所有索引值為偶數(shù)的元素，例如$("tr:even") |
| :odd? | 匹配所有索引值為奇數(shù)的元素，例如$("tr:odd") |
| :eq(index) | 匹配一個(gè)給定索引值的元素 |
| :gt(index)? | 匹配所有大于給定索引值的元素 |
| :It(index)?? | 匹配所有小于給定索引值的元素 |
| :header? | 匹配所有標(biāo)題 |
| :animated? | 匹配所有正在執(zhí)行動(dòng)畫(huà)效果的元素 |
?? ?
? ?例如：
(1)改變class不為one的所有div的背景顏色。
$("div:not(.one)").css("background","red");
(2)改變索引為奇數(shù)的div的背景顏色。
$("div:odd").css("background","red");
(3)改變索引為偶數(shù)的div的背景顏色。
$("div:even").css("background","red");
(4)改變索引為大于某數(shù)的div的背景顏色。
$("div:gt(3)").css("background","red");
(5)改變索引為等于某數(shù)的div的背景顏色。
$("div:eq(3)").css("background","red");
(6)改變索引為小于某數(shù)的div。
$("div:lt(3)").css("background","red");
?
??2.內(nèi)容過(guò)濾器
| 選擇器 | 說(shuō)明 |
|---|---|
| :contains(text) | 匹配包含給定文本的元素 |
| :empty() | 匹配所有不包含子元素或者文本的空元素 |
| :has(selector) | 匹配含有選擇器所匹配的元素的元素 |
| :parent() | 匹配含有子元素或者文本的元素，與：empty()相反 |
?在例1中放置四個(gè)div塊，分別根據(jù)每個(gè)div塊的不同特點(diǎn)改變其背景顏色，在瀏覽器中的顯示結(jié)果如圖1所示，單擊“顯示效果”按鈕后，在瀏覽器中的顯示結(jié)果如圖2所示。
?
【例1】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery內(nèi)容過(guò)濾器</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(function(){
$('button'). click(function(){
//包含內(nèi)容為“ha"的div塊
$('div:contains(ha)').css('backgroundColor','green');
//不包含任何內(nèi)容的div塊
$('div:empty').css('backgroundColor','yellaw');
//包含有a標(biāo)簽的div塊
$('div:has(a)').css('backgroundColor','pink');
})
})
</script>
<style>
div{
width:300px;
height:50px;
border:1px solid red;
margin:5px;
}
</style>
</head>
<body>
<button>顯示效果</button>
<div>hahha</div>
<div>heihei</div>
<div></div>
<div><a href=" http://www.baidu.com ">content</a> </div>
</body>
</html>
?圖1 內(nèi)容過(guò)濾器? ? ? ? ? ? ? ? ? ? ??
?圖2 內(nèi)容過(guò)濾器改變屬性? ? ?
??3.可見(jiàn)過(guò)濾器
可見(jiàn)性過(guò)濾器可以根據(jù)元素的可見(jiàn)性進(jìn)行選擇，可見(jiàn)性過(guò)濾器包括“：hidden”和“:visible”。其中可見(jiàn)性過(guò)濾器“：hidden”不僅包含樣式屬性display為none的元素，也包含文本隱藏域(<input type="hidden">)和visible：hidden之類的元素；可見(jiàn)性過(guò)濾器“：visible”可以匹配所有可見(jiàn)的元素。
例2制作的頁(yè)面上有兩個(gè)按鈕，一個(gè)按鈕是改變可見(jiàn)性元素的背景顏色的屬性，另一個(gè)按鈕是利用jQuery的show()方法讓不可見(jiàn)元素顯示出來(lái)。
【例2】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery可見(jiàn)性過(guò)濾器</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
$("div:visible").css("background","red");
});
$("#b2").click(function(){
$("div:hidden").show(1000);
});
});
</script>
</head>
<body>
<h3>可見(jiàn)性過(guò)濾器.</h3>
<input type="button" value="改變可見(jiàn)div元素屬性" id="b1"/>
<input type="button" value="顯示不見(jiàn)元素屬性" id="b2"/>
<br/><br/>
<div id="one">
Hello World!
</div>
<div style="display:none;">
style的display為"none"的div
</div>
</body>
</html>
?圖3 可見(jiàn)性過(guò)濾器? ? ? ? ? ? ? ? ?
?圖4 改變屬性? ? ? ? ? ? ? ? ? ? ?
??4.屬性過(guò)濾器
屬性過(guò)濾器的過(guò)濾規(guī)則是通過(guò)元素的屬性來(lái)獲取相應(yīng)的元素。
| 選擇器 | 說(shuō)明 |
|---|---|
| [attribute] | 匹配包含給定屬性的元素 |
| [attribute=value] | 匹配給定屬性為特定值的元素 |
| [attribute!=value] | 匹配給定屬性不等于特定值的元素 |
| [attribute^=value] | 匹配給定屬性是以特定值開(kāi)頭的元素 |
| [attribute$=value] | 匹配給定屬性是以特定值結(jié)尾的元素 |
| [attribute*=value] | 匹配給定屬性包含特定值的元素 |
| [attributeFilterl][attributeFilter2][…] | 復(fù)合屬性選擇器，匹配屬性同時(shí)滿足多個(gè)條件的元素 |
例3在制作的頁(yè)面上選擇超鏈接中帶有title屬性的元素,修改這些元素的背景色、字體大小、下劃線等屬性。
【例3】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery屬性過(guò)濾器</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a[title]").css({"color":"#FF9600",
"font-size":"12px",
"text-decoration":"none"});
});
</script>
</head>
<body>
<a href="#" title="first">第一個(gè)包含title屬性的a元素</a><br/>
<a href="#">第一個(gè)不包含title屬性的a元素</a><br/>
<a href="#" title="second">第二個(gè)包含title屬性的a元素</a><br/>
<a href="#">第二個(gè)不包含title屬性的a元素</a><br/>
<a href="#" title="third">第三個(gè)包含title屬性的a元素</a>
</body>
</html>
??5.子元素過(guò)濾器
使用子元素過(guò)濾器可以根據(jù)某個(gè)元素的子元素對(duì)該元素進(jìn)行過(guò)濾。表4列出子元素過(guò)濾器及其說(shuō)明。
| 選擇器 | 說(shuō)明 |
|---|---|
| :first-child | 獲取第一個(gè)子元素 |
| :last-child | 獲取最后一個(gè)子元素 |
| :nth-child() | 通過(guò)相關(guān)指數(shù)獲取子元素 |
| :only-child | 獲取子元素唯一的元素 |
其中，nth-child()選擇器的說(shuō)明如下：
(1):nth-child(even/odd): 選取每個(gè)父元素下的索引值為偶(奇)數(shù)的元素。
(2):nth-child(2): 選取每個(gè)父元素下的索引值為2的元素。
(3):nth-child(3n): 選取每個(gè)父元素下的索引值是3的倍數(shù)的元素。
(4):nth-child(3n+1): 選取每個(gè)父元素下的索引值是3n+1的元素。
在例4制作的頁(yè)面上選擇偶數(shù)列表元素，讓其背景色發(fā)生改變，在瀏覽器的顯示結(jié)果如圖5所示。
【例4】
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery子元素過(guò)濾器</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul li:nth-child(even)").css("background-color","#FF9600");
});
</script>
</head>
<body>
<ul>
<li>音樂(lè)</li>
<li>羽毛球</li>
<li>足球</li>
<li>籃球</li>
</ul>
</body>
</html>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-434136.html
?注：本文通過(guò) CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引用jQuery，用戶可以不下載存放 jQuery。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-434136.html
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
到了這里，關(guān)于jQuery選擇器(二)（基本過(guò)濾器，內(nèi)容過(guò)濾器，可見(jiàn)過(guò)濾器）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
