目錄
1、選擇器簡介
在JQuery中，遍歷DOM、事件處理、CSS控制、動畫設計和Ajax操作都依賴於選擇器。JQuery選擇器的核心依然依賴於JavaScript的原生方法，如getElementById()等。
JQuery選擇器分爲基本選擇器、結構選擇器、過濾選擇器、屬性選擇器、和表單選擇器。
2、基本選擇器
基本選擇器主要有5種類型：
（1）ID選擇器
JQuery通過“#”標識前綴匹配指定ID的元素對象，來取代JavaScript的getElementById()
jQuery("#id");
應用舉例：
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函數
$("#div1").css("color","red");
}
)
</script>
</head>
<body>
<div id="div1">測試jquery</div>
</body>
對應JavaScript實現方式如下：
<script type="text/javascript">
window.onload=function()
{
var odiv1=document.getElementById("div1");
odiv1.style.color="red";
};
</script>
（2）類型選擇器
JQuery匹配類型元素的集合使用JQuery（）構造函數完成，對應JavaScript的getElementsByTagName()
jQuery("element");
應用舉例：
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函數
$("div").css("color","red");
}
)
</script>
</head>
<body>
<div >菜單欄</div>
<div >內容欄</div>
<div >頁腳欄</div>
</body>
對應JavaScript實現方式如下：
<script type="text/javascript">
window.onload=function()
{
var odivs=document.getElementsByTagName("div");
for(var i=0;i<odivs.length;i++)
{
odivs[i].style.color="red";
}
};
</script>
（3）類選擇器
JQuery使用前綴符號“.”表示該選擇器爲類選擇器，返回爲包含匹配className的元素的jQuery對象。對應JavaScript的getElementsByClassName("red")。
jQuery(".classname");
應用舉例：
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函數
$(".red").css("color","red");
}
)
</script>
</head>
<body>
<div class="red">菜單欄</div>
<div class="green">工具欄</div>
<div class="blue red">內容欄</div>
<div class="green red">頁腳欄</div>
</body>
（4）通配選擇器
JQuery的通配選擇器的語法如下，對應JavaScript的getElementsByTagName("*")。
jQuery("*");
應用舉例：匹配<body>標籤下的所有標籤。
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函數
$("*").css("color","red");
}
)
</script>
</head>
<body>
<div >菜單欄</div>
<div >內容欄</div>
<div >頁腳欄</div>
</body>
（5）分組選擇器
JQuery通過“，”分割多個不同的選擇器，擴大選擇器的範圍，基本語法如下：
jQuery("selector1,selector2,selector3");
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函數
$("#div1,.red").css("color","red");
}
)
</script>
</head>
<body>
<div id="div1">菜單欄</div>
<div class="red" >內容欄</div>
<div >頁腳欄</div>
</body>
3、結構選擇器
結構選擇器是根據HTML文檔結構中節點之間的包含和並列關係決定匹配元素的一種方法。主要有層次選擇器和子元素選擇器。
（1）層次選擇器
應用舉例：包含選擇器
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函數
$("form input").css({"border":"solid 1px red","background":"blue"});
}
)
</script>
</head>
<body>
<form>
<fieldset>
<label>
包含的子文本框<input/>
</label>
<fieldset>
<label>
包含的孫文本框<input/>
</label>
</fieldset>
</fieldset>
</form>
<label>
非包含的文本框<input/>
</label>
</body>
（2）子元素選擇器
子元素選擇器通過當前匹配元素選擇該元素包含的特點子元素。主要包括四種類型：
應用舉例：
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函數
$("li:first-child").css("color","red");//匹配第一個子元素
$("li:last-child").css("color","blue");//匹配最後一個子元素
$("li:nth-child(1)").css("background","green");//匹配第一個元素
$("li:nth-child(2n)").css("background","orange");//匹配第2個及其後面2n個元素
}
)
</script>
</head>
<body>
<li>子元素選擇器測試一</li>
<li>子元素選擇器測試二</li>
<li>子元素選擇器測試三</li>
<li>子元素選擇器測試四</li>
</body>
4、過濾選擇器
過濾選擇器主要通過特定的過濾表達式來篩選特殊需求的DOM元素。
（1）定位過濾器
定位過濾選擇器主要根據編號和排位篩選特定位置上的元素，或者過濾掉特定元素。
應用舉例：
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函數
$("li:first").css("color","red");//匹配第一個子元素
$("li:last").css("color","blue");//匹配最後一個子元素
}
)
</script>
</head>
<body>
<li>子元素選擇器測試一</li>
<li>子元素選擇器測試二</li>
<li>子元素選擇器測試三</li>
<li>子元素選擇器測試四</li>
</body>
（2）內容過濾器
內容過濾器主要根據匹配元素所包含的子元素或者文本內容進行過濾。
應用舉例：
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函數
$("li:empty").text("空內容");//匹配空li元素
$("div u1:parent").css("color","blue");//匹配div包含ul元素中包含子元素或文本的元素
$("h1:contains('內容過濾')").css("color","green");//標題元素包含“內容過濾”文本內容的元素
$("p:has(span)").css("color","red");//包含span元素的p元素
}
)
</script>
</head>
<body>
<h1>內容過濾器測試</h1>
<p>段落文本1</p>
<p><span>段落文本2</span></p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
（3）可見過濾器
根據元素的可見或隱藏進行匹配。
5、屬性選擇器
屬性選擇器主要根據元素的屬性及其屬性值作爲過濾條件，來匹配DOM元素。
6、表單選擇器
（1）基本表單選擇器
（2）高級表單選擇器
