jQuery选择器

1、Write Less, Do More.Lession02 jQuery选择器1. 常用CSS选择器选择器语法示例标签选择器E CSS规则规则tdfont-size:14px;ID选择器#IDCSS规则规则#headerfont-size:14px;类选择器E.classNameCSS规则规则.dreamfont-size:14px;群组选择器E1,E2,E3CSS规则规则td,p,div,amargin:0px;后代选择器E FCSS规则规则#link acolor:red;通配选择符*CSS规则*font-size:14px;2.jQuery基本选择器选择器jQuery返回标签选择器Ele

2、ment$(“tagName”)单个元素ID选择器#id$(“#ID”)集合元素类选择器.class$(“.demo”)集合元素群组选择器Selector1,selector2$(“div,span,p,myClass”)集合元素通配选择符$(“*”)集合元素01基本选择器基本选择器.html3.层次选择器选择器jQuery返回$ ( “ a n c e s t o r descendant ”)$(“div span”)选取选取div中所有的中所有的span集合元素$(“parent child”)$(“div span”)选取选取div元素下名元素下名为为span的子元素的子元素集合元素$

3、(“prev + next”)$(“.one + div”)选取选取class为为.one的的下一个下一个div元素元素集合元素$(“.one + div”)$(“.one”).next(“div”)$(“prev siblings”)$(“#twodiv”)选取选取id为为two的元素的元素后面所有后面所有div兄弟元素兄弟元素集合元素$(“#prevdiv”)$(“#prev”).nextAll(“div”)02层次选择器层次选择器.html4.基本过滤选择器过滤器jQuery返回:frist$(“div:first”)选取所有选取所有元素中第一个元素中第一个元元素素单个元素:last$(

4、“div:last”)选取所有选取所有元素中最后一个元素中最后一个单个元素:not(selector)$(“input:not(.myClass)”)选取选取class不是不是myClass的的元素元素集合元素:even$(“input:even”)选取索引是偶数的选取索引是偶数的元素元素(索索引从引从0开始开始)集合元素:odd$(“input:odd”)选取索引是奇数的选取索引是奇数的元素元素(索索引从引从0开始开始)集合元素:eq(index)$(“input:eq(1)”)选取索引等于选取索引等于1的的元素元素单个元素:gt(index)$(“input:gt(1)”)选取索引大于选取

5、索引大于1的的元素元素集合元素:lt(index)$(“input:lt(4)”)选取索引小于选取索引小于4的的元素元素集合元素:header$(“:header”)选取所有标题元素选取所有标题元素集合元素:animated$(“div:animated”)选取正在执行动画的元素集合元素03基本过滤选择器基本过滤选择器5. 内容过滤选择器过滤器过滤器jQuery返回返回:contains(text)$(“div:contains(我)”)选取含有文本“我”的元素集合元素集合元素:empty$(“div:empty”)选取不包含子元素（文本元素）的空元素集合元素集合元素:has(selector

6、)$(“div:has(p)”)选取含有 元素的元素集合元素集合元素:parent$(“div:parent”)选取拥有子元素选取拥有子元素(包括文本包括文本元素元素)的的元素元素集合元素集合元素04内容过滤选择器内容过滤选择器.html6.属性过滤选择器过滤器jQuery返回attribute$(“divid”)选取所有拥有选取所有拥有id属性的元素属性的元素集合元素attribute=value#(“divtitle=test”)选取元素属性选取元素属性title值为值为test的的元素元素集合元素attribute!=value$(“divtitle!=test”)选取元素属性选取元素属

7、性title值不为值不为test（注意：没有（注意：没有title属性的元素也会被选取属性的元素也会被选取）集合元素attribute=value$(“div=test”)选取属性选取属性title值为值为test开头的开头的div元素元素集合元素attribute$=value$(“div$=test”)选取属性选取属性title值为值为test结尾的结尾的div元素元素集合元素attribute*=value$(“div*=test”)选取属性选取属性title值中包含值中包含test的的div元素元素集合元素selectorselector2selectorN$(“dividtitle$

8、=test”)选取拥有id属性，且title属性值以test结尾的所有div元素集合元素05属性选择器属性选择器.html7.子元素过滤选择器过滤器jQuery返回:nth-child(index/even/odd/equation):eq(index)只匹配一个元素，而只匹配一个元素，而:nth-child将为每一个父元将为每一个父元素匹配子元素，并且素匹配子元素，并且:nth-child(index)下标从下标从1开始，而开始，而:eq(index)是从是从0开始开始:nth-child(even) 选取每个父元素下的索引值是偶数的元素选取每个父元素下的索引值是偶数的元素:nth-chil

9、d(odd) 选取每个父元素下的索引值是奇数的元素选取每个父元素下的索引值是奇数的元素:nth-child(3n)选取每个父元素下的索引值是选取每个父元素下的索引值是3的倍数的元的倍数的元素素集合元素:first-child:frist只返回单个元素，而只返回单个元素，而:first-child选择符将为每一父元选择符将为每一父元素匹配第一个子元素。素匹配第一个子元素。例如例如$(“ul li:first-child”);选取每个选取每个中的第一个中的第一个元元素素注意注意$(“ul li :first-child”);选取每个选取每个中的每一个中的每一个元素中元素中的第一个子元素的第一个子元

10、素注意第二条语句注意第二条语句li和和:first-child之间有空格意义完全不一样之间有空格意义完全不一样了了集合元素:last-child:last只返回单个元素而只返回单个元素而:last-child选择器将为每个父元素匹选择器将为每个父元素匹配最后一个子元素配最后一个子元素例如例如$(“ul li:last-child”);选择每个选择每个中最后一个中最后一个元素元素集合元素:only-child$(“ul li:only-child”)在中选取是唯一子元素的元素。06子元素过滤选择器子元素过滤选择器.html8.表单对象属性过滤选择器过滤器jQuery返回:enabled$(“#f

11、orm1 :enabled”)选取选取id为为form1 的表的表单内所有可用的元素单内所有可用的元素集合元素:disabled$(“#form1 :disabled”)选取选取id为为form2的表的表单内所有不可用的元素单内所有不可用的元素集合元素:checked$(“input:checked”)选取所有被选中的选取所有被选中的元素元素集合元素:selected$(“select :selected”)选取所有被选中的选项元素下拉列表集合元素07表单对象属性过滤选择器表单对象属性过滤选择器.html9.表单选择器过滤器jQuery返回:input$ ( “ : i n p u t ” ) 选 取 所 有选 取 所 有和和集合元素:text$(“:text”)选取所有单行文本框选取所有单行文本框集合元素:password$(“:password”) 选取所有密码框选取所有密码框集合元素:radio$(“:radio”)选取所有单选框选取所有单选框集合元素:checkbox$(“:checkbox”)选取所有复选框选取所有复选框:submit$(“:submit”)选取所有提交按钮