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選擇器