學習jQuery已經有1年多的時間了,但是一直由於做WinForm程序開發沒有經常實踐。現在又開始重拾WebForm開發。寫幾篇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")
|
:odd |
匹配所有索引值爲奇數的元素,從 0 開始計數 |
$("div:odd")
|
:not(selector) |
去除所有與給定選擇器匹配的元素
|
$("input:not(:checked)")
|
:header |
匹配如 h1, h2, h3之類的標題元素 |
$(":header").css("background", "#EEE");
|
:animated |
匹配所有正在執行動畫效果的元素 |
暫無例子 |
3.3:內容選擇器
選擇表達式 |
說明 |
舉例 |
:contains(text) |
匹配包含給定文本的元素,只要裏面出現即可 |
$("p:contains('段落')")
|
: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算起的!
可以使用: |
$("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")//元素來 匹配
|
例子就不用多講了,大家對於jQuery應該都有一定的見 地了。呵呵…