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快捷的實現下面三個功能:
-
給網頁中所有的<p>元素添加onclick()事件
-
給一個特定的表格隔行換色
-
對多選框進行操作,輸出選中的多選框的個數
【代碼02.06】案例研究——某網站品牌列表的效果(默認顯示精簡,可以查看全部)
注:本案例比較常用,請重視!
【代碼】https://github.com/rxbook/study-jquery-1/tree/master/02.Jquery%E9%80%89%E6%8B%A9%E5%99%A8