jQuery选择器分类及详解

发布于 2 个月前 作者 sinazl 68 次浏览 最后一次编辑是 2 个月前 来自 分享

一、选择器分类 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标签进行显示
回到顶部