jQuery選擇器用法介紹
更新時(shí)間：2022年05月04日 11:41:04 作者：.NET開(kāi)發(fā)菜鳥(niǎo)
這篇文章介紹了jQuery選擇器的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
jQuery選擇器類(lèi)似于CSS選擇器，用來(lái)選取網(wǎng)頁(yè)中的元素。例如：
$("h3").css("background-color","red");說(shuō)明：
- 獲取并設(shè)置網(wǎng)頁(yè)中所有<h3>元素的背景色。
- “h3”為選擇器語(yǔ)法，必須放在$()中。
- $("h3")返回jQuery對(duì)象。
一、jQuery選擇器
jQuery選擇器功能強(qiáng)大，種類(lèi)也很多，分類(lèi)如下：
1、類(lèi)CSS選擇器
- 基本選擇器
- 層次選擇器
- 屬性選擇器
2、過(guò)濾選擇器
- 基本過(guò)濾選擇器
- 可見(jiàn)性過(guò)濾選擇器
3、表單選擇器
4、內(nèi)容過(guò)濾器
二、基本選擇器
基本選擇器語(yǔ)法如下圖所示：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery基本選擇器示例</title>
<style>
#box{
background-color: #ffffff;
border: 2px solid #000000;
padding: 5px;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
// id選擇器
$("#btn").click(function(){
// 標(biāo)簽選擇器 選擇h3標(biāo)簽并將其添加背景顏色
$("h3").css("background-color","red");
// 類(lèi)選擇器 選取并設(shè)置所有class為title的元素的背景顏色
$(".title").css("background-color","#09F");
// id選擇器 選取并設(shè)置id為box的元素的背景顏色
$("#box").css("background-color","#09F");
// 并集選擇器 相當(dāng)于css中的群組選擇器 選取并設(shè)置所有的h2、dt、class為title
//的元素的背景色
$("h2,dt,.title").css("background-color","#09A");
// 交集選擇器 等同于CSS中的指定標(biāo)簽選擇器 選取并設(shè)置class為title的h3標(biāo)簽的背景色
$("h3.title").css("background-color","yellow");
// 全局選擇器 改變所有元素的字體顏色
$("*").css("color","blue");
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="顯示效果" />
<div id="box" style="margin-top:10px;">
id為box的div
<h2 class="title">class為title的h2標(biāo)簽</h2>
<h3 class="title">class為title的h3標(biāo)簽</h3>
<h3>熱門(mén)排行</h3>
<dl>
<dt><img src="qq.jpg" width="391" height="220" alt="斗地主" /></dt>
<dd class="title">斗地主</dd>
<dd>休閑游戲</dd>
<dd>QQ斗地主是國(guó)內(nèi)同時(shí)在線人數(shù)最多的棋牌游戲......</dd>
</dl>
</div>
</body>
</html>效果：
三、層次選擇器
層次選擇器通過(guò)DOM元素之間的層次關(guān)系來(lái)獲取元素，語(yǔ)法如下：
請(qǐng)看下面的示例
需求說(shuō)明：點(diǎn)擊標(biāo)題，使用層次選擇器選擇不同的元素使得其背景色為藍(lán)色，如下圖所示：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>層次選擇器演示示例</title>
<!--css樣式-->
<style>
*{
margin: 0px;
padding: 0px;
line-height: 30px;
}
body{
margin: 10px;
}
#menu{
border: 2px solid #0033cc;
padding: 10px;
}
a{
text-decoration: none;
margin-right: 5px;
}
span{
font-weight: bold;
padding: 3px;
}
h2{
margin: 10px;
cursor: pointer;/*鼠標(biāo)為手狀*/
}
</style>
<!--引入jQuery-->
<script src="jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 點(diǎn)擊h2標(biāo)題時(shí)改變背景色
$("h2").click(function(){
// 后代選擇器 獲取并設(shè)置#menu下的span元素的背景色
$("#menu span").css("background-color","blue");
// 子選擇器 獲取并設(shè)置#travel下的a元素的背景色
$("#travel>a").css("background-color","red");
// 相鄰選擇器 只會(huì)選擇第一個(gè)相鄰的元素
//獲取并設(shè)置#ticket下的第一個(gè)a元素的背景色
$("#ticket+a").css("background-color","red");
// 同輩選擇器 會(huì)選擇所有的元素
//獲取并設(shè)置#rest下的所有a元素的背景色
$("#rest~a").css("background-color","yellow");
});
});
</script>
</head>
<body>
<div id="menu">
<h2 title="點(diǎn)擊查看效果">全部旅游產(chǎn)品分類(lèi)</h2>
<dl>
<dt>北京周邊旅游<span>特價(jià)</span></dt>
<dd id="travel">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >按天數(shù)</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >海邊旅游</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >草原</a>
</dd>
</dl>
<dl>
<dt>景點(diǎn)門(mén)票</dt>
<dd >
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="ticket">名勝</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >暑期</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >樂(lè)園</a>
</dd>
<dd >
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="rest">山水</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >雙休</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >園林</a>
</dd>
</dl>
<span>更多分類(lèi)</span>
</div>
</body>
</html>效果：
四、屬性選擇器
屬性選擇器通過(guò)HTML元素的屬性來(lái)選擇元素。語(yǔ)法如下：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性選擇器演示示例</title>
<!--css樣式-->
<style>
#box{
background-color: #ffffff;
border: 2px solid #000000;
padding: 5px;
}
h2{
cursor: pointer;
}
</style>
<!--引入jQuery-->
<!--引入jQuery-->
<script src="jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
$("h2").click(function(){
// 改變含有title屬性的h2元素的背景顏色
$("h2[title]").css("background-color","blue");
// 改變含有class屬性為odds元素的背景顏色
$("[class='odds']").css("background-color","red");
// 改變含有class屬性不等于odds元素的字體顏色
//$("[class!=odd]").css("color","green");
// 改變含有title屬性以h開(kāi)頭的元素的字體顏色 區(qū)分大小寫(xiě)
$("[title^=h]").css("color","green");
// 改變含有title屬性以jp結(jié)尾的元素的字體顏色 區(qū)分大小寫(xiě)
$("[title$=jp]").css("color","yellow");
// 改變含有title屬性中含有s的元素的字體顏色 區(qū)分大小寫(xiě)
$("[title*=s]").css("color","pink");
// 改變含有class屬性并且title屬性中含有y的li元素的字體顏色 區(qū)分大小寫(xiě)
$("li[class][title*=y]").css("color","violet");
});
});
</script>
</head>
<body class="odd">
<div id="box" class="odd">
<h2 class="odd" title="cartoon-list">動(dòng)畫(huà)列表</h2>
<ul>
<li class="odds" title="kn_jp">名偵探柯南</li>
<li class="evens" title="hy_rz">火影忍者</li>
<li class="odds" title="ss_JP">死神</li>
<li class="evens" title="yj_jp">妖精的尾巴</li>
<li class="odds" title="yh_jp">銀魂</li>
<li class="evens" title="Hm_dS">黑貓警長(zhǎng)</li>
<li class="odds" title="xl_ds">仙履奇緣</li>
</ul>
</div>
</body>
</html>效果：
五、過(guò)濾選擇器
過(guò)濾選擇器通過(guò)特定的過(guò)濾規(guī)則來(lái)刷選元素。
語(yǔ)法特點(diǎn)是使用“：”，例如：
$("li:first")表示選取第一個(gè)li元素。
1、基本過(guò)濾選擇器
基本過(guò)濾選擇器可以選擇第一個(gè)元素、最后一個(gè)元素、索引為奇數(shù)或偶數(shù)的元素，語(yǔ)法如下：
基本過(guò)濾選擇器還可以根據(jù)索引的值選取元素
基本過(guò)濾選擇器還支持一些特殊的選擇方式
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本過(guò)濾選擇器</title>
<style>
h2{
cursor: pointer;
}
</style>
<!--引入jQuery-->
<script src="jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
$("h2").click(function(){
// 選取第一個(gè)li標(biāo)簽并設(shè)置背景色
//$("li:first").css("background-color","blue");
// 選取第一個(gè)li標(biāo)簽并設(shè)置背景色
//$("li:last").css("background-color","red");
// 選取偶數(shù)行的li標(biāo)簽并設(shè)置背景色
//$("li:even").css("background-color","green");
// 選取奇數(shù)行的li標(biāo)簽并設(shè)置背景色
//$("li:odd").css("background-color","pink");
// 改變索引值為1的li標(biāo)簽的背景色
//$("li:eq(1)").css("background-color","pink");
// 改變索引值大于4的li標(biāo)簽的背景色
//$("li:gt(4)").css("background-color","green");
// 改變索引值小于4的li標(biāo)簽的背景色
//$("li:lt(4)").css("background-color","red");
// 選取class不是three的元素并設(shè)置背景色
$("li:not(.three)").css("background-color","green");
// 選取所有標(biāo)題元素并設(shè)置背景色
$(":header").css("background-color","red");
});
$("input[type='text']").click(function(){
// 設(shè)置當(dāng)前獲取焦點(diǎn)的元素的背景色
$(":focus").css("background-color","yellow");
});
});
</script>
</head>
<body>
<h2>網(wǎng)絡(luò)小說(shuō)</h2>
<ul>
<li>王妃不好當(dāng)</li>
<li>致命交易</li>
<li class="three">珈藍(lán)寺</li>
<li>逆天至寵</li>
<li>交錯(cuò)時(shí)光的愛(ài)戀</li>
<li>張震講鬼故事</li>
<li>第一次親密接觸</li>
</ul>
<input type="text" value="Hello World" />
</body>
</html>結(jié)果：
2、可見(jiàn)性過(guò)濾選擇器
可見(jiàn)性過(guò)濾選擇器可以通過(guò)元素的顯示狀態(tài)來(lái)選取元素，語(yǔ)法如下：
例如：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>可見(jiàn)性元素選擇器演示示例</title>
<style>
p{
display: none;
}
</style>
<!--引入jQuery-->
<script src="jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
$("#show").click(function(){
$("p:hidden").show();
});
$("#hidden").click(function(){
$("p:visible").hide();
});
});
</script>
</head>
<body>
<input type="button" id="show" value="顯示" />
<input type="button" id="hidden" value="隱藏" />
<p>嗨，您好!</p>
</body>
</html>效果：
點(diǎn)擊顯示：
點(diǎn)擊隱藏：
3、內(nèi)容過(guò)濾器
內(nèi)容過(guò)濾器根據(jù)內(nèi)容來(lái)選取元素，語(yǔ)法如下：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>內(nèi)容過(guò)濾器演示示例</title>
<style>
.title{
background-color: gray;
}
</style>
<!--引入jQuery-->
<script src="jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 改變包含“運(yùn)動(dòng)鞋”的表格背景色設(shè)置為藍(lán)色
$("td:contains('運(yùn)動(dòng)鞋')").css("background-color","blue");
// 沒(méi)有內(nèi)容的單元格的背景色設(shè)置為紅色
$("td:empty").css("background-color","red");
// 包含鏈接的單元格的背景色設(shè)置為綠色
$("td:has('a')").css("background-color","green");
// 含有子節(jié)點(diǎn)或文本的表格的背景色設(shè)置為灰色
$("td:parent").css("background-color","gray");
});
</script>
</head>
<body>
<table>
<thead>
<tr class="title">
<th>序號(hào)</th>
<th>訂單號(hào)</th>
<th>商品名稱(chēng)</th>
<th>價(jià)格(元)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>10035900</td>
<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Nike透氣減震運(yùn)動(dòng)鞋</a></td>
<td>231.00</td>
</tr>
<tr>
<td>2</td>
<td>10036114</td>
<td>天美太陽(yáng)傘</td>
<td>51.00</td>
</tr>
<tr>
<td>3</td>
<td>10035110</td>
<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >萬(wàn)圣節(jié)兒童蜘蛛俠裝</a></td>
<td>31.00</td>
</tr>
<tr>
<td>4</td>
<td>10035120</td>
<td>匹克籃球運(yùn)動(dòng)鞋</td>
<td>231.00</td>
</tr>
<tr>
<td>5</td>
<td>10032900</td>
<td>jQuery權(quán)威指南</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>效果：
六、表單選擇器
表單選擇器根據(jù)不同類(lèi)型的表單元素進(jìn)行選取，語(yǔ)法如下：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表單選擇器演示示例</title>
<!--引入jQuery-->
<script src="jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 點(diǎn)擊提交按鈕，如果為空則設(shè)置邊框?yàn)榧t色
$(":submit").click(function(){
// 獲取用戶名
var username= $(":input[name='username']");
// 獲取密碼
var pwd= $(":password[name='pwd']");
// 獲取確認(rèn)密碼
var repwd= $(":password[name='repwd']");
// 獲取昵稱(chēng)
var nickname= $(":input[name='nickname']");
// 獲取已選的單選按鈕
var radio=$(":radio:checked");
// 獲取已選的復(fù)選框
var chk=$(":checkbox:checked")
// 獲取已選的下拉框
var sel=$(":selected");
redSet(username);
redSet(pwd);
redSet(repwd);
redSet(nickname);
redSet2(radio);
redSet3(chk);
redSet4(sel);
});
function redSet(obj){
if(obj.val()==""){
obj.css("border","1px solid red");
}else{
obj.css("border","1px solid yellow");
}
};
function redSet2(obj){
if(obj.length==0){
$(":radio").parent().css("border","1px solid red")
}else{
$(":radio").parent().css("border","1px solid yellow")
}
};
function redSet3(obj){
if(obj.length==0){
$(":checkbox").parent().css("border","1px solid red")
}else{
$(":checkbox").parent().css("border","1px solid yellow")
}
};
function redSet4(obj){
if(obj.val()==""){
$("select").css("border","1px solid red")
}else{
$("select").css("border","1px solid yellow")
}
};
});
</script>
</head>
<body>
<fieldset>
<legend>注冊(cè)表單</legend>
<form onsubmit="return false;">
<input type="hidden" name="pid" value="1" />
<p>
賬號(hào)：<input type="text" name="username" />
</p>
<p>
密碼：<input type="password" name="pwd" />
</p>
<p>
確認(rèn)密碼：<input type="password" name="repwd" />
</p>
<p>
昵稱(chēng)：<input type="text" name="nickname" />
</p>
<p>
性別:
<input type="radio" name="sex" value="1" id="man"><label for="man">男</label>
<input type="radio" name="sex" value="2" id="woman"><label for="woman">女</label>
</p>
<p>
愛(ài)好:
<input type="checkbox" name="hobby" value="籃球" id="basketball" /><label for="basketball">籃球</label>
<input type="checkbox" name="hobby" value="足球" id="football" /><label for="football">足球</label>
<input type="checkbox" name="hobby" value="羽毛球" id="badminton" /><label for="badminton">羽毛球</label>
<input type="checkbox" name="hobby" value="其他" id="other" /><label for="other">其他</label>
</p>
<p>
省份：
<select>
<option value="">--省份--</option>
<option value="北京">北京</option>
<option value="云南">云南</option>
<option value="河北">河北</option>
<option value="河南">河南</option>
</select>
</p>
<input type="submit" value="提交" />
</form>
</fieldset>
</body>
</html>效果：
七、補(bǔ)充
1、特殊符號(hào)的轉(zhuǎn)義
2、選擇器中的空格
到此這篇關(guān)于jQuery選擇器用法的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
眾所周知，Jquery是對(duì)JavaScript的一種高效的封裝，所以Jquery要操作的數(shù)組即是JavaScript中的數(shù)組，在 JavaScript中我們使用for以及for-in進(jìn)行數(shù)組的操作2011-08-08
【經(jīng)典源碼收藏】基于jQuery的項(xiàng)目常見(jiàn)函數(shù)封裝集合
這篇文章主要介紹了基于jQuery的項(xiàng)目常見(jiàn)函數(shù)封裝集合,總結(jié)分析 jQuery常見(jiàn)功能的函數(shù)封裝,便于在項(xiàng)目開(kāi)發(fā)中直接使用,需要的朋友可以參考下2016-06-06
jquery 無(wú)限級(jí)聯(lián)菜單案例分享
phpcms的地區(qū)級(jí)聯(lián)菜單，感覺(jué)寫(xiě)的挺有意思于是自己也實(shí)現(xiàn)了個(gè)，感興趣的各位路過(guò)的可以參考下哈，希望本例可以幫助到你2013-03-03
jQuery soColorPacker 網(wǎng)頁(yè)拾色器
這篇文章主要介紹了jQuery soColorPacker 網(wǎng)頁(yè)拾色器 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
Jquery網(wǎng)頁(yè)內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼
這篇文章主要介紹了Jquery網(wǎng)頁(yè)內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼,實(shí)現(xiàn)滑動(dòng)緩沖的方式實(shí)現(xiàn)頁(yè)內(nèi)導(dǎo)航，用戶體驗(yàn)大大提升需要的朋友可以參考下2015-04-04
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源。2011-06-06
Jquery中ajax方法data參數(shù)的用法小結(jié)
本篇文章主要是對(duì)Jquery中ajax方法data參數(shù)的用法進(jìn)行了總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
PHP結(jié)合jQuery實(shí)現(xiàn)的評(píng)論頂、踩功能
本文給大家分享的功能是這樣的：你點(diǎn)擊一下頂或踩按鈕，記錄數(shù)值到數(shù)據(jù)庫(kù)，并且有顏色的背景跟著變，按照百分比的變化。這樣就可以通過(guò)背景顏色一眼就看清楚那邊支持的人比較多。2015-07-07
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫(xiě)入效果
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫(xiě)入效果的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-08-08
jQuery插件MovingBoxes實(shí)現(xiàn)左右滑動(dòng)中間放大圖片效果
本篇文章主要介紹jQuery中MovingBoxes左右滑動(dòng)放大圖片插件示例，實(shí)現(xiàn)左右滑動(dòng)和放大效果，有興趣的可以了解一下。2017-02-02