初學jQuery之選擇器

xcc3641 發布于2019-08-02 16:04 / 1647人閱讀

摘要：選擇器選擇器是什么的選擇器是用于定位頁面中的元素，其用法最初設計是源于的選擇其用法，但是的選擇器進行了擴展，遠比的選擇器更加強大。

選擇器 選擇器是什么

jQuery的選擇器是用于定位HTML頁面中的元素，其用法最初設計是源于CSS的選擇其用法，但是jQuery的選擇器進行了擴展，遠比CSS的選擇器更加強大。

基本選擇器

基本選擇去具有以下幾種：
1.ID選擇器
2.元素選擇器
3.類選擇器
4.通配符選擇器
5.組合選擇器
示例代碼如下：


臥龍學苑
前端開發

層級選擇器

jQuery的層級選擇器具有以下幾種：
1.后代選擇器根據給定元素的祖先元素下匹配所有的后代元素
2.子選擇器根據給定的父元素下匹配所有的子元素
3.相鄰兄弟選擇器根據給定的目標元素匹配下一個相鄰兄弟元素
4.普通兄弟選擇器根據給定的目標元素匹配后面所有兄弟元素
由于jQuery對象是類數組對象，及時匹配的元素只有一個，返回的結果依舊是類數組對象。
示例代碼如下：

基本過濾選擇器

jQuery的基本過濾選擇器具有以下幾種：
1.:first過濾選擇器獲取第一個元素
2.：last過濾選擇器獲取最后一個元素
3.：even過濾選擇器匹配所有索引值為偶數的元素，從0開始
4.：odd過濾選擇器匹配所有索引值為奇數的元素，從0開始
5.:eq（）過濾選擇器匹配一個給定索引值的元素
6.:gt（）過濾選擇器匹配所有大于給定索引值的元素
7.:lt（）過濾選擇器匹配所有小于給定索引值的元素
8.:not（）過濾選擇器去除所有與給定選擇器匹配的元素
9.:header過濾選擇器匹配如h1 h2 h3 h4 h5 h6之類的標題元素
10.:animated過濾選擇器匹配正在執行動畫效果的元素（由jQuery實現的動畫）
示例代碼如下：


這是標題
這是標題
臥龍學苑

    



前端開發

內容過濾選擇器

jQuery中提供了以下幾種內容過濾選擇器
1.：contains（）過濾選擇器匹配包含給定位版本的元素
2.：empty過濾選擇器匹配不包含子元素或者文本的空元素
3.：parent過濾選擇器匹配有子元素或者文本的元素
4.：has（）過濾選擇去匹配含有選擇器所匹配的元素的元素
示例代碼如下：


這是div元素

可見性過濾選擇器

1.：hidden過濾選擇器匹配所有不可見元素，或者type為hidde的元素
2.：visible過濾器選擇器匹配所有可見的元素


臥龍學苑
前端開發

屬性過濾選擇器

1.[attr]過濾選擇器匹配包含給定屬性的元素
2.[attr=value]過濾選擇器匹配給定的屬性是某個特定值的元素
3.[attr！=value]過濾選擇器匹配不含有特定的屬性，或者屬性不等于特定值的元素
4.[attr^=value]過濾選擇器匹配給定的屬性是以某些值開始的元素
5.[attr$=value]過濾選擇器匹配給定的屬性是以某些值結尾的元素
6.[attr*=value]過濾選擇器匹配給定的屬性是包含某些值的元素
7.組合過濾選擇器匹配元素需要同時滿足多個屬性過濾器

子元素過濾選擇器

1.：nth-child（）過濾選擇器匹配其父元素下的第N個子或奇偶元素
2.：first-child過濾選擇器匹配第一個子元素
3.：last-child過濾選擇器匹配最后一個子元素
4.：only-child過濾選擇器如果某個元素是父元素中唯一的子元素，就會被匹配



    這是id為d1的div元素
    這是id為d2的div元素
    這是id為d3的div元素

表單對象屬性過濾器

1.：enabled過濾選擇器匹配所有可用元素
2.：disabled過濾選擇器匹配所有不可用元素
3.：checked過濾選擇器匹配所有選中的被選中元素
4.：selected過濾選擇器匹配所有選中的



    
    html
    css

表單選擇器

云服務器 GPU云服務器 jquery常用選擇器 jquery過濾選擇器 jquery雙向選擇器 jquery選擇器空格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54595.html

初學jQuery之選擇器

摘要：選擇器選擇器是什么的選擇器是用于定位頁面中的元素，其用法最初設計是源于的選擇其用法，但是的選擇器進行了擴展，遠比的選擇器更加強大。選擇器選擇器是什么 jQuery的選擇器是用于定位HTML頁面中的元素，其用法最初設計是源于CSS的選擇其用法，但是jQuery的選擇器進行了擴展，遠比CSS的選擇器更加強大。基本選擇器基本選擇去具有以下幾種：1.ID選擇器 2.元素選擇器3...

yankeys 2019-08-23 11:47 評論0 收藏0
jQuery設計思想之理解篇

摘要：創建新元素的方法非常簡單，只要把新元素直接傳入的構造函數就行了七工具方法設計思想之六除了對選中的元素進行操作以外，還提供一些與元素無關的工具方法。八事件操作設計思想之七，就是把事件直接綁定在網頁元素之上。轉自：阮一峰 2011年7月26日 http://www.ruanyifeng.com/blo... jQuery是目前使用最廣泛的JavaScript函數庫。據統計，全世界排名...

newsning 2019-08-20 16:12 評論0 收藏0
JavaScript入門的5條建議

摘要：你是否已經初步掌握了和，但完全不知道從何入手如果是，那么這篇文章一定會對你有所幫助，這里總結了條建議，幫助初學者總結學習方法，提高學習效率。這樣的結果就是，個小時最多只利用了個小時。你是否已經初步掌握了html和css，但完全不知道從何入手JavaScript？如果是，那么這篇文章一定會對你有所幫助，這里總結了5條建議，幫助JavaScript初學者總結學習方法，提高學習效率。一、...

李昌杰 2019-08-20 17:46 評論0 收藏0
初學Vue（五）-- 雙向綁定

摘要：需要初始化處理一些數據時會比較有用，后面章節將有介紹。主要解綁一些使用監聽的事件等。這些鉤子與和類似，也是作為選項寫入實例內，并且鉤子的指向的是調用它的實例你好，{{ name }} var app = new Vue({ el: #app, data: { name: } ...

Thanatos 2019-08-23 18:38 評論0 收藏0
jQuery 效率提升建議

摘要：網上有一篇文章轉載比較泛濫，已經不知道原文作者了，里面針對效率提升建議非?？茖W，現在重新組織里面的內容并轉載。事實上，這種處理完全不必要。利用這一點，可以大大簡化事件的綁定。對象由于會對變更，速度會遠慢于函數。 jQuery簡潔通用的方法集把編碼者從繁重的工作中解脫出來，也拉低了進入javascript的門檻，初學者對瀏覽器兼容性一無所知的情況下，幾行代碼就可以寫出超炫的特效。網上有一...

liuhh 2019-06-28 14:11 評論0 收藏0