JQ筆記02.Jquery選擇器

Jquery選擇器:類似於CSS選擇器。

【代碼02.01】

$(“#ID”)用來代替document.getElementById()函數,即通過ID獲取元素;

$(“tagName”)用來代替document.getElementsByTagName()函數,即通過標籤名獲取HTML元素。

使用Jquery獲取網頁上不存在的元素也不會報錯。

 

Jquery選擇器分爲基本選擇器、層次選擇器、過濾選擇器和表單選擇器。

【代碼02.03.1-基本選擇器】基本選擇器通過元素id、class、標籤名等來查找DOM元素。在網頁中每個id只能用一次,class可以重複使用。

【代碼02.03.2-層次選擇器】通過DOM元素之間的層次關係來獲取特定元素,如後代元素、子元素、相鄰元素、兄弟元素。

注:後兩個不常用,因爲有相同的簡單方法的代替:

擴展:區別nextAll()方法[即$(‘#prev~div’)選擇器]和siblings()方法:前者只能選擇“#prev”元素後面的同輩<div>元素,後者與前後位置無關。

【過濾選擇器】通過特定的過濾規則來篩選出所需的DOM元素,選擇器以冒號(:)開頭。

【代碼02.03.3.1-基本過濾選擇器】

【代碼02.03.3.2-內容過濾選擇器】(主要體現在它所包含的子元素或文本內容上)

【代碼02.03.3.3-可見性過濾選擇器】(根據元素的可見和不可見狀態來選擇相應的元素)

[改變所有可見的<div>元素的背景色] $(‘div:visible’).css(“background”,”#CCC”);

[顯示隱藏的<div>元素] $(‘div:hidden’).show(3000);

擴充:show()是jquery的方法,用來顯示元素。

【代碼02.03.3.4-屬性過濾選擇器】(通過元素的屬性來獲取相應的元素)

【代碼02.03.3.5-子元素過濾選擇器】(比較複雜)

【代碼02.03.3.6-表單對象屬性過濾選擇器】(對所選擇的表單元素進行過濾)

(詳細代碼見02.03.3.6,比較重要)

【代碼02.03.4-表單選擇器】能夠很方便的獲取到表單的某個或某類型元素

(詳細代碼見02.03.4,比較重要)

【代碼02.04】

使用Jquery快捷的實現下面三個功能:

  1. 給網頁中所有的<p>元素添加onclick()事件

  2. 給一個特定的表格隔行換色

  3. 對多選框進行操作,輸出選中的多選框的個數

【代碼02.06】案例研究——某網站品牌列表的效果(默認顯示精簡,可以查看全部)

注:本案例比較常用,請重視!

【代碼】https://github.com/rxbook/study-jquery-1/tree/master/02.Jquery%E9%80%89%E6%8B%A9%E5%99%A8

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章