您好,登錄后才能下訂單哦!
學(xué)習(xí)jQuery已經(jīng)有1年多的時間了,但是一直由于做WinForm程序開發(fā)沒有經(jīng)常實(shí)踐?,F(xiàn)在又開始重拾WebForm開發(fā)。寫幾篇jQuery系列,溫習(xí)下jQuery框架的知識。
在jQuery出世以來,它取得很大的成就和認(rèn)同。JQuery是一個輕量級的JavaScript框架,它的發(fā)布版很小僅16K左右。它能讓你方便簡潔的寫出漂亮的動畫效果、實(shí)現(xiàn)各種視覺效果,輕松的處理JavaScript的DOM數(shù)以及Ajax的交互行為。它的優(yōu)點(diǎn)在于輕量級、簡單易學(xué)、易擴(kuò)展、跨瀏覽器和網(wǎng)上擁有大量的jQuery插件使用。由于它這一大堆的優(yōu)點(diǎn),它已經(jīng)被微軟官方認(rèn)可加入VS IDE中擁有強(qiáng)大的智能提示,并據(jù)官方的統(tǒng)計現(xiàn)在至少有20%的國際性大網(wǎng)站已經(jīng)加入jQuery作為其腳本。
1:首先是JavaScript的DOM 和 jQuery包裝集的區(qū)分
1.1:在JavaScript中我們訪問的方式是操作DOM結(jié)構(gòu),提供的可用方法有:
1: document.getElementById("ID"):根據(jù)ID獲取DOM對象。
2:document.getElementsByName("name"):根據(jù)HTML標(biāo)記name屬性獲取一個DOM數(shù)組。
3:document.getElementsByTagName("Tag"):根據(jù)HTML的Tag獲取一個DOM數(shù)組。
1.2:jQuery相對DOM則提供了許多可用的方法和屬性。
jQuery簡單的獲取對象有$(“#id”) ,$(“.class”),$(“tag”)方式,它的書寫方式和css3.0相似 id用#,class(css)用.,HTMl Tag則直接書寫。關(guān)于jquery的選擇器在下面講述,這里不急。
1.3:JavaScript的DOM對象轉(zhuǎn)可以化為jQuery包裝集:通過$(element)赴會就為jQuery包裝集。
2:jQuery最強(qiáng)大的就是提供了一個萬能的屬性選擇器。
2.1基本選擇器
選擇表達(dá)式
|
說明
|
舉例
|
:first
|
匹配找到的第一個元素
|
$("div:first")
|
:last
|
匹配找到的最后一個元素
|
$("div:last")
|
:eq(index)
|
匹配一個給定索引值的元素,當(dāng)然要存在才可以找得到,索引從0開始
|
$("div:eq(1)")
|
:gt(index)
|
匹配所有大于給定索引值的元素
|
$("div:gt(0)") 查找第1個以后的元素
|
:lt(index)
|
匹配所有小于給定索引值的元素
|
$("div:lt(2)") 查找第一行和第二行的元素
|
:even
|
匹配所有索引值為偶數(shù)的元素,從 0 開始計數(shù)
|
$("div:even")
查找第1,3,5個div |
:odd
|
匹配所有索引值為奇數(shù)的元素,從 0 開始計數(shù)
|
$("div:odd")
查找第2,4個div |
:not(selector)
|
去除所有與給定選擇器匹配的元素
selector為表達(dá)式,可以是屬性里面的一個值 |
$("input:not(:checked)")
查找所有未選中的input 元素[注 :checked為自定義篩選選擇器,后面會講到] |
:header
|
匹配如 h2, h3, h4之類的標(biāo)題元素
|
$(":header").css("background", "#EEE");
添加樣式 |
:animated
|
匹配所有正在執(zhí)行動畫效果的元素
|
暫無例子
|
選擇表達(dá)式
|
說明
|
舉例
|
:contains(text)
|
匹配包含給定文本的元素,只要里面出現(xiàn)即可
|
$("p:contains('段落')")
找?guī)в卸温渥謽拥膒元素 |
: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)//偶數(shù)行 :nth-child(odd)//奇數(shù)行 :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")//根據(jù)class來匹配 |
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。