溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

jQuery基礎(chǔ)系列(一)---選擇器介紹

發(fā)布時(shí)間:2020-07-09 22:13:16 來(lái)源:網(wǎng)絡(luò) 閱讀:666 作者:iszeo 欄目:web開(kāi)發(fā)

   jQuery是什么?它是一個(gè)JavaScript庫(kù),它的存在大大的簡(jiǎn)化了JavaSript的編程。有些人會(huì)想,既然已經(jīng)有JavaScript存在了,它的功能不是更強(qiáng)大嗎,為什么要使用jQuery呢?其實(shí)選擇它主要是因?yàn)樗?jiǎn)單,可以為我節(jié)省下大量的時(shí)間,畢竟博主主業(yè)是PHP,更重要的就是,兼容性,一直認(rèn)為jQuery最強(qiáng)大的地方就是它基本上可以兼容各大瀏覽器,這樣就不用費(fèi)腦力去調(diào)試各個(gè)瀏覽器的不同了。雖然有點(diǎn)懶,實(shí)用就好。


jQuery庫(kù)包含以下特性:

   1.HTML元素選取

   2.HTML元素操作

   3.CSS操作

   4.HTML事件函數(shù)

   5.JavaScript特效與動(dòng)畫(huà)

   6.HTML DOM 遍歷和修改

   7.AJAX

   8.Utilities


jQuery的基本語(yǔ)法:

  JQuery 語(yǔ)法是為 HTML 元素的選取編制,可以對(duì)元素執(zhí)行某些操作。

   基礎(chǔ)語(yǔ)法是:$(selector).action()

   1.美元符號(hào)定義 jQuery

   2.選擇符(selector)“查詢(xún)”和“查找” HTML 元素

   3.jQuery action() 執(zhí)行對(duì)元素的操作


文檔就緒函數(shù):

   $(document).ready(function(){

       //這里開(kāi)始進(jìn)行jQuery的操作    

   })

一般Jquery代碼都會(huì)寫(xiě)入在這個(gè)函數(shù)里面,這是為了防止文檔在完全加載(就緒)之前運(yùn)行 jQuery 代碼。

/*===================================簡(jiǎn)介完畢,下面來(lái)了解一下jQuery的選擇器=========================================*/

jQuery的選擇器完美的提現(xiàn)了他的HTML元素選取特性

下面是Jquery的選擇器參考手冊(cè)(來(lái)源:W3CSchool網(wǎng)

選擇器

實(shí)例

選取

*

$("*")

所有元素

#id

$("#lastname")

id=lastname 的元素

.class

$(".intro")

所有class=.intro的元素

element

$("p")

所有 <p> 元素

.class.class

$(".intro.demo")

所有class=.introclass=.demo的元素




:first

$("p:first")

第一個(gè) <p> 元素

:last

$("p:last")

最后一個(gè) <p> 元素

:even

$("tr:even")

所有偶數(shù) <tr> 元素

:odd

$("tr:odd")

所有奇數(shù) <tr> 元素




:eq(index)

$("ul li:eq(3)")

列表中的第四個(gè)元素(index 從 0 開(kāi)始)

:gt(no)

$("ul li:gt(3)")

列出 index 大于 3 的元素

:lt(no)

$("ul li:lt(3)")

列出 index 小于 3 的元素

:not(selector)

$("input:not(:empty)")

所有不為空的 input 元素




:header

$(":header")

所有標(biāo)題元素 <h2><h3>...

:animated


所有動(dòng)畫(huà)元素




:contains(text)

$(":contains('W3CSchool')")

包含文本的所有元素

:empty

$(":empty")

無(wú)子(元素)節(jié)點(diǎn)的所有元素

:hidden

$("p:hidden")

所有隱藏的 <p> 元素

:visible

$("table:visible")

所有可見(jiàn)的表格




s1,s2,s3

$("th,td,.intro")

所有帶有匹配選擇的元素




[attribute]

$("[href]")

所有帶有 href 屬性的元素

[attribute=value]

$("[href='#']")

所有 href 屬性的值等于 "#" 的元素

[attribute!=value]

$("[href!='#']")

所有 href 屬性的值不等于 "#" 的元素

[attribute$=value]

$("[href$='.jpg']")

所有 href 屬性的值包含 ".jpg"  的元素




:input

$(":input")

所有 <input> 元素

:text

$(":text")

所有 type="text" 的  <input> 元素

:password

$(":password")

所有 type="password" 的  <input> 元素

:radio

$(":radio")

所有 type="radio" 的  <input> 元素

:checkbox

$(":checkbox")

所有 type="checkbox" 的  <input> 元素

:submit

$(":submit")

所有 type="submit" 的  <input> 元素

:reset

$(":reset")

所有 type="reset" 的  <input> 元素

:button

$(":button")

所有 type="button" 的  <input> 元素

:p_w_picpath

$(":p_w_picpath")

所有 type="p_w_picpath" 的  <input> 元素

:file

$(":file")

所有 type="file" 的  <input> 元素




:enabled

$(":enabled")

所有激活的 input 元素

:disabled

$(":disabled")

所有禁用的 input 元素

:selected

$(":selected")

所有被選取的 input 元素

:checked

$(":checked")

所有被選中的 input 元素

由于選擇器的種類(lèi)繁多,這里就不一一做介紹了,大家可以去W3Cschool網(wǎng)里看看他們的實(shí)例,然后自己做一下各種各樣的嘗試,有助于加深記憶。

這個(gè)系列的文章的內(nèi)容是博主從網(wǎng)上的一些資料通過(guò)自己的簡(jiǎn)介整合而成,以后會(huì)陸續(xù)發(fā)出后續(xù)文章,為自己加強(qiáng)對(duì)jQuery的理解,更好的使用它。jQuery對(duì)于Web編程來(lái)說(shuō)是個(gè)挺實(shí)用的玩意,希望我的文章能夠給大家?guī)?lái)小小的幫助。





向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI