jQuery学习之路（三）高级选择器

最新推荐文章于 2021-02-18 19:52:18 发布

jason123433sadas

最新推荐文章于 2021-02-18 19:52:18 发布

阅读量794

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/u013303425/article/details/28298933

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这是jQuery 第三节课，主要学习jQuery中的高级选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lesson3 基本选择器2</title>
<link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
</head>
<body>
		<div>div</div>
		<div>div</div>
		<div>div</div>
		<div >
			<p>pppppppp</p>
			<p>bbbbbbbbp</p>
			div
		</div>
		<p>p</p>
		<p>p</p>
		<p>p</p>
		<p>p</p>
		<ul id="ul">
			<li><a href="#">#######</a></li>
			<li><a href="#">aaaaaaaaa</a></li>
			<li><a href="#">aaaaaaaaa</a></li>
			<li><a href="#">aaaaaaaaa</a></li>
			<li><a href="#">aaaaaaaaa</a></li>
		</ul>
</body>
</html>

div,p{					//群组选择器
	color:red;
}
ul li a{
	color:green;		//后代选择器
}
ul li+li{				//next选择器
	color:#fof;
}
div > p{					//子代选择器
	color:red;
}
div ~ p{					//所有子代选择器
	color:red;
}

$(function(){
	$("div,p").css("color","blue");		//群组选择器
	
	$("ul li a").css("color","#ff3");		//后代选择器
	$('ul li').find('a').css('color', 'red'); //和后代选择器等价
	
	$('div > p').css('color', '#abcdef');		//子选择器
	$('div').children('p').css('color', '#ff3'); //和子选择器等价
	
	$('div+p').css("color","#f3f");		//next选择器 (div 的相邻p节点)
	$('#div').next('p').css('color', 'red'); //和 next 选择器等价
	$('div~p').css('color', 'red');
	$('#box').nextAll('p').css('color', 'red'); //和 nextAll 选择器等价
	/*在 find()、next()、nextAll()和 children()这四个方法中，如果不传递参数，就相当于传递
	了“*”*/
	//$('ul').prev('p').css("color","blue");		//同级上一个元素
	//$('ul').prevAll('p').css("color","red");	//同级所有上面的元素
	$('ul').prevUntil('p').css('color', '#abcdef'); //同级上非指定元素选定，遇到则停止
	//$('div').nextUntil('p').css('color', 'red'); //同级下非指定元素选定，遇到则停止
	$('div').siblings('p').css('color', '#abcdef');//同级上下所有元素选定
	/*
	 * 警告：切不可写成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”这种形式，因为
	 * prevAll('p')返回的是已经上方所有指定元素，然后再 nextAll('p')选定下方所有指定元素，这
	 * 样必然出现错误。
	 * */
	
});

/*
 * 选择器                      CSS模式                            jQuery 模式                                描述
 * 元素名                     div {}            $('div')           获取所有 div 元素的 DOM 对象
 * ID           #box {}            $('#box')          获取一个 ID 为 box 元素的 DOM 对象
 * 类(class)    .box{}             $('.box')          获取所有class为box的所有DOM对象
 * 群组选择器           span,em,.box {}   $('span,em,.box')  获取多个选择器的 DOM 对象
 * 后代选择器           ul li a {}        $('ul li a')       获取追溯到的多个 DOM 对象
 * 通配选择器           * {}              $('*')             获取所有元素标签的 DOM 对象
 * 后代选择器           ul li a {}        $('ul li a')       获取追溯到的多个 DOM 对象
 * 子选择器                div > p {}        $('div p')         只获取子类节点的多个 DOM 对象
 * next 选择器        div + p {}        $('div + p')       只获取某节点后一个同级DOM对象
 * nextAll 选择器 div ~ p {}        $('div ~ p')       获取某节点后面所有同级DOM对象
 */

未完待续。。。。。。。