选择器 · 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+ ```