从零玩转jQuery-选择器

基础选择器

• 视频参考第十章-CSS选择器

选择器	名称	描述	返回	示例
#id	id选择器	根据给定的id匹配一个元素	单个元素	$("#box");选取id为box元素
.class	类选择器	根据给定的类名匹配元素	集合元素	$(".box");选取所有类名为box元素
element	元素选择器	根据给定的元素名称匹配元素	集合元素	$("p");选取所有 元素
*	通配符选择器	匹配所有元素	集合元素	$("*");选取所有元素
selector1,selector2,selectorN	并集选择器	将所有选择器匹配到的元素合并后一起返回	集合元素	$("div,p,.box");选取所有 元素,所有 元素和所有类名为box元素

---

层次选择器

• 视频参考第十章-CSS选择器

选择器	名称	描述	返回	示例
$("ancestor descendant")	后代选择器	选取ancestor元素的所有descendant后代标签(不光是儿子,包括孙子/重孙子等)	集合元素	$("div span");选取 元素里所有的元素
$("parent > child")	子元素选择器	找到选取parent 元素中所有直接子元素child(只有儿子,不包括孙子/重孙子等)	集合元素	$("div>span");选取 元素下元素名称是的子元素
$("prev + next")	相邻兄弟选择器	选取prev元素后面紧跟的那个next元素	集合元素	$(".one+div");选取类名为one的下一个同级的 元素
$("prev ~ siblings")	通用兄弟选择器	选取prev元素后面的所有next元素	集合元素	$("#two~div");选取id名为two元素后面所有同级的 元素

序选择器

• 视频参考第十章-CSS选择器

如上内容不再一一赘述,观看第十章-CSS选择器,使用时查询文档即可
做开发是脑力活,我们需要掌握的是解决问题的方法,而不是死记硬背

属性选择器

• 视频参考第十章-CSS选择器

如上内容不再一一赘述,观看第十章-CSS选择器,使用时查询文档即可
做开发是脑力活,我们需要掌握的是解决问题的方法,而不是死记硬背

内容过滤选择器

选择器	描述	返回
:empty	选取不包含子元素或文本为空的元素	集合元素
:parent	选取含有子元素或文本的元素	集合元素
:contains(text)	选取含有文本内容为text的元素	集合元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素

• :empty

    
    
    
    



zs


    lnj

• :parent

    
    
    
    



zs


    lnj

• :contains(text)

    
    
    
    


lnj
zs
lnj

    lnj

• :has(selector)
  • 和:parent区别,parent只要有子元素就会被找到,:has(selector)不仅要有子元素,而且子元素还必须满足我们的条件

    
    
    
    


 
    jjj


    
zs


    

        lnj