IT虾米网

jQuery选择器详解

flyfish 2019年04月28日 编程语言 241 0

1、基本选择器

名称 返回值 说明
#myid <jQuery对象> 匹配一个id为myid的元素
element <jQuery对象> 数组 匹配所有的element元素
.myclass <jQuery对象> 数组 匹配所有的class为myclass的元素
* <jQuery对象> 数组 匹配文档中所有的元素,包括html、head、body\
selector1…selectorN <jQuery对象> 数组 匹配所有满足selector1、selector2或selectorN的元素

2、层次选择器

名称 返回值 说明
elemenParent elementChild <jQuery对象> 数组 匹配elementParent下的所有子元素elementChild。如:
$("div p")选择所有div下的p元素
elemenParent > elementChild <jQuery对象> 数组 匹配elementParent下的子元素elementChild。如:
$("div > p")选择所有上级元素为div的p元素
prev+next <jQuery对象> 数组 匹配prev统计之后紧邻的元素next
prev~siblings <jQuery对象> 数组 匹配prev同级之后所有平级的元素siblings

3、基本滤镜选择器

例如:
名称 返回值 说明
:first <jQuery对象> 匹配第一个元素
:empty <jQuery对象> 数组 匹配所有没有子元素(包括文本内容)的元素
都是以冒号开始的
详细划分起来,可以分为
位置滤镜选择器::first、:last、:even、:odd、:eq(index)、:gt(index)以及:lt(index)
隐藏显示滤镜选择器::empty、:parent、:hidden以及:visible
内容限制过滤选择器::contains(text)、:has(selector)、:not(selector)、:header以及:animated
调用方式: $("div.test:contains('Lorem')").addClass("green");

3、子元素滤镜选择器

主要有四种形式:
名称 返回值 说明
E:nth-child(index/even/odd/equation) <jQuery对象> 数组 匹配所有E在其父元素下满足(index/even/odd/equation)条件的集合
注:下表从1开始,括号中各个选项中一次只能选择一个,equation是一个表达式
E: first-child <jQuery对象> 数组 如匹配所有E在其父元素下是第一个子元素的集合
E: last-child <jQuery对象> 数组 如匹配所有E在其父元素下是最后一个子元素的集合
E: only-child <jQuery对象> 数组 如匹配所有E是其父元素的唯一子元素的集合
调用方式: $("ul li:first-child").addClass("green");
4、表单滤镜选择器

5、属性滤镜选择器

名称 返回值 说明
[attribute] <jQuery对象> 数组 匹配拥有attribute属性的元素
[attribute=value] <jQuery对象> 数组 匹配属性attribute为value的元素
[attribute!=value] <jQuery对象> 数组 匹配属性attribute不为value的元素
[attribute^=value] <jQuery对象> 数组 匹配属性attribute的值以value开始的元素
[attribute$=value] <jQuery对象> 数组 匹配属性attribute的值以value结尾的元素
[attribute*=value] <jQuery对象> 数组 匹配属性attribute的值包含value的元素

调用方式:$("input[class]").addClass("red");
还有使用效果叠加的方式:
$("input[class][name=firstname]").addClass("green");

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

HTML选择器详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。