jquery选择器学习

最新推荐文章于 2021-02-01 22:02:50 发布

SevenZLL

最新推荐文章于 2021-02-01 22:02:50 发布

阅读量402

点赞数

分类专栏： jquery学习

本文链接：https://blog.csdn.net/sevenzll/article/details/76561325

版权

jquery学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jquery分类

1.基本选择器

2.层次选择器

3.过滤选择器

4.表单选择器

元素选择器

$('a'); //选择所有a元素
$('div');  //选择所有div元素
$('p');  //选择所有p元素

类选择器

$('div.myClass');  //所有拥有myClass类的div元素
$('p.myClass');  //所有拥有myClass类的p元素
$('*.myClass');  //拥有myClass类的所有类型元素

ID选择器

$('#myID');  //id为myID的元素

通常在一个html页面中，一个元素只能拥有一个id，一个id也只能出现一次。

跟css样式选择器差不多的意思

并集选择器

selector1,selector2,...,selectorN

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

$("div,p,.title" )选取所有div、p和拥有class为title的元素

交集选择器

element.class或element#id

匹配指定class或id的某元素或元素集合

$("h2.title")选取所有拥有class为title的h2元素

全局选择器

*

匹配所有元素

$("*" )选取所有元素

层次选择器

层次选择器通过 DOM 元素之间的层次关系来获取元素

后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的<span>元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素<span>
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

有时候我对于后代和子选择器不理解，现在终于搞明白了

<div>
    <p>
        <span></span>
        <a></a>
        <b></b>
    </p>
</div>

p是div的子元素，span是p的子元素，a、b同样是p的子元素

p是div的后代元素，span、a、b都是div的后代元素

后代可认为是包含的所有元素，而子元素只是包含一层的元素

上面的例子可以理解为div是父亲，p是div的儿子

span、a、b是p的儿子即div孙子，但都是div和p的后代

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery层次选择器示例</title>
<style type="text/css">
* {margin:0; padding:0; line-height:30px;}
body {margin:10px;}
#menu {border:2px solid #03C; padding:10px;}
a {text-decoration:none; margin-right:5px;}
span {font-weight:bold; padding:3px;}
h2 {margin:10px 0;}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	 $("h2").click(function(){
		// $("#menu span").css("background-color","#09F");//后代选择器，获取并设置#menu下的<span>元素的背景颜色
		 $("#menu>span").css("background-color","#09F");//子选择器，获取并设置#menu下的子元素<span>的背景颜色
		// $("h2+dl").css("background-color","#09F");//相邻选择器，获取并设置紧接在<h2>元素后的<dl>元素的背景颜色
		 //$("h2~dl").css("background-color","#09F");//同辈选择器，获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色
	 });
});
</script>
</head>
<body>
	<div id="menu">
		<h2>全部旅游产品分类</h2>
		<dl>
			<dt>北京周边旅游<span>特价</span></dt>
			<dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a></dd>
		</dl>
		<dl>
			<dt>景点门票</dt>
			<dd><a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a></dd>
			<dd><a href="#">山水</a> <a href="#">双休</a></dd>
		</dl>
		<span>更多分类</span>
        <span>更多分类</span><span>特价</span>
	</div>
</body>
</html>

这的自己慢慢体会慢慢理解

同辈选择器用来选取目标元素之后的所有同辈元素

相邻选择器用来选取紧邻目标元素的下一个元素

子选择器用来获取元素的子元素

属性选择

属性选择器通过 HTML 元素的属性来选择元素

属性选择器	[attribute]	选取包含给定属性的元素	$(" [href]" )选取含有href属性的元素
	[attribute=value]	选取等于给定属性是某个特定值的元素	$(" [href ='#']" )选取href属性值为“#”的元素
	[attribute !=value]	选取不等于给定属性是某个特定值的元素	$(" [href !='#']" )选取href属性值不为“#”的元素

属性选择器	[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^='en']" )选取href属性值以en开头的元素
	[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
	[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* ='txt']" )选取href属性值中含有txt的元素
	[selector] [selector2] [selectorN]	选取满足多个条件的复合属性的元素	$("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素

后面在补上现在时间是23:14分建军节8/1

SevenZLL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选择器学习

jquery分类1.基本选择器2.层次选择器3.过滤选择器4.表单选择器元素选择器$('a'); //选择所有a元素$('div'); //选择所有div元素$('p'); //选择所有p元素类选择器$('div.myClass'); //所有拥有myClass类的div元素$('p.myClass'); //所有拥有myClass类的p
复制链接

扫一扫

专栏目录