jQuery基本選擇器實例講解
方法/步驟
1.新建jQuery_jibenxuanzeqi.html 頁面作為今天的講解頁面
2.首先在靜態頁面中編寫我們需要的元素,5個按鈕,4個div,1個span 並給其添加樣式,代碼如下
3.頁面預覽效果如下
4.我們現在要做的就是點擊不同的按鈕,選中不同的頁面元素,這也是jQuery的核心,基本選擇器。
首先給第一個按鈕添加代碼,讓它選中id為one的div
5.代碼解釋,
$("#btn_1").click(function(){}); 這個是綁定按鈕1的click事件,當按鈕1被點擊的時候觸發 function 中的函數
$("#one").css("background","#00FF00"); #one代表選中id為one的元素,css是jQuery函數,定義元素的css樣式,"background","#00FF00"就是給元素添加背景顏色。
預覽效果,點擊按鈕1如下
6.同理,添加按鈕2的click代碼
注意其中的選擇器 .class1 代表是選中所有樣式為class1的元素
7.預覽效果如下
8.按鈕3的代碼如下,
div代表選中所有的div元素
9.預覽效果,除了span標籤,所有div都被選中了
10.第四個按鈕的代碼如下
*代表 找到每一個元素,包括body等所有的Html元素
11.所以預覽效果是整個頁面都變顏色了
12.最後一個按鈕是選中id為one的元素和所有的span標籤,
$("#one,span") 並列的關係用“,”分割
13.預覽效果如下
14.以上就是jQuery的基本選擇器
其中包括
id選擇器,用“#”表示,根據給定的ID匹配一個元素。
class選擇器,用“.”表示,根據給定的類匹配元素。注意:一個元素可以有多個類,只要有一個符合就能被匹配到。
元素選擇器,根據給定的元素名匹配所有元素,如div,span等html元素
並列選擇器,將每一個選擇器匹配到的元素合併後一起返回。