jQuary教程2: jQuery選擇器
阿新 • • 發佈:2018-05-24
ext content 同一時間 之間 cto 引號 篩選 jquery選擇器 成了
1 什麽是jQuery選擇器
獲取頁面元素,並且把頁面元素包裝成jQuery對象的方式
2
為了更加方便的獲取頁面上的元素,並且將元素包裝起來,使我們編寫程序時更加便捷
3
用法 | 描述 | |
---|---|---|
ID選擇器 | $(“#id”); | 獲取指定ID的元素 |
類選擇器 | $(“.class”); | 獲取同一類class的元素 |
標簽選擇器 | $(“div”); | 獲取同一類標簽的所有元素 |
並集選擇器 | $(“div,p,li”); | 使用逗號分隔,只要符合條件之一就可。獲取所有的div、p、li元素 |
交集選擇器(標簽指定式選擇器) | $(“div.redClass”); |
註意選擇器1和選擇器2之間沒有空格,class為redClass的div元素,註意區分後代選擇器。 |
用法 | 描述 | |
---|---|---|
子代選擇器 | $(“ul>li”); | 使用>號,獲取兒子層級的元素,註意,並不會獲取孫子層級的元素 |
後代選擇器 | $(“ul li”); | 使用空格,代表後代選擇器,獲取ul下的所有li元素,包括孫子等 |
篩選選擇器(方法)
註意: 上面的選擇器只要根據傳入字符串不同來區分,而篩選選擇器是一些方法
名稱 | 用法 | 描述 |
---|---|---|
children(selector) | $(‘ul‘).children(‘li‘) | 找到自己的所有符合條件的直接子元素 <br />當前於子代選擇器$(“ul>li”); |
find(selector) | $(‘ul‘).find(‘li‘) | 找到自己的所有符合條件的後代元素 <br />當前於後代選擇器$(“ul li”); |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟元素,不包括自己本身。 |
parent() | $(“#first”).parent(); | 查找直接父親元素 |
eq(index) | $(“li”).eq(2); | 找到所有符合條件的li裏面對應下標的元素,索引從0開始 |
next() | $(‘#first‘).next() | 下一個兄弟 |
index() | $(‘li‘).index() |
名稱 | 用法 | 描述 |
---|---|---|
:eq(index) | $(“li:eq(2)”) | 獲取到的li元素中,選擇索引號為2的元素,索引號index從0開始。 |
:odd | $(“li:odd”) | 獲取到的li元素中,選擇索引號為奇數的元素 |
:even | $(“li:even”) | 獲取到的li元素中,選擇索引號為偶數的元素 |
4
4-1 jquery大版本分為1.x和2.x和3.x 區別:2.x 3.x版本不再支持IE6/7/8
4-2 關於jquery3.0:翻一下官網的介紹:
jquery3.0現在發布了,目標是創建一個更苗條、更快的jquery版本(並且能向後兼容)。我們已經移除了IE舊版本的解決方案,並且帶來了一些較為現代的web API,但這是有道理的。3.0是2.x分支的延續,但是有一些突破性的改變。但是1.12和2.2分支將會在同一時間繼續獲得關鍵性的支持補丁。但是他們不會再有任何新的功能和重大的修訂。jQuery3是jQuery的未來,如果你需要兼容IE6-8,你可以繼續使用1.12版本。
4-3 jQuery每一個版本又分為壓縮版和未壓縮版:
jquery.min.js:壓縮版本,去除了註釋、換行、空格、並且將一些變量替換成了a,b,c之類的簡單字符,基本沒有可讀性,推薦在項目生產環境使用,因為文件較小,減少網絡壓力。
jQuary教程2: jQuery選擇器