jQuery最核心的組成部分是:選擇器引擎,它繼承了css語法,可以對DOM元素的標籤名,屬性名,狀態等進行快速準確的選擇,並且不用擔心瀏覽器的兼容性,
因此我們下面介紹的jQuery選擇器大多與我們之前學習的CSS選擇器類似
CSS選擇器是用來尋找和定位頁面中的元素,並將樣式設置到元素上
jQuery選擇器也是用來尋找元素,我們找到元素後,可以使用一些給定的方法來修改、刪除、甚至移動元素
在使用jQuery選擇器時,我們必須使用「$()」函數來包裝使用我們的css規則,而css規則作為參數傳遞到jQuery物件內部後,在返回包含頁面中對應元素的jQuery對象,隨後,我們就可以對這個取得到的DOM節點進行行為操作了。
元素選擇器
#jQuery 元素選擇器是基於元素名稱選取元素。
在頁面中選取所有<p> 元素:
$("p")
實例
使用者點選按鈕後,所有<p> 都會改變顏色:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(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在頁面只允許出現一次,我們一般都是要求開發者蹲守並保持這個規則。但如果你在頁面中出現三次,並且使用css樣式,那麼這三個元素還會執行效果,但如果你在jQuery中這樣做,就會遇到問題,只有一個ID會生效,所以我們一定要養成習慣,在頁面只使用一個ID######透過id 選取元素語法如下:#########$("#test")########### ####實例############當使用者點擊按鈕後,有id="test" 屬性的元素會變成紅色:###
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(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中文网(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>執行程式嘗試
#語法 | |
---|---|
目前HTML 元素 | |
所有<p> 元素 | |