jQuery基本选择器和层级选择器

基本选择器:

基本选择器包括 #id 、element 、.class 、* 、selector1,selector2,selectorN 五种。

 

#id  

根据给定的ID匹配一个元素。

使用任何的元字符作为名称的文本部分, 它必须被两个反斜杠转义:\\

$("#myDiv");   //查找 ID 为"myDiv"的元素。
#foo\\[bar\\];   //查找含有特殊字符的元素

 

element

根据给定的元素标签名匹配所有元素

$("div");    //查找一个 DIV 元素。

 

.class

根据给定的css类名匹配元素。

$(".myClass");   //查找所有类是 "myClass" 的元素.

 

*

匹配所有元素

多用于结合上下文来搜索。

$("*")      //找到每一个元素

 

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。

selector1:   一个有效的选择器

selector2:   另一个有效的选择器

selectorN:   任意多个有效选择器

$("div,span,p.myClass")     //找到匹配任意一个类的元素。

 

层级选择器:

层级选择器包括ancestor descendant 、parent > child 、prev + next 、prev ~ siblings 四种。

 

ancestor descendant 

在给定的祖先元素下匹配所有的后代元素

ancestor  任何有效选择器

descendant   用以匹配元素的选择器,并且它是第一个选择器的后代元素

$("form input")     //找到表单中所有的 input 元素

 

parent > child

在给定的父元素下匹配所有的子元素

parent  任何有效选择器

child  用以匹配元素的选择器,并且它是第一个选择器的子元素

$("form > input")     //匹配表单中所有的子级input元素。

 

prev + next 

匹配所有紧接在 prev 元素后的 next 元素

prev  任何有效选择器

next  一个有效选择器并且紧接着第一个选择器

$("label + input")     //匹配所有跟在 label 后面的 input 元素

 

prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素

prev  任何有效选择器

siblings  一个选择器,并且它作为第一个选择器的同辈

$("form ~ input")      //找到所有与表单同辈的 input 元素
上一篇:K个一组翻转链表


下一篇:jQuery基本选择器和层级选择器