學習jQuery已經有1年多的時間了,但是一直由于做WinForm程序開發沒有經常實踐。現在又開始重拾WebForm開發。寫幾篇jQuery系列,溫習下jQuery框架的知識。

創新互聯是一家專業提供袁州企業網站建設,專注與網站建設、網站設計、H5建站、小程序制作等業務。10年已為袁州眾多企業、政府機構等服務。創新互聯專業網站制作公司優惠進行中。
在jQuery出世以來,它取得很大的成就和認同。JQuery是一個輕量級的JavaScript框架,它的發布版很小僅16K左右。它能讓你方便簡潔的寫出漂亮的動畫效果、實現各種視覺效果,輕松的處理JavaScript的DOM數以及Ajax的交互行為。它的優點在于輕量級、簡單易學、易擴展、跨瀏覽器和網上擁有大量的jQuery插件使用。由于它這一大堆的優點,它已經被微軟官方認可加入VS IDE中擁有強大的智能提示,并據官方的統計現在至少有20%的國際性大網站已經加入jQuery作為其腳本。
1:首先是JavaScript的DOM和 jQuery包裝集的區分
1.1:在JavaScript中我們訪問的方式是操作DOM結構,提供的可用方法有:
1: document.getElementById("ID"):根據ID獲取DOM對象。
2:document.getElementsByName("name"):根據HTML標記name屬性獲取一個DOM數組。
3:document.getElementsByTagName("Tag"):根據HTML的Tag獲取一個DOM數組。
1.2:jQuery相對DOM則提供了許多可用的方法和屬性。
jQuery簡單的獲取對象有$(“#id”) ,$(“.class”),$(“tag”)方式,它的書寫方式和css3.0相似 id用#,class(css)用.,HTMl Tag則直接書寫。關于jquery的選擇器在下面講述,這里不急。
1.3:JavaScript的DOM對象轉可以化為jQuery包裝集:通過$(element)赴會就為jQuery包裝集。
2:jQuery最強大的就是提供了一個萬能的屬性選擇器。
2.1基本選擇器
| 選擇表達式 | 說明 | 舉例 |
| #id | 根據給定的ID匹配一個元素用# | $("#testDiv2") 獲取ID為testDiv2的元素 |
| .class | 根據給定的類匹配元素(也就是取class的值)用. | $(".myDiv") 獲取class為myDiv的一組元素 |
| element | 根據給定的元素名匹配所有元素,直接寫上元素名例如(p,a,input,div等) | $("div") 獲取所有的div元素 |
| selector1,selector2,selectorN | 將每一個選擇器匹配到的元素合并后一起返回,選擇器可以是id,class,element用,隔開 | $("#testDiv2,p") $("p,span,div.myDiv") 獲取所有的p,span和class為myDiv的元素 |
| * | 選擇所有的元素 | $("*") |
| 選擇表達式 | 說明 | 舉例 |
| :first | 匹配找到的第一個元素 | $("div:first") |
| :last | 匹配找到的最后一個元素 | $("div:last") |
| :eq(index) | 匹配一個給定索引值的元素,當然要存在才可以找得到,索引從0開始 | $("div:eq(1)") |
| :gt(index) | 匹配所有大于給定索引值的元素 | $("div:gt(0)") 查找第1個以后的元素 |
| :lt(index) | 匹配所有小于給定索引值的元素 | $("div:lt(2)") 查找第一行和第二行的元素 |
| :even | 匹配所有索引值為偶數的元素,從 0 開始計數 | $("div:even") 查找第1,3,5個div |
| :odd | 匹配所有索引值為奇數的元素,從 0 開始計數 | $("div:odd") 查找第2,4個div |
| :not(selector) | 去除所有與給定選擇器匹配的元素 selector為表達式,可以是屬性里面的一個值 | $("input:not(:checked)") 查找所有未選中的input 元素[注 :checked為自定義篩選選擇器,后面會講到] |
| :header | 匹配如 h2, h3, h4之類的標題元素 | $(":header").css("background", "#EEE"); 添加樣式 |
| :animated | 匹配所有正在執行動畫效果的元素 | 暫無例子 |
| 選擇表達式 | 說明 | 舉例 |
| :contains(text) | 匹配包含給定文本的元素,只要里面出現即可 | $("p:contains('段落')") 找帶有段落字樣的p元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 | $("div:empty") |
| :has(selector) | 匹配含有選擇器所匹配的元素的元素 | $("div:has('p')") |
| :parent | 匹配含有子元素或者文本的元素 | $("div:parent") |
| 選擇器 | 說明 | 舉例 |
| :first-child | 匹配第一個子元素 | $("ul li:first-child")//在每個 ul 中查找第一個 li |
| :last-child | 匹配最后一個子元素 | $("ul li:last-child")//在每個 ul 中查找最后一個 li |
| :nth-child(index/even/odd/equation) | 匹配其父元素下的第N個子或奇偶元素 ':eq(index)' 只匹配一個元素,而這個將為每一個父元素匹配子元素。:nth-child從1開始的,而:eq()是從0算起的! 可以使用: nth-child(even)//偶數行 :nth-child(odd)//奇數行 :nth-child(3n) :nth-child(2)//索引為2的 :nth-child(3n+1) :nth-child(3n+2) | $("ul li:nth-child(2)")//在每個 ul 查找第 2 個li |
| :nth-child(index/even/odd/equation) | 匹配其父元素下的第N個子或奇偶元素 | $("ul li:nth-child(2)")//在每個 ul 查找第 2 個li |
| :only-child | 如果某個元素是父元素中唯一的子元素,那將會被匹配 如果父元素中含有其他元素,那將不會被匹配。 | $("ul li:only-child")//在 ul 中查找是唯一子元素的 li |
| 選擇器 | 說明 | 舉例 |
| :hidden | 匹配所有的不可見元素,input 元素的 type 屬性為 "hidden" 的話也會被匹配到 | $("div:hidden") |
| :visible | 匹配所有的可見元素 | $("div:visible")//元素來匹配 $(".divH:visible")//根據class來匹配 |
本文標題:jQuery溫習篇---強大的JQuery選擇器
當前鏈接:http://www.yijiale78.com/article32/pcphpc.html
成都網站建設公司_創新互聯,為您提供關鍵詞優化、建站公司、動態網站、云服務器、App設計、網站導航
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯