jQuery 選擇器
jQuery最核心的組成部分是：選擇器引擎，它繼承了css語法，可以對DOM元素的標籤名，屬性名，狀態(tài)等進行快速準確的選擇，並且不用擔心瀏覽器的兼容性，
因此我們下面介紹的jQuery選擇器大多與我們之前學習的CSS選擇器類似
CSS選擇器是用來尋找和定位頁面中的元素，並將樣式設置到元素上
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>執(zhí)行程式嘗試
########## #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>###執(zhí)行程式嘗試## #.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>執(zhí)行程式嘗試| #語法 | |
|---|---|
| 目前HTML 元素 | |
| 所有<p> 元素 | |
