選擇器 · PHP筆記

## **form的表單元素獲取：** ``` 查找所有選中的select option元素 $("select option:selected") //查找所有選中的復選框元素 $("input:checked") //查找所有擁有disabled="disabled"的不可用的input元素 $("input:disabled") //匹配所有可用元素 $("input:enabled")//查找所有沒有disabled屬性的表單元素 //匹配所有 input, textarea, select 和 button 元素 $(:input) //匹配所有 type屬性為text的 input文本框 $(":text") //匹配所有 type屬性為password的 input :password //匹配所有 type屬性為radio的 input :radio //匹配所有 type屬性為checkbox的 input :checkbox //匹配 type="submit" 的input或者button :submit //匹配所有 type屬性為image的 input :image //匹配所有 type屬性為reset的 input 重置按鈕 :rese //匹配所有 type屬性為button的 input按鈕或者button 如：<button></button><input type="button" /> :button //匹配所有 type屬性為file的 input :file ``` ## **通用** ``` //基本 #id:$("#name") element:$("div") .class:$(".content") *:$("*") selector1,selector2,selectorN:$("div,span,#name,.content") 多選 //層級祖先元素后代元素$("p span") 父元素 > 子元素 prev + next ：$("label + input")匹配label 后面的第一個同輩input 元素指定元素 ~ 同輩元素 : 匹配指定元素的所有同輩元素 //基本篩選器 :first：$('li:first')匹配指定li的第一個li :last：獲取匹配總舵元素中的最后那個元素 :not(selector)：$("input:not(:checked)")匹配未選中的input 即匹配所有沒有checked屬性的input :even 偶數 :odd 奇數 :eq(index)：$("tr:eq(1)") 匹配眾多tr中的第2個元素（索引從0開始） :gt(index)：匹配所有大于給定索引值的元素 :lt(index)：匹配所有小于于給定索引值的元素 $("tr:lt(2)") 查找第一第二行，即索引值是0和1，也就是比2小 :focus ：匹配當前獲取焦點的元素 :header：匹配如 h1, h2, h3之類的標題元素 :lang1.9+ :animated ：匹配所有正在執行動畫效果的元素 :root 1.9+ ：匹配<html>元素 :target 1.9+ //內容 :contains(text) : $("div:contains('John')") 匹配包含John字符串的所有元素 :empty ：查找所有不包含子元素或者文本的空元素 $("td:empty") 查找所有不包含子元素或者文本的空元 :has(selector) ：$("div:has(p)") 包含 p 元素的 div :parent ：$("td:parent") 查找所有含有子元素或者文本的 td 元素 //可見性 :hidden :visible //屬性 [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] //復合屬性選擇器，需要同時滿足多個條件時使用 [attrSel1][attrSel2][attrSelN]:$("input[id][name$='man']") 匹配有id和name屬性且name屬性的值以man結尾的input //子元素 :first-child:$("ul li:first-child") 選取有父元素的li且li在父元素的第一個位置 :first-of-type:$("span:first-of-type")等價于:nth-of-type(1)//1.9+ 匹配E的父元素的第一個E類型的孩子示例區別： <div> <p>第一個子元素</p> <h1>第二個子元素</h1> <span>第三個子元素</span> </div> p:first-child? 匹配到的是p元素,因為p元素是div的第一個子元素； h1:first-child? 匹配不到任何元素，因為在這里h1是div的第二個子元素，而不是第一個； span:first-child? 匹配不到任何元素，因為在這里兩個span元素都不是div的第一個子元素； p:first-of-type? 匹配到的是p元素,因為p是div的所有類型為p的子元素中的第一個； h1:first-of-type? 匹配到的是h1元素，因為h1是div的所有類型為h1的子元素中的第一個； span:first-of-type? 匹配到的是第三個子元素span。這里div有兩個為span的子元素，匹配到的是它們中的第一個。 :last-child :last-of-type//1.9+ :nth-child :nth-last-child()//1.9+ :nth-last-of-type()//1.9+ :nth-of-type()//1.9+ :only-child :only-of-type//1.9+ ```