jQuery基本選擇器實例講解?

Tags: 實例, 選擇器,

jQuery基本選擇器實例講解

方法/步驟

1.新建jQuery_jibenxuanzeqi.html 頁面作為今天的講解頁面

jQuery基本選擇器實例講解

2.首先在靜態頁面中編寫我們需要的元素,5個按鈕,4個div,1個span 並給其添加樣式,代碼如下

jQuery基本選擇器實例講解

3.頁面預覽效果如下

jQuery基本選擇器實例講解

4.我們現在要做的就是點擊不同的按鈕,選中不同的頁面元素,這也是jQuery的核心,基本選擇器。

首先給第一個按鈕添加代碼,讓它選中id為one的div

jQuery基本選擇器實例講解

5.代碼解釋,

$("#btn_1").click(function(){}); 這個是綁定按鈕1的click事件,當按鈕1被點擊的時候觸發 function 中的函數

$("#one").css("background","#00FF00"); #one代表選中id為one的元素,css是jQuery函數,定義元素的css樣式,"background","#00FF00"就是給元素添加背景顏色。

預覽效果,點擊按鈕1如下

jQuery基本選擇器實例講解

6.同理,添加按鈕2的click代碼

注意其中的選擇器 .class1 代表是選中所有樣式為class1的元素

jQuery基本選擇器實例講解

7.預覽效果如下

jQuery基本選擇器實例講解

8.按鈕3的代碼如下,

div代表選中所有的div元素

jQuery基本選擇器實例講解

9.預覽效果,除了span標籤,所有div都被選中了

jQuery基本選擇器實例講解

10.第四個按鈕的代碼如下

*代表 找到每一個元素,包括body等所有的Html元素

jQuery基本選擇器實例講解

11.所以預覽效果是整個頁面都變顏色了

jQuery基本選擇器實例講解

12.最後一個按鈕是選中id為one的元素和所有的span標籤,

$("#one,span") 並列的關係用“,”分割

jQuery基本選擇器實例講解

13.預覽效果如下

jQuery基本選擇器實例講解

14.以上就是jQuery的基本選擇器

其中包括

id選擇器,用“#”表示,根據給定的ID匹配一個元素。

class選擇器,用“.”表示,根據給定的類匹配元素。注意:一個元素可以有多個類,只要有一個符合就能被匹配到。

元素選擇器,根據給定的元素名匹配所有元素,如div,span等html元素

並列選擇器,將每一個選擇器匹配到的元素合併後一起返回。

相關問題答案