16
2019
05

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

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

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

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