DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery溫習篇 強大的JQuery選擇器
jQuery溫習篇 強大的JQuery選擇器
編輯:JQuery特效代碼     

在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的元素

*

選擇所有的元素

$("*")

2.2簡單選擇器

選擇表達式

說明

舉例

: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

匹配如 h1, h2, h3之類的標題元素

$(":header").css("background", "#EEE");
添加樣式

:animated

匹配所有正在執行動畫效果的元素

暫無例子

3.3:內容選擇器

選擇表達式

說明

舉例

:contains(text)

匹配包含給定文本的元素,只要裡面出現即可

$("p:contains('段落')")
找帶有段落字樣的p元素

:empty

匹配所有不包含子元素或者文本的空元素

$("div:empty")

:has(selector)

匹配含有選擇器所匹配的元素的元素

$("div:has('p')")

:parent

匹配含有子元素或者文本的元素

$("div:parent")

4.4子元素選擇器

選擇器

說明

舉例

: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

4.5:可見性選擇器

選擇器

說明

舉例

:hidden

匹配所有的不可見元素,input 元素的 type 屬性為 "hidden" 的話也會被匹配到

$("div:hidden")

:visible

匹配所有的可見元素

$("div:visible")//元素來匹配

$(".divH:visible")//根據class來匹配

例子就不用多講了,大家對於jQuery應該都有一定的見地了。呵呵…

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved