JQ常用選擇器總結

2021-08-27 08:25:55 字數 2950 閱讀 4208

1 常用選擇器：

$("#myelement")  //選擇id為myelement的元素，唯一元素 


$("div") //選擇所有的div標籤元素，返回div元素陣列 


$(".myclass") //選擇使用myclass類的css的所有元素 


$("*") //選擇文件中的所有的元素，可用多種的選擇方式聯合選擇：例如$("#myelement,div,.myclass")
2 層疊選擇器： 

$("#id>.classname ")    //子元素選擇器


$("#id .classname ") //後代元素選擇器


$("#id + .classname ") //緊鄰下乙個元素選擇器


$("#id ~ .classname ") //兄弟元素選擇器
3 基本過濾選擇器： 

$("li:first")    //第乙個li


$("li:last") //最後乙個li


$("li:even") //挑選下標為偶數的li


$("li:odd") //挑選下標為奇數的li


$("li:eq(4)") //下標等於 4 的li(第五個 li 元素)


$("li:gt(2)") //下標大於 2 的li


$("li:lt(2)") //下標小於 2 的li


$("li:not(#runoob)") //挑選除 id="runoob" 以外的所有li
4 內容過濾選擇器： 

$("div:contains('runob')")    //包含 runob文字的元素


$("td:empty") //不包含子元素或者文字的空元素


$("div:has(selector)") //含有選擇器所匹配的元素


$("td:parent") //含有子元素或者文字的元素
5 視覺化過濾選擇器： 

$("li:hidden")       //匹配所有不可見元素，或type為hidden的元素


$("li:visible") //匹配所有可見元素
6 屬性過濾選擇器： 

$("div[id]")              //選擇所有含有id屬性的div元素 


$("input[name='newsletter']") //選擇所有的name屬性等於'newsletter'的input元素 


$("input[name!='newsletter']") //選擇所有的name屬性不等於'newsletter'的input元素 


$("input[name^='news']") //選擇所有的name屬性以'news'開頭的input元素 


$("input[name$='news']") //選擇所有的name屬性以'news'結尾的input元素 


$("input[name*='man']") //選擇所有的name屬性包含'news'的input元素 


$("input[id][name$='man']") //可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素
7 子元素過濾選擇器： 

$("div span:first-child")          //返回所有的div元素的第乙個子節點的陣列 


$("div span:last-child") //返回所有的div元素的最後乙個節點的陣列 


$("div button:only-child") //返回所有的div中只有唯一乙個子節點的所有子節點的陣列
8 表單元素選擇器： 

$(":input")                  //選擇所有的表單輸入元素，包括input, textarea, select 和 button 


$(":text") //選擇所有的text input元素 


$(":password") //選擇所有的password input元素 


$(":radio") //選擇所有的radio input元素 


$(":checkbox") //選擇所有的checkbox input元素 


$(":submit") //選擇所有的submit input元素 


$(":image") //選擇所有的image input元素 


$(":reset") //選擇所有的reset input元素 


$(":button") //選擇所有的button input元素 


$(":file") //選擇所有的file input元素 


$(":hidden") //選擇所有型別為hidden的input元素或表單的隱藏域
9 表單元素過濾選擇器： 

$(":enabled")             //選擇所有的可操作的表單元素 


$(":disabled") //選擇所有的不可操作的表單元素 


$(":checked") //選擇所有的被checked的表單元素 


$("select option:selected") //選擇所有的select 的子元素中被selected的元素

jq常用選擇器

jquery 使用 css 選擇器來選取 html 元素。div 選取 元素。p.intro 選取所有 class intro 的 元素。p demo 選取所有 id demo 的 元素。jquery 使用 xpath 表示式來選擇帶有給定屬性的元素。href 選取所有帶有 href 屬性的元素。h...

jq選擇器總結

js選擇 var test document.getelementbyid test var parent test.parentnode 父節點 var chils test.childnodes 全部子節點 var first test.firstchild 第乙個子節點 var last te...

JQ常用入口函式 選擇器 篩選選擇器 方法整理

獲取型 布局有鏈式程式設計 設定型 具有鏈式程式設計 當操作是設定型元素 可以一直鏈式程式設計 當操作是獲取型元素 不可以一直鏈式程式設計 斷鏈 1.jq的入口函式 1.function 2.document ready function 3.jquery function 2.dom與就jq互 d...