jQuery 選擇器
jQuery最核心的組成部分就是：選擇器引擎，它繼承了css語法，可以對DOM元素的標簽名，屬性名，狀態(tài)等進行快速準確的選擇，并且不用擔心瀏覽器的兼容性，
因此我們下面介紹的jQuery選擇器大多與我們之前學習的CSS選擇器類似
CSS選擇器是用來查找和定位頁面中的元素，并將樣式設(shè)置到元素上
jQuery選擇器也是用來查找元素，我們找到元素后，可以使用一些給定的方法來修改、刪除、甚至移動元素
在使用jQuery選擇器時，我們必須使用“$()”函數(shù)來包裝使用我們的css規(guī)則，而css規(guī)則作為參數(shù)傳遞到jQuery對象內(nèi)部后，在返回包含頁面中對應元素的jQuery對象，隨后，我們就可以對這個獲取到的DOM節(jié)點進行行為操作了。
元素選擇器
jQuery 元素選擇器基于元素名選取元素。
在頁面中選取所有 <p> 元素:
$("p")
實例
用戶點擊按鈕后，所有 <p> 都會改變顏色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css('color','red'); //添加一個行為
});
});
</script>
</head>
<body>
<h2>這是一個標題</h2>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<button>點我</button>
</body>
</html>運行程序嘗試一下
#id 選擇器
jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
注意：ID在頁面只允許出現(xiàn)一次，我們一般都是要求開發(fā)者蹲守和保持這個規(guī)則。但如果你在頁面中出現(xiàn)三次，并且使用css樣式，那么這三個元素還會執(zhí)行效果，但如果你在jQuery中這樣去做，就會遇到問題，只有一個ID會生效，所以我們一定要養(yǎng)成習慣，在頁面僅使用一個ID
通過 id 選取元素語法如下：
$("#test")
實例
當用戶點擊按鈕后，有 id="test" 屬性的元素會變成紅色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").css('color','red');
});
});
</script>
</head>
<body>
<h2>標題</h2>
<p>段落</p>
<p id="test">我變顏色了</p>
<button>點我</button>
</body>
</html>運行程序嘗試一下
.class 選擇器
jQuery 類選擇器可以通過指定的 class 查找元素。
語法如下：
$(".test")
實例
用戶點擊按鈕后，所有帶有 class="test" 屬性的元素都會改變顏色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").css('color','blue');
});
});
</script>
</head>
<body>
<h2 class="test">class選擇器</h2>
<p class="test">class選擇器</p>
<button>點我</button>
</body>
</html>運行程序嘗試一下
更多的選擇器實例
| 語法 | 描述 |
|---|---|
| $(this) | 當前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每個 <ul> 的第一個 <li> 元素 |
| $("[href$='.jpg']") | 所有帶有以 ".jpg" 結(jié)尾的屬性值的 href 屬性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
