18
2020
04

jquery筛选2

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<script type="text/javascript" src="jquery-1.11.3.min.js.js"></script>    
		<script type="text/javascript">    
			$(function(){    
//				children:孩子们 子元素    
//				$('#dd').children('p').css({'color':'blue','font-size':'22px'});    
//				选择的是#dd里所有的子代p标签(儿子辈,孙子辈,重孙子辈.....都能被选中)    
				$('#dd').find('p').css({'color':'blue','font-size':'22px'});    
//				next选择的是紧邻在.tt后面的p标签    
//				$('.tt').next('p').css({'color':'blue','font-size':'22px'});    
//				nextAll选择的是紧邻在.tt后面所有同级别(兄弟元素)的p标签    
//				$('.tt').nextAll('p').css({'color':'blue','font-size':'22px'});    
//				parent:父亲;父级    选择的是.tt父级元素    
//				$('.tt').parent().css({'color':'blue','font-size':'22px'});    
//				选择的是.tt的所有父级(祖辈的)元素中的class是.kk的元素    
//				$('.tt').parents('.kk').css({'color':'blue','font-size':'22px'});    
//				(这个常用,记好) siblings:兄弟    选择的是.tt的所有兄弟元素,(包括div span ul反正是兄弟的都会被选中)    
//				$('.tt').siblings().css({'color':'blue','font-size':'22px'});    
//				这里写个p,就是选标签名是p的所有兄弟元素(兄弟元素都会被选中,除自已以外没选到)    
//				$('.tt').siblings('p').css({'color':'blue','font-size':'22px'});    
			})    
		</script>    
	</head>    
	<body>    
		<div id="dd">    
			<p>准备更多的实践一些小的项目,来磨练自己的抽象总结能力1</p>    
			<p>准备更多的实践一些小的项目,来磨练自己的抽象总结能力2</p>    
			<p>准备更多的实践一些小的项目,来磨练自己的抽象总结能力3 <span>这个是有span标签的</span></p>    
			<p>准备更多的实践一些小的项目,来磨练自己的抽象总结能力4</p>    
			<p class="tt">准备更多的实践一些小的项目,来磨练自己的抽象总结能力5</p>    
			<p>准备更多的实践一些小的项目,来磨练自己的抽象总结能力6</p>    
			<p id="nn">准备更多的实践一些小的项目,来磨练自己的抽象总结能力7</p>    
			<p>准备更多的实践一些小的项目,来磨练自己的抽象总结能力8</p>    
			<div>    
			<p>ddddddddddd</p>    
			<p>ddddddddddd</p>    
			<p>ddddddddddd</p>    
			</div>    
		</div>    
		<div>    
			<p>这里也是p标签1</p>    
			<p>这里也是p标签2</p>    
			<p>这里也是p标签3</p>    
			<p>这里也是p标签4</p>    
			<p>这里也是p标签5</p>    
			<p>这里也是p标签6</p>    
		</div>    
	</body>    
</html>

原文链接:https://www.qiquanji.com/post/7776.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

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