前言：
前面學(xué)習(xí)了JQuery的簡(jiǎn)單使用，今天進(jìn)一步學(xué)習(xí)一下JQuery的選擇器。
什么是選擇器？
JQuery選擇器通過標(biāo)簽名、屬性名或者內(nèi)容對(duì)DOM元素進(jìn)行快速準(zhǔn)確的選擇，而不必?fù)?dān)心瀏覽器的兼容性，通過JQuery選擇器對(duì)頁面元素精確定位，進(jìn)而方便完成處理元素屬性和行為事件。
選擇器的優(yōu)勢(shì)
與傳統(tǒng)的JavaScript獲取頁面元素和事務(wù)處理相比，JQuery具備以下幾個(gè)優(yōu)勢(shì)：
代碼比較簡(jiǎn)單
完善的檢測(cè)機(jī)制
1、）代碼更簡(jiǎn)單
在JQuery庫中封裝了大量可以通過選擇器直接調(diào)用的函數(shù)，使編程更加簡(jiǎn)單輕松，使用簡(jiǎn)單的代碼就可以使用相對(duì)復(fù)雜的功能。
2、）完善的檢測(cè)機(jī)制
傳統(tǒng)js設(shè)置頁面元素的事務(wù)的時(shí)候，先要找到頁面上的元素，然后在賦予相應(yīng)的屬性或事件，如果頁面元素不存在，則頁面會(huì)報(bào)錯(cuò)。所以要先判斷頁面元素是否存在。再進(jìn)行屬性或者事件操作。這樣會(huì)造成代碼繁瑣。在JQuery定義頁面元素的時(shí)候，無須考慮頁面中是否存在，即使頁面中不存在該元素也不會(huì)報(bào)錯(cuò)，極大的方便了代碼的執(zhí)行效率。
選擇器分類
大致分為下面四大類
基本選擇器
層次選擇器
過濾選擇器
表單選擇器
過濾選擇器又分為以下幾個(gè)小分類
簡(jiǎn)單過濾選擇器
內(nèi)容過濾選擇器
可見性過濾選擇器
屬性過濾選擇器
子元素過濾選擇器
表單對(duì)象屬性過濾選擇器
接下來挨個(gè)學(xué)習(xí)一下。
基礎(chǔ)選擇器
#id 根據(jù)Id匹配一個(gè)元素 返回的單個(gè)元素
.class 根據(jù)給定的類名匹配一個(gè)元素 返回的是元素集合
element 根據(jù)元素名匹配一個(gè)元素 返回的是元素集合
* 匹配所有元素 返回的是元素集合
selecttor1,selector2并集，返回兩個(gè)選擇器匹配到的元素 返回的是元素集合
寫個(gè)小例子學(xué)習(xí)一下
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
.firstDiv{
color: greenyellow;
font-size: 1em;
background-color:aliceblue;
}
#secondDiv{
color: blueviolet;
font-size: 1.5em;
}
p{
color: green;
font-size: 1em;
}
</style>
<script type="text/javascript">
$(function () { //ID匹配元素 $("#secondDiv").css("display","block"); //匹配類元素 $(".firstDiv").css("display","none"); //元素名匹配元素 $("div, p").css("display","block"); //合并匹配元素 $("#secondDiv, p").css("display","none"); //匹配所有元素 $("body *").css("display","block");
}); </script></head><body><div class="firstDiv">
第一層</div><div id="secondDiv">
第二層</div>
<p>
段落 </p></body></html>
層次選擇器
ancestor descendant 根據(jù)祖先匹配所有的后代元素 返回的是元素集合
parent>child 根據(jù)父元素匹配所有的子元素，直接后代 返回的是元素集合
prev+next 匹配下一個(gè)兄弟元素 相當(dāng)于next()方法 返回的是元素集合
prev~siblings 匹配后面的兄弟元素 相當(dāng)于nextAll()方法，siblings()方法為匹配所有的兄弟元素 返回的是元素集合
寫個(gè)小例子學(xué)習(xí)一下
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>層次選擇器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
#topDiv{
color: black;
background-color: aliceblue;
height: 45px;
display: flex;
display: -webkit-flex;
align-items: center;
}
div.leftDiv{
float: left;
overflow-x: auto;
}
ul#menu{
vertical-align: middle;
}
li{
color: black;
float:left;
overflow-x: auto;
margin-left: 2em;
margin-right: 2em;
vertical-align: middle;
}
div#content{
font-size: 1rem;
text-align: center;
text-shadow:khaki;
}
</style>
<script type="text/javascript">
$(function () { //匹配后代元素 $("#topDiv ul").css("display","none"); //匹配子元素 $("#topDiv > ul").css("display","block"); //匹配后面的元素 $("#topDiv + div").css("display","none");
$("#topDiv").next().css("display","none"); //匹配后面的所有相鄰元素 $("#topDiv ~div").css("display","block");
$("#topDiv").nextAll().css("display","none");
}); </script></head><body><div id="topDiv"><ul id="menu">
<li>首頁</li>
<li>商城</li>
<li>分類</li></ul></div>
<div>
<div class="leftDiv" align="left">
<h4 align="center">風(fēng)云</h4>
<div id="content">
金鱗豈是池中物，一遇風(fēng)云便化龍。<br>
九霄龍吟驚天變，風(fēng)云際會(huì)潛水游。<br>
</div>
</div>
<div>
<img src="../images/bg_post_activity_4.png">
</div>
</div><div>
<p>
我要成仙 </p></div></body></html>
簡(jiǎn)單過濾選擇器
:first或first() 匹配第一個(gè)元素 返回的單個(gè)元素
:last或last() 匹配最后一個(gè)元素 返回的單個(gè)元素
:not(selector) 匹配非selector能匹配到的元素 返回的是元素集合
:even 匹配索引值為偶數(shù)的元素，索引號(hào)從0開始 返回的是元素集合
:odd 匹配索引值為奇數(shù)的元素，索引號(hào)從0開始 返回的是元素集合
:eq(index) 匹配指定索引號(hào)的元素，索引號(hào)從0開始 返回的單個(gè)元素
:gt(index) 匹配索引號(hào)大于給定索引值的元素，索引號(hào)從0開始 返回的是元素集合
:lt(index) 匹配索引號(hào)小于給定索引值的元素，索引號(hào)從0開始 返回的是元素集合
:header 匹配所有的標(biāo)題元素 h1 h2 h3 h4 h5 h6 返回的是元素集合
:animated 匹配所有正在執(zhí)行動(dòng)畫的元素 返回的是元素集合
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>簡(jiǎn)單選擇過濾器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
li.firstLi {
color: saddlebrown;
}
li.lastLi {
color: red;
}
li.oddLi {
color: blueviolet;
font-size: 1em;
}
li.evenLi {
color: goldenrod;
font-size: 1em;
}
li.fiveLi {
color: blueviolet;
font-size: 2em;
}
</style>
<script type="text/javascript">
$(function () { //選中符合條件的第一個(gè)元素 $("#list > li:first").addClass("firstLi"); //選中符合條件的最后一個(gè)元素 $("#list > li:last").addClass("lastLi"); //符合條件但不能被selector選中的元素 $("#list > li:not('.secondLi')").addClass("lastLi"); //獲取指定索引值為奇數(shù)的元素(1、3、5、7、9......)，注意索引號(hào)是從1開始的 $("#list > li:odd").addClass("oddLi"); //獲取指定索引值為偶數(shù)的元素(0、2、4、6、8……)，注意索引號(hào)是從0開始的 $("#list > li:even").addClass("evenLi"); //選取指定索引值的元素，索引值從0開始 $("#list > li:eq(4)").addClass("fiveLi"); //獲取所有索引值大于index的元素，索引號(hào)從0開始 $("#list > li:gt(4)").addClass("fiveLi"); //獲取所有索引值小于index的元素，索引號(hào)從0開始 $("#list > li:lt(4)").addClass("evenLi");
}) </script></head><body><ol id="list">
<li>第1行</li>
<li id="secondLi">第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li>第6行</li>
<li>第7行</li>
<li>第8行</li></ol></body></html>
內(nèi)容過濾選擇器：
:contains(text) 匹配包含給定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配后代中含有selector能匹配上元素的元素
:parent 匹配含有子元素或者文本的元素
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>內(nèi)容過濾選擇器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
li.firstLi {
color: saddlebrown;
}
li.lastLi {
color: red;
}
li.oddLi {
color: blueviolet;
}
li.evenLi {
color: goldenrod;
}
li.fiveLi {
color: blueviolet;
}
</style>
<script type="text/javascript">
$(function () { //選中符合條件的第一個(gè)元素 $("#list > li:contains('第4行')").addClass("firstLi");
$("#list > li:empty").css("display", "none");
$("#list > li:has('b')").addClass("firstLi");
$("div:parent").css("display", "none");
}) </script></head><body><div>
<ol id="list">
<li>第1行</li>
<li id="secondLi">第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li><b>第6行</b></li>
<li></li>
<li>第7行</li>
<li>第8行</li>
</ol></div><div></div></body></html>
可見性過濾選擇器：
:hidden 匹配不可見元素，或者type="hidden"的元素 含有css樣式:display:"none";的元素，無論CSS是內(nèi)聯(lián)，導(dǎo)入，鏈接式
:visible 獲取所有的可見元素
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>可見性過濾選擇器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
li.oddLi {
color: blueviolet;
}
li.evenLi {
color: goldenrod;
}
</style>
<script type="text/javascript">
$(function () { //選中符合條件的第一個(gè)元素 $("#list > li:hidden").show();
$("#list > li:visible").addClass("firstLi");
}) </script></head><body><ol id="list">
<li>第1行</li>
<li style="display: none">第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li></ol></body></html>
屬性過濾選擇器：
[attribute] 匹配含有給定屬性的元素
[attribute=value] 匹配含有屬性=value的元素
[attribute!=value] 匹配含有屬性但!=value的元素
[attribute^=value] 匹配屬性值是以value開始的元素
[attribute$=value] 匹配屬性值是以value結(jié)束的元素
[attribute*=value] 匹配屬性值包含某些值的元素，部分前后，中間有也算
[selector][selector] 匹配屬性選擇器的交集
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>屬性過濾選擇器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
li.firstLi {
color: saddlebrown;
}
li.lastLi {
color: red;
}
li.oddLi {
color: blueviolet;
font-size: 1em;
}
li.evenLi {
color: goldenrod;
font-size: 1em;
}
</style>
<script type="text/javascript">
$(function () { //匹配所有含有id的元素 $("#list > li[id]").addClass("firstLi"); //選中id等于testLi的元素 $("#list > li[id='testLi']").addClass("lastLi"); //選中id不等于testLi的元素 $("#list > li[id!='testLi']").addClass("lastLi"); //選中id屬性以test開頭的元素 $("#list > li[id^='test']").addClass("oddLi"); //選中id屬性以Li2結(jié)尾的元素 $("#list > li[id$='Li2']").addClass("evenLi"); //選中id屬性包含Li的元素 $("#list > li:lt(4)[id*='Li']").addClass("oddLi");
}) </script></head><body><div>
<ol id="list">
<li>第1行</li>
<li id="testLi">第2行</li>
<li id="testLi1">第3行</li>
<li id="testLi2">第4行</li>
<li>第5行</li>
<li><b>第6行</b></li>
<li></li>
<li id="testLi3">第7行</li>
<li>第8行</li>
</ol></div></body></html>
http://www.cnblogs.com/whoislcj/p/6999128.html
