jquery选择器 子元素 3

时间:6年前   阅读:4914

<!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,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:护卫神JSP大师修改MySQL数据库的data目录路径

下一篇:50etf期权有什么值得我们投资的地方?

网友评论

请先 登录 再评论,若不是会员请先 注册