<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
jQuery選擇器用法介紹
2022-03-10 19:00:17
jQuery選擇器類似於CSS選擇器，用來選取網頁中的元素。例如：
$("h3").css("background-color","red");說明：
- 獲取並設定網頁中所有<h3>元素的背景色。
- “h3”為選擇器語法，必須放在$()中。
- $("h3")返回jQuery物件。
一、jQuery選擇器
jQuery選擇器功能強大，種類也很多，分類如下：
1、類CSS選擇器
- 基本選擇器
- 層次選擇器
- 屬性選擇器
2、過濾選擇器
- 基本過濾選擇器
- 可見性過濾選擇器
3、表單選擇器
4、內容過濾器
二、基本選擇器
基本選擇器語法如下圖所示：
範例：
<!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(){
// 標籤選擇器 選擇h3標籤並將其新增背景顏色
$("h3").css("background-color","red");
// 類選擇器 選取並設定所有class為title的元素的背景顏色
$(".title").css("background-color","#09F");
// id選擇器 選取並設定id為box的元素的背景顏色
$("#box").css("background-color","#09F");
// 並集選擇器 相當於css中的群組選擇器 選取並設定所有的h2、dt、class為title
//的元素的背景色
$("h2,dt,.title").css("background-color","#09A");
// 交集選擇器 等同於CSS中的指定標籤選擇器 選取並設定class為title的h3標籤的背景色
$("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標籤</h2>
<h3 class="title">class為title的h3標籤</h3>
<h3>熱門排行</h3>
<dl>
<dt><img src="qq.jpg" width="391" height="220" alt="鬥地主" /></dt>
<dd class="title">鬥地主</dd>
<dd>休閒遊戲</dd>
<dd>QQ鬥地主是國內同時線上人數最多的棋牌遊戲......</dd>
</dl>
</div>
</body>
</html>效果：
三、層次選擇器
層次選擇器通過DOM元素之間的層次關係來獲取元素，語法如下：
請看下面的範例
需求說明：點選標題，使用層次選擇器選擇不同的元素使得其背景色為藍色，如下圖所示：
程式碼：
<!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;/*滑鼠為手狀*/
}
</style>
<!--引入jQuery-->
<script src="jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 點選h2標題時改變背景色
$("h2").click(function(){
// 後代選擇器 獲取並設定#menu下的span元素的背景色
$("#menu span").css("background-color","blue");
// 子選擇器 獲取並設定#travel下的a元素的背景色
$("#travel>a").css("background-color","red");
// 相鄰選擇器 只會選擇第一個相鄰的元素
//獲取並設定#ticket下的第一個a元素的背景色
$("#ticket+a").css("background-color","red");
// 同輩選擇器 會選擇所有的元素
//獲取並設定#rest下的所有a元素的背景色
$("#rest~a").css("background-color","yellow");
});
});
</script>
</head>
<body>
<div id="menu">
<h2 title="點選檢視效果">全部旅遊產品分類</h2>
<dl>
<dt>北京周邊旅遊<span>特價</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" >按天數</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>景點門票</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" >樂園</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>更多分類</span>
</div>
</body>
</html>效果：
四、屬性選擇器
屬性選擇器通過HTML元素的屬性來選擇元素。語法如下：
範例：
<!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開頭的元素的字型顏色 區分大小寫
$("[title^=h]").css("color","green");
// 改變含有title屬性以jp結尾的元素的字型顏色 區分大小寫
$("[title$=jp]").css("color","yellow");
// 改變含有title屬性中含有s的元素的字型顏色 區分大小寫
$("[title*=s]").css("color","pink");
// 改變含有class屬性並且title屬性中含有y的li元素的字型顏色 區分大小寫
$("li[class][title*=y]").css("color","violet");
});
});
</script>
</head>
<body class="odd">
<div id="box" class="odd">
<h2 class="odd" title="cartoon-list">動畫列表</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">黑貓警長</li>
<li class="odds" title="xl_ds">仙履奇緣</li>
</ul>
</div>
</body>
</html>效果：
五、過濾選擇器
過濾選擇器通過特定的過濾規則來刷選元素。
語法特點是使用“：”，例如：
$("li:first")表示選取第一個li元素。
1、基本過濾選擇器
基本過濾選擇器可以選擇第一個元素、最後一個元素、索引為奇數或偶數的元素，語法如下：
基本過濾選擇器還可以根據索引的值選取元素
基本過濾選擇器還支援一些特殊的選擇方式
範例：
<!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>
<style>
h2{
cursor: pointer;
}
</style>
<!--引入jQuery-->
<script src="jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
$("h2").click(function(){
// 選取第一個li標籤並設定背景色
//$("li:first").css("background-color","blue");
// 選取第一個li標籤並設定背景色
//$("li:last").css("background-color","red");
// 選取偶數行的li標籤並設定背景色
//$("li:even").css("background-color","green");
// 選取奇數行的li標籤並設定背景色
//$("li:odd").css("background-color","pink");
// 改變索引值為1的li標籤的背景色
//$("li:eq(1)").css("background-color","pink");
// 改變索引值大於4的li標籤的背景色
//$("li:gt(4)").css("background-color","green");
// 改變索引值小於4的li標籤的背景色
//$("li:lt(4)").css("background-color","red");
// 選取class不是three的元素並設定背景色
$("li:not(.three)").css("background-color","green");
// 選取所有標題元素並設定背景色
$(":header").css("background-color","red");
});
$("input[type='text']").click(function(){
// 設定當前獲取焦點的元素的背景色
$(":focus").css("background-color","yellow");
});
});
</script>
</head>
<body>
<h2>網路小說</h2>
<ul>
<li>王妃不好當</li>
<li>致命交易</li>
<li class="three">珈藍寺</li>
<li>逆天至寵</li>
<li>交錯時光的愛戀</li>
<li>張震講鬼故事</li>
<li>第一次親密接觸</li>
</ul>
<input type="text" value="Hello World" />
</body>
</html>結果：
2、可見性過濾選擇器
可見性過濾選擇器可以通過元素的顯示狀態來選取元素，語法如下：
例如：
範例：
<!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>
<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>效果：
點選顯示：
點選隱藏：
3、內容過濾器
內容過濾器根據內容來選取元素，語法如下：
範例：
<!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>
<style>
.title{
background-color: gray;
}
</style>
<!--引入jQuery-->
<script src="jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 改變包含「運動鞋」的表格背景色設定為藍色
$("td:contains('運動鞋')").css("background-color","blue");
// 沒有內容的單元格的背景色設定為紅色
$("td:empty").css("background-color","red");
// 包含連結的單元格的背景色設定為綠色
$("td:has('a')").css("background-color","green");
// 含有子節點或文字的表格的背景色設定為灰色
$("td:parent").css("background-color","gray");
});
</script>
</head>
<body>
<table>
<thead>
<tr class="title">
<th>序號</th>
<th>訂單號</th>
<th>商品名稱</th>
<th>價格(元)</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透氣減震運動鞋</a></td>
<td>231.00</td>
</tr>
<tr>
<td>2</td>
<td>10036114</td>
<td>天美太陽傘</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" >萬聖節兒童蜘蛛俠裝</a></td>
<td>31.00</td>
</tr>
<tr>
<td>4</td>
<td>10035120</td>
<td>匹克籃球運動鞋</td>
<td>231.00</td>
</tr>
<tr>
<td>5</td>
<td>10032900</td>
<td>jQuery權威指南</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>效果：
六、表單選擇器
表單選擇器根據不同型別的表單元素進行選取，語法如下：
範例：
<!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(){
// 點選提交按鈕，如果為空則設定邊框為紅色
$(":submit").click(function(){
// 獲取使用者名稱
var username= $(":input[name='username']");
// 獲取密碼
var pwd= $(":password[name='pwd']");
// 獲取確認密碼
var repwd= $(":password[name='repwd']");
// 獲取暱稱
var nickname= $(":input[name='nickname']");
// 獲取已選的無線電鈕
var radio=$(":radio:checked");
// 獲取已選的核取方塊
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>登入檔單</legend>
<form onsubmit="return false;">
<input type="hidden" name="pid" value="1" />
<p>
賬號：<input type="text" name="username" />
</p>
<p>
密碼：<input type="password" name="pwd" />
</p>
<p>
確認密碼：<input type="password" name="repwd" />
</p>
<p>
暱稱：<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>
愛好:
<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>效果：
七、補充
1、特殊符號的跳脫
2、選擇器中的空格
到此這篇關於jQuery選擇器用法的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45