|
一、选择器分类 1.基本选择器 2.层级选择器 3.属性选择器 4.过滤选择器 5.可见选择器 二、选择器详解 *1.基本选择器 1）标签选择器 语法：$("h2") 选取HTML中所有的h2标签 2）id选择器 语法：$("#one") 选取id为one的元素（可以很好的获取单个元素）与css中格式相同 3）类选择器 语法：$(".one") 选取class为one的所有元素 与css中格式相同 4）并集选择器 语法： $("div,p,.title") 选取所有div、p和class为title的元素（注意：每个元素以逗号（,）分隔开 5）交集选择器 语法：$("h2 .title) 选取所有拥有class为title 的h2元素 6）全局选择器 语法：$("*") 选取所有元素（注意：* 代表匹配所有） *2.层级选择器 1）后代选择器 语法：$("#menu span")选取id为menu的所有后代为<span>的元素（不仅包括子代，孙子代。。。也包括） 例： <div id="menu"> <div class="one"> <SPAN></SPAN> </div> <SPAN> <SPAN></SPAN> </SPAN> </div> 2）子代选择器 语法：$("parent>child") 如$("#menu>span") 选取id为menu的所有子类元素 （注意：用>对不同元素进行分隔） 例： <div id="menu"> <div class="one"> <span></span> <span></span> </div> <SPAN> <span></span> </SPAN> <div></div> <SPAN></SPAN> </div> 3）相邻选择器 语法：$("div+span")选取div之后的同辈的相邻元素 （注意：用+对不同元素进行分隔） 4）同辈选择器 语法：$("div~span")选取div的所有同辈元素 （注意：用~对多个元素进行分隔） *3.属性选择器 （注意属性选择器都需要使用方括号[]对元素进行包裹） 1.不给定条件的属性选择器 语法：$("[href]")选取含有属性href的所有元素 2.给定单条件的属性选择器 1）选取属性为特定值得属性 语法：$("[href='#']")选取href属性值为“#”的元素 2）选取属性不等于某值的属性 语法：$("[href!='#']")选取属性href属性值不等于“#”的所有元素 3）选取属性值以特定值开头的选择器 语法：$("[href^='en']")选取href属性值以en开头的属性（注意：^是以什么开头的的意思） 4）选取属性值以特定值结尾的选择器 语法：$("[class$='en']")选取class以en结尾的元素。（注意：$的意思是以什么结尾） 5）选取属性值包含特定值的选择器 语法：$("[class*='en']")选取class包含en的元素。 3.给定多条件的属性选择器 1）选取满足多条件的复合属性选择器 语法：$("li[id][title=新闻要点]")选取含有id属性和title属性为“新闻要点”的<li>元素。 *4.过滤选择器 1.过滤选择器通过特定的过滤规则来筛选元素。其语法特点是使用“:” 1.基本过滤选择器：注意：索引值从0开始 1）:first 选取第一个元素 $("li:first") 2) :last 选取最后一个元素 $("li:last") 3) : odd 选取索引为奇数项的元素 $("li: odd") 4）: even 选取索引值为偶数项的元素 $("li:even") 5) : eq(index) 选取索引值等于index的元素 $("li:eq(1)") 6) : gt(index) 选取索引值大于index的元素 $("li:gt(1)") 7) : lt(index) 选取索引值小于index的元素 $("li:lt(5)") 8) :not(selector) 9) :header 10):focus 2.可见性过滤选择器 1）:visible 选取所有可见的元素 例：$("p:visible").hide() 令所有显示的p标签隐藏 2）:hidden 选取所有隐藏的元素 例：$(" P : hidden").show() 令所有隐藏的p标签进行显示 |
