jq 中常見的選擇器

Yi_Zhi_Yu 發布于2019-08-21 11:35 / 1067人閱讀

摘要：基本選擇器選擇器選擇器元素選擇器通配符選擇器匹配所有元素層次選擇器選取里面所有的選取元素下的子元素選取緊接在元素后的元素等價于選取元素之后的所有元素等價于過濾選擇器基本過濾選擇器選取第一個元素選取最后一個元素選取索引是偶數的所有元素索引從開

1 基本選擇器
id選擇器 #id $("#test")
class 選擇器 .class $(".test")
元素選擇器 element $(p) $(img)
通配符選擇器 $("*") 匹配所有元素

2 層次選擇器
$("div span") 選取div 里面所有的span
$("parent>child") 選取 parent 元素下的child 子元素
$("prev + next") 選取緊接在prev元素后的next元素
$(".one+div") 等價于$(".one").next("div")
$("prev~sibkings") 選取prev 元素之后的所有siblings 元素
$("#prev~div") 等價于 $("#prev").nextAll("div")

3 過濾選擇器

3.1 基本過濾選擇器
:first 選取第一個元素 $("div:first")
:last 選取最后一個元素 $("div:last")
:even 選取索引是偶數的所有元素索引從0開始
:odd 選取索引是奇數的所有元素索引從1開始
:eq(index) 選取索引等于index 的元素索引從0開始
:gt(index) 選取索引大于index 的元素索引從0開始
:lt(index) 選取索引小于index 的元素索引從0開始
:header 選取所有的標題元素 eg: h1 h2 h3
:animated 選取當前正在執行動畫的所有元素

3.2 內容過濾選擇器
:contains(text) 選取含有文本內容text的元素
:empty 選取不包含子元素或文本的空元素
:has(selector) 選取含有選擇器所有匹配元素的元素
:parent 選取含有子元素或文本的元素

3.3 可見性過濾選擇器
:hidden 選取所有不可見的元素 $(":hidden")
$(":hidden")選取所有不可見元素。
包括：

等元素。
:visible 選取所有可見元素

3.4 屬性過濾選擇器
[attribute] 選取擁有此屬性的元素
[attribute = value] 選取屬性值為value的元素
[attribute !=value] 選取屬性值不等于value的元素
[attribute^=value] 選取屬性值以value開始的元素
[attribute $=value] 選取屬性值以value 結束的元素
[attribute *=value] 選取屬性值含有value值的元素

3.5 子元素過濾選擇器
:first-child 選取每個父元素下第一個子元素
:last-child 選取每個父元素下的最后一個子元素
:only-child 如果某個元素是他父元素中唯一的一個子元素，那么將會被匹配，
如果父元素中含有其他的元素將不會匹配

3.6 表單對象屬性過濾選擇器
:enabled 選取所有可用的元素
:disabled 選取所有不可用的元素
:checked 選取所有被選中的元素（單選框、復選框）
:selected 選取所有被選中的選項元素（下拉列表）

4 表單選擇器
:input 選中所有input textarea select button 元素
:text 選取所有單行文本框
:password 選取所有密碼框
:radio 選取所有單選框
:checkbox 選取所有多選框
:submit 選取所有的提交按鈕
:file 選取所有的上傳域
:hidden 選取所有不可見元素

5 獲得兄弟元素的方法
next() 當前元素之后的近鄰的第一個兄弟元素
nextAll() 當前元素之后的所有的兄弟元素
prev() 當前元素之前的近鄰的兄弟元素
prevAll() 當前元素之前的所有的兄弟元素
sibling() 當前元素的所有的兄弟元素

云服務器 GPU云服務器 jsp中id選擇器 js中常見的變量名稱 html的編寫器選擇 jq刪除js中json數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86897.html

聊聊jQuery的反模式

摘要：如果我們認為模式代表一個最佳的實踐，那么反模式將代表我們已經學到一個教訓。受啟發于的設計模式，在年的月的報告大會上首次提出反模式。參考鏈接反模式學用設計模式極客學院如果我們認為模式代表一個最佳的實踐，那么反模式將代表我們已經學到一個教訓。受啟發于Gof的《設計模式》，Andrew Koeing在1995年的11月的C++報告大會上首次提出反模式。在Koeing的報告中，反模式有著兩...

CoderStudy 2019-08-19 17:45 評論0 收藏0
JavaWEB開發04——JQuery

摘要：設計的宗旨是，，即倡導寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設計模式，優化文檔操作事件處理動畫設計和交互。今日任務使用JQuery完成頁面定時彈出廣告定時器: ? setInterval clearInterval ? setTimeout clearTimeout 顯示: img.style.display = bloc...

chunquedong 2019-08-29 17:05 評論0 收藏0
JavaWEB開發04——JQuery

摘要：設計的宗旨是，，即倡導寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設計模式，優化文檔操作事件處理動畫設計和交互。今日任務使用JQuery完成頁面定時彈出廣告定時器: ? setInterval clearInterval ? setTimeout clearTimeout 顯示: img.style.display = bloc...

nicercode 2019-08-02 11:51 評論0 收藏0
JavaWEB開發04——JQuery

摘要：設計的宗旨是，，即倡導寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設計模式，優化文檔操作事件處理動畫設計和交互。今日任務使用JQuery完成頁面定時彈出廣告定時器: ? setInterval clearInterval ? setTimeout clearTimeout 顯示: img.style.display = bloc...

pakolagij 2019-08-23 12:34 評論0 收藏0
jQuery最佳實踐

摘要：鏈式操作使用鏈式操作代替變量緩存和多次操作每當鏈長超過個鏈接或得到，因為活動任務的復雜，使用適當的換行和縮進使代碼的可讀性。對于較長的鏈式操作可以把對象緩存到一個變量里。原文地址：http://lab.abhinayrathore.com/jquery-standards/ 第一次翻譯，有不對不妥的地方請拍磚。showImg(http://segmentfault.com/img/b...

wizChen 2019-08-21 12:13 評論0 收藏0