第03章常规选择器（3）

最新推荐文章于 2024-07-30 10:56:44 发布

iteye_17658

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量48

点赞数

分类专栏：阅-JQ 文章标签： xhtml javascript ViewUI

阅-JQ 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>常规选择器</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<!--
<div id="box">
	<p>p</p>
    <p>p</p>
    <p>p</p>
    <div>
    	<p>p</p>
    	<p>p</p>
    	<p>p</p>
    </div>
</div>

<p>p</p>
<p>p</p>
<p>p</p>
<div id="box">div</div>
<span>span</span>
<p>p</p>
<p>p</p>
<p>p</p>
-->
<strong>strong</strong>
<strong>strong</strong>
<strong>strong</strong>
<p>p</p>
<strong>strong</strong>
<strong>strong</strong>
<strong>strong</strong>
<div id="box">div</div>
<strong>strong</strong>
<strong>strong</strong>
<strong>strong</strong>
<p>p</p>
<strong>strong</strong>
<strong>strong</strong>
<strong>strong</strong>


</body>
</html>

style.css

/* CSS Document */
/*
#box > p{ color:#c00;}
div + p{ color:#c00;}
#box ~p{ color:#c00;}
*/

demo.js

$(function(){
	//$('#box p').css('color','red');
	//find
	//$('#box').find('p').css('color','red');
	//$('#box > p').css('color','red');
	//$('#box').children('p').css('color','#f60');
	//$('div + p').css('color','red');
	//next() 方法
	//$('div').next('p').css('color','#f60');
	//$('#box ~p').css('color','red');
	//$('#box').nextAll('p').css('color','#f60');
	//$('div').next().css('color','#f60');
	//$('div').next('*').css('color','#f60');//next()等选择器方法不传参，就相当于传递了 * 号
	//如果 * 在某个环境里有所浪费，建议尽量不去使用
	//prev
	//$('#box').prev('p').css('color','#f60');
	//prevAll
	//$('#box').prevAll('p').css('color','#f60');
	//$('#box').nextAll('p').css('color','#f60');
	//$('#box').prevAll('p').nextAll('p').css('color','#f60');//错误形式
	//siblings 上下同级所有
	//$('#box').siblings('p').css('color','#f60');
	//nextUntil()方法 同级下非指定元素选定，遇到则停止
	$('#box').nextUntil('p').css('color','#f60');
	//prevUntil()方法 同级上非指定元素选定，遇到则停止
	$('#box').prevUntil('p').css('color','#f60');
});

iteye_17658

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第03章常规选择器（3）

index.html&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;he...
复制链接

扫一扫