1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

jquery选择器 子元素 3

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<script src="jquery-1.11.3.min.js.js"></script>      		<script type="text/javascript">      			$(function(){      //				选择div中p标签的父级的第一个子元素      //				$("div p:first-child").css({'color':'blue','font-size':'22px'});      //				选择div中span标签的父级的第一个子元素,父级的第一个子元素须是span,否则不会被选中     last-child 是最后一个      //				$("div span:first-child").css({'color':'blue','font-size':'22px'});      //				选择div中的span标签的父级元素的第一个span标签       type判断类型      last-of-type	是最后一个      //				$("div span:first-of-type").css({'color':'blue','font-size':'22px'});      //				选择div中的span标签的父级元素的第2(n)个span标签          nth-last-of-type()这个是倒数     last最后      //				$("div span:nth-of-type(2)").css({'color':'blue','font-size':'22px'});      //				选择的是div里span标签的父级元素的第一个子元素     eq或者数级是从0开始算的      nth的序号是从1开始算的      //				注意:第一个子元素  子元素如果是span,那么就选中,如果不是,就不选      //				$("div span:nth-child(1)").css({'color':'blue','font-size':'22px'});      //				可以这样选第2个,如果是就选中       nth-last-child()这个是倒数来的      //				$("div span:nth-child(2)").css({'color':'blue','font-size':'22px'});      //				选择div 是独生子的p标签,一个DIV里只有一个p标签,没有其它任何标签的,   有其它标签不会选中      //				$("div p:only-child").css({'color':'blue','font-size':'22px'});      //				of-type 把不符合条件的都过滤掉      //				选择的是父级元素唯一p标签的p标签,不管div里有多少个标签,只要p标签是唯一的就会被选中      				$("div p:only-of-type").css({'color':'blue','font-size':'22px'});      			})      		</script>      	</head>      	<body>      		<div>      			<p>独生子 唯一的</p>      			<a href=""></a>      		</div>      		<div>      			<p>我是p标签0</p>      			<span>我是span标签1</span>      			<p>我是p标签2</p>      			<span>我是span标签3</span>      			<p>我是p标签4</p>      			<span>我是span标签5</span>      			<p>我是p标签6</p>      			<span>我是span标签7</span>      		</div>      		----------------------------------------------------------      		<div>      			<p>我是p标签0</p>      			<span>我是span标签1</span>      			<p>我是p标签2</p>      			<span>我是span标签3</span>      			<p>我是p标签4</p>      			<span>我是span标签5</span>      			<p>我是p标签6</p>      			<span>我是span标签7</span>      		</div>      	</body>      </html>

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

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: