12
2019
09

jquery筛选1

<!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(){    
//				找#dd里面的序号是第2个p标签(0开始数)    
//				$('#dd p').eq(2).css({'color':'blue','font-size':'22px'});    
//				#dd p标签的第1个    first  是1     last()是最后一个    
//				$('#dd p').first().css({'color':'blue','font-size':'22px'});    
//				给所有元素加事件    
//				$('#dd p').click(function(){    
////					获得当前被点击的元素是否有class是tt      hasClass 判断是不是有一个class是tt    
//					var kk = $(this).hasClass('tt');    
//					if (kk) {    
//					alert('这里面有一个class是tt的');	
    
//					}    
//					
    
//				})    
//				找到#dd里面的所有p标签,然后从找到的结果中筛选(filter 过滤)出符合class是tt的p标签    
//				$('#dd p').filter('.tt').css({'color':'blue','font-size':'22px'})    
//				给所有元素加事件    
//				$('#dd p').click(function(){    
////					获得当前被点击的元素是否有id是nn      is判断是不是有一个is值是nn    
//					var kk = $(this).is('#nn');   //也可以这样选,比上面的那个class更灵活 var kk = $(this).is('.tt');    
//					if (kk) {    
//					alert('这里面有一个id值是nn的');	
    
//					}    
//				})    
//				获得#dd里面p标签有'span' 标签的       has:有    
//				$('#dd p').has('span').css({'color':'blue','font-size':'22px'});    
//				next:紧邻   这个可以直接选p标签元素    
//				$('#dd p').next('#nn').css({'color':'blue','font-size':'22px'});    
//				选择的是#dd里所有的p标签,但是排除掉class是tt的标签    not:排除    
//				$('#dd p').not('.tt').css({'color':'blue','font-size':'22px'});    
//				slice 截取     截取#dd里的2~5号p标签,包含2号,不包含5号    
				$('#dd p').slice(2,5).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>    
	</body>    
</html>

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

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

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

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