溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
JQuery選擇器通過標簽名、屬性名或者內容對DOM元素進行快速準確的選擇，而不必擔心瀏覽器的兼容性，通過JQuery選擇器對頁面元素精確定位，進而方便完成處理元素屬性和行為事件。
與傳統的JavaScript獲取頁面元素和事務處理相比，JQuery具備以下幾個優勢：
代碼比較簡單
完善的檢測機制
在JQuery庫中封裝了大量可以通過選擇器直接調用的函數，使編程更加簡單輕松，使用簡單的代碼就可以使用相對復雜的功能。
傳統js設置頁面元素的事務的時候，先要找到頁面上的元素，然后在賦予相應的屬性或事件，如果頁面元素不存在，則頁面會報錯。所以要先判斷頁面元素是否存在。再進行屬性或者事件操作。這樣會造成代碼繁瑣。在JQuery定義頁面元素的時候，無須考慮頁面中是否存在，即使頁面中不存在該元素也不會報錯，極大的方便了代碼的執行效率。
大致分為下面四大類
基本選擇器
層次選擇器
過濾選擇器
表單選擇器
過濾選擇器又分為以下幾個小分類
簡單過濾選擇器
內容過濾選擇器
可見性過濾選擇器
屬性過濾選擇器
子元素過濾選擇器
表單對象屬性過濾選擇器
接下來挨個學習一下。
#id 根據Id匹配一個元素 返回的單個元素
.class 根據給定的類名匹配一個元素 返回的是元素集合
element 根據元素名匹配一個元素 返回的是元素集合
* 匹配所有元素 返回的是元素集合
selecttor1,selector2并集，返回兩個選擇器匹配到的元素 返回的是元素集合
寫個小例子學習一下
<!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 根據祖先匹配所有的后代元素 返回的是元素集合
parent>child 根據父元素匹配所有的子元素，直接后代 返回的是元素集合
prev+next 匹配下一個兄弟元素 相當于next()方法 返回的是元素集合
prev~siblings 匹配后面的兄弟元素 相當于nextAll()方法，siblings()方法為匹配所有的兄弟元素 返回的是元素集合
寫個小例子學習一下
<!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">
<h5 align="center">風云</h5>
<div id="content">
×××，一遇風云便化龍。<br>
九霄龍吟驚天變，風云際會潛水游。<br>
</div>
</div>
<div>
<img src="../p_w_picpaths/bg_post_activity_4.png">
</div>
</div><div>
<p>
我要成仙 </p></div></body></html>
:first或first() 匹配第一個元素 返回的單個元素
:last或last() 匹配最后一個元素 返回的單個元素
:not(selector) 匹配非selector能匹配到的元素 返回的是元素集合
:even 匹配索引值為偶數的元素，索引號從0開始 返回的是元素集合
:odd 匹配索引值為奇數的元素，索引號從0開始 返回的是元素集合
:eq(index) 匹配指定索引號的元素，索引號從0開始 返回的單個元素
:gt(index) 匹配索引號大于給定索引值的元素，索引號從0開始 返回的是元素集合
:lt(index) 匹配索引號小于給定索引值的元素，索引號從0開始 返回的是元素集合
:header 匹配所有的標題元素 h2 h3 h4 h5 h6 h7 返回的是元素集合
:animated 匹配所有正在執行動畫的元素 返回的是元素集合
<!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;
}
li.fiveLi {
color: blueviolet;
font-size: 2em;
}
</style>
<script type="text/javascript">
$(function () { //選中符合條件的第一個元素 $("#list > li:first").addClass("firstLi"); //選中符合條件的最后一個元素 $("#list > li:last").addClass("lastLi"); //符合條件但不能被selector選中的元素 $("#list > li:not('.secondLi')").addClass("lastLi"); //獲取指定索引值為奇數的元素(1、3、5、7、9......)，注意索引號是從1開始的 $("#list > li:odd").addClass("oddLi"); //獲取指定索引值為偶數的元素(0、2、4、6、8……)，注意索引號是從0開始的 $("#list > li:even").addClass("evenLi"); //選取指定索引值的元素，索引值從0開始 $("#list > li:eq(4)").addClass("fiveLi"); //獲取所有索引值大于index的元素，索引號從0開始 $("#list > li:gt(4)").addClass("fiveLi"); //獲取所有索引值小于index的元素，索引號從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>
內容過濾選擇器：
:contains(text) 匹配包含給定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配后代中含有selector能匹配上元素的元素
:parent 匹配含有子元素或者文本的元素
<!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;
}
li.evenLi {
color: goldenrod;
}
li.fiveLi {
color: blueviolet;
}
</style>
<script type="text/javascript">
$(function () { //選中符合條件的第一個元素 $("#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是內聯，導入，鏈接式
: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 () { //選中符合條件的第一個元素 $("#list > li:hidden").show();
$("#list > li:visible").addClass("firstLi");
}) </script></head><body><ol id="list">
<li>第1行</li>
<li >第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結束的元素
[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結尾的元素 $("#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>
子元素過濾選擇器：
:nth-child(eq|even|odd|index) 獲取所有父元素特定位置的子元素
:first 獲取所有父元素下的第一個子元素
:last 獲取所有父元素下最后一個子元素
:only-child 獲取所有父元素下唯一的一個元素
<!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 () { //選中li父元素第三個元素 $("li:nth-child(3)").addClass("lastLi"); //選中li父元素第一個元素 $("li:first-child").addClass("lastLi"); //選中li父元素最后一個元素 $("li:last-child").addClass("lastLi"); //選中li父元素只有一個元素的元素 $("li:only-child").addClass("lastLi");
}) </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>
表單對象屬性過濾選擇器：
:enabled 獲取表單中所有可用的元素
:disabled 獲取表單中所有不可用的元素
:checked 獲取表單張所有被選中的元素
:selected 獲取表單中所有被選中的option的元素
表單選擇器：
:input 獲取所有的表單元素<input開頭的，還有textarea select
:text 獲取所有的單行文本框 <input type="text" />
:password 獲取所有的密碼框元素 <input type="password" />
:radio 獲取所有的單選按鈕 <input type="radio" />
:checkbox 獲取所有的復選框 <input type="checkbox">
:submit 獲取所有的提交按鈕 <input type="submit" />
:p_w_picpath 獲取所有的圖像按鈕 <input type="p_w_picpath" />
:reset 獲取所有的重置按鈕 <input type="reset" />
:button 獲取所有的按鈕 <input type="button">
:file 獲取所有的文件上傳框 <input type="file" />
<!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">
.textColor {
color: blue;
}
</style>
<script type="text/javascript">
$(function () {
$("#form1 :text").addClass("textColor");
$("#form1 :radio").addClass("textColor");
$("#ageSelect").addClass("textColor");
}); </script></head><body><div>
<h5>表單選擇器</h5>
<form id="form1">
姓名： <input type="text" name="name"><br>
戶口：<input type="radio" name="home" value="town" checked>城鎮 <input type="radio" name="home" value=="country"> 農村<br>
年齡： <select name="age" id="ageSelect">
<option value="lt18">18歲以下 <option value="bt18and25">18-35歲 <option value="bt36and65">36-65歲 <option value="gt65">65歲以上 </select><br>
</form></div></body></html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
