4-2. jQuery选择器（关系选择器、伪元素和伪类选择器）

最新推荐文章于 2024-04-16 12:23:43 发布

ROBIN.FANG

最新推荐文章于 2024-04-16 12:23:43 发布

阅读量1.4k

点赞数

分类专栏： jQuery Library

本文链接：https://blog.csdn.net/weixin_38134491/article/details/88726445

版权

jQuery Library 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

关系选择器

1）<selector1>空格<selector2> 在给定的祖先元素下匹配所有的后代元素

alert($('div p').length);

2）<selector1> > <selector2> 在给定的父元素下匹配所有的子元素

alert($('#div>p').length);

3）<selector1> + <selector2> 匹配所有紧接在 <selector1> 元素后的 <selector2>

alert($('p+a').length);

4）<selector1> ~ <selector2> 匹配所有在<selector1> 元素之后的所有同辈 <selector2> 元素

alert($('#div1~p').length);

伪元素和伪类选择器

1）:checked 用于表单，匹配所有被选中元素(复选框、单选框等，不包括select中的option)

<script type="text/javascript">
	$(function(){
		alert($(':checked').length);
	});
</script>

<form>
	<div>你喜欢的运动是什么？</div>
	A:跑步<input type="checkbox"/>
	B:羽毛球<input type="checkbox" />
	C:网球<input type="checkbox" />
	D:台球<input type="checkbox" />
	E:篮球<input type="checkbox" />
	<input type="radio" />
</form>

2）:disabled 用于表单，找到被禁用的表单

<form>
	<input type="text" disabled="disabled"/>
</form>

3）:enabled 用于表单，匹配所有可用元素

4）:focus 主要用于表单，选取得到焦点的元素

setTimeout("alert($(':focus').length),300");

5）:required 用于表单，选取具有required属性的元素

6）:optional 用于表单，选取缺少required属性的元素

7）:empty 匹配所有既不包含子元素也不包含文本的空元素

alert($('#title1:empty').length);

8）:first-child 选取第一个子元素

9）:last-child 选取最后一个子元素

10）:nth-child(n) 选取元素的第n个子元素(从1开始计数)

n可为even或odd

11）:nth-last-child(n) 选取元素的倒数第n个子元素

12）:nth-of-type(n) 选择同属于一个父元素之下，并且标签名相同的元素中的第n个(注：从1开始计数)

13）:nth-last-of-type(n) 选择同属于一个父元素之下，并且标签名相同的元素中的倒数第n个

14）:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配

15）:only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素

16）:root 选取文档的根元素，在html文档中即是<html>元素

ROBIN.FANG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4-2. jQuery选择器（关系选择器、伪元素和伪类选择器）

关系选择器<selector1> <selector2> 在给定的祖先元素下匹配所有的后代元素alert($('div p').length);<selector1> > <selector2> 在给定的父元素下匹配所有的子元素alert($('#div>p').length);<sel...
复制链接

扫一扫