上次和大傢討論瞭Jquery的基礎和簡介,列出瞭一些基礎的選擇器,基本選擇器和層次選擇器,現在和大傢接著討論下Jquery中的其它常用的選擇器,通過學習Jquery的多種選擇器,大傢可能會發現Jquery是一個非常強大的html的Dom查詢庫,在Jquery中提供瞭非常多對於DOM查詢的方法,是我們對於Dom的操作變的異常的簡單,不用再去煩惱如果找到指定目標,現在讓我們走進Jquery選擇器
過濾選擇器:
:first $("p:first")選擇所有DIV元素中的第一個元素
:last $("p:last")選擇所有p元素的最後的一個元素
:not(selector) $("input:not(.myClass)") 獲取class不叫myClass的Input的元素
:even $("input:even") 獲取索引是偶數的Input的元素
:odd $("input:odd") 獲取索引時奇數的Input的元素
:eq $("input:eq(2)") 獲取所有input元素中下標索引為2的元素
:gt $(“input:gt(1)”) 獲取input元素中下標索引大於1的元素
:lt $("input:lt(1)") 獲取input元素中下標索引小於1的元素
:header $("header") 獲取所有的<h1>到<h6>的元素
內容過濾選擇器
:contains(text) $("p:contains(我)") 選取文本包含”我“我的p元素
:empty $("p:empty") 選取沒有子元素,但包括文本元素的p元素
:has $("p:has(p)") 選取含有p元素的p元素
:parent $("p:parent") 選取擁有子元素的p元素
屬性過濾選擇器www.aiwalls.com
[attribute] $("p[id]") 返回p擁有id屬性的元素
[attribute=value] $(p[title='sharme']) 獲取屬性為title值為sharme的元素
[attribute!=value] $(p[title!='sharme']) 獲取屬性title值不為sharme的元素
[attribute^='value'] $("p[title^='sha']") 獲取屬性title值為sha開頭的元素
[attribute$='value'] $("p[title$='me']") 獲取屬性為title值為me結尾的p的元素
[attribute*='value'] $("p[title*='sss']") 獲取屬性為title所有值為sss的p元素
綜合實踐: $("p[title='sharme'][name^='sha'][class$='me']") 先後順序獲取title為sharme,name為sha開頭,class值以me結尾的p的元素
接下來和大傢討論下對於DOM的操作,jquery中的函數
append() 先每一個元素內部追加內容
appendTo() 將內容附加到元素上 $("<p>sharme</p>").appendTo("p")
prepend() $("p").preprend("dddddddd") 將ddddd附加到p元素之前
prependTo() $("ddddddd").preprendTo("p")
after()
insertAfter() $("<p>sharme<p/>").insertAfter("p") 將元素插入到p元素之後
before();$(“p”).before(“dddd”);將ddd添加到p元素之前
insertBefore();//$(“dddd”).insertBefore(“p”);
對於Jquery的選擇器就列到這裡瞭,下次我將和傢大討論一下Jquery中的事件處理機制,分享一下我的經驗,如果有興趣希望大傢多多關註一下我的博客,剛剛開始寫博客,以後將會不停的更新我的博客,將技術在這裡分享
摘自 sharme的專欄