jQuery学习之路（四）之过滤选择器

最新推荐文章于 2021-02-24 03:24:42 发布

weixin_30691871

最新推荐文章于 2021-02-24 03:24:42 发布

阅读量79

点赞数

原文链接：http://www.cnblogs.com/mqxnongmin/p/10923115.html

版权

今天是第四课主要学习过滤选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lesson4 过滤选择器</title>
<link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
</head>
<body>
		<h1>这是第四课</h1>
		<h2>这是第四课</h2>
		<h3>这是第四课</h3>
		<h4>这是第四课</h4>
		<h5>这是第四课</h5>
		<ul>
			<li><a href="#">#######</a></li>
			<li class='aaa'><a href="#">aaaaaaaaa0</a></li>
			<li class='aaa'><a href="#">aaaaaaaaa1</a></li>
			<li ><a href="#">aaaaaaaaa2</a></li>
			<li><a href="#">aaaaaaaaa3</a></li>
		</ul>
		<ul>
			<li><a href="#">#######</a></li>
			<li class='aaa'><a href="#">aaaaaaaaa1</a></li>
			<li><a href="#">aaaaaaaaa2</a></li>
			<li class='aaa'><a href="#">aaaaaaaaa3</a></li>
			<li><a href="#">aaaaaaaaa4</a></li>
		</ul>
		
		<input type='text'  />
		<div id="div1">
				这是隐藏内容！

<input type='text' hidden="hidden" /> </div> <div id="div2"> 这是隐藏内容！ <input type='text' hidden="hidden" /> </div> </body> </html> <pre name=css" class="plain"> #div1{ display:none; } #div2{ visibility:hidden; }

$(function(){
	/*过滤选择器简称：过滤器。它事实上也是一种选择器，而这样的选择器相似与 CSS3
	*(t.mb5u.com/css3/)里的伪类，能够让不支持 CSS3 的低版本号浏览器也能支持。和常规
	*选择器一样。jQuery 为了更方便开发人员使用，提供了非常多独有的过滤器。
	*/
	//$("li:first").css("background-color","red");     //选取第一个元素
	//$("li:last").css("background-color","red");     //选取最后一个元素
	//$("li:not(.aaa)").css("background-color","red"); //选取calss不是aaa的li元素
	//$("li:even").css("background-color","red");		//选取索引是偶数的li元素
	//$("li:odd").css("background-color","red");		//选取索引值为奇数的li元素
	//$("li:eq(2)").css("background-color","red");		//选取第三个li元素
	//$("li:gt(2)").css("background-color","red");		//选取从第三个元素開始后的全部元素(即四到最后一个)
	//$("li:lt(2)").css("background-color","red");		//选取从第一个元素到第三个元素（不包括第三个元素）
	//alert($(":header").get(0));						//返回[object HTMLHeadingElement]
	//$(":header").css("background-color","red");			//选取h1-h6的标题元素
	//alert($("div:hidden").get(0).firstChild.nodeValue);	//:hidden 包括<input type='hidden'  />
	//alert($(":visible").size());							//获取全部可见元素
	/*for(var i in $("document")){
		document.write(i+'<br>');
	}*/
	/*alert($("input:hidden").size());	//:hidden 包括<input type='hidden'  />visibility:hidden;和display：none;
	$("div:hidden").show("2000",function(){
		$(this).css("display","block");						//this指向div：hidden 所选取的元素
	});
	$("div:animated").css("background-color","red");		//选取正在运行动画的元素
	*/
	/*$("input").focus();					//注意仅仅有为input绑定focus事件后才干才干用$("input:focus")获取到元素
	$("input:focus").css("background-color","red");*/
	//$("li:first-child").css("background-color","red");			//获取每一个父元素的第一个子元素
	//$("li:last-child").css("background-color","red");			//获取每一个父元素的最后一个子元素
	//$(":only-child").css("background-color","red");				//获取仅仅有一个子元素的元素
	//$('li:nth-child(even)').css("background-color","red");			//获取自己定义的子元素的元素odd/even/eq(index)
	/*alert($("li").is(function(){
		return $(this).hasClass("aaa");
	}));*/
	//$("li").slice(0,2).css("background-color","red");	
	//$("ul").filter('.aaa').end().css("background-color","red");
	alert($('div').contents().length);
	/*jQuery 在选择器和过滤器上，还提供了一些经常使用的方法，方便我们开发时灵活使用。
	 * 方法名                  jQuery                    		语法 说明                                       返回
	 * is(s/o/e/f)    $('li').is('.red')     传递选择器、DOM、jquery 对象或是函数来匹配元素结合                    集合元素
	 * hasClass(class)$('li').eq(2).hasClass('red')		事实上就是 is("." + class) 			       集合元素
	 * slice(start, end) $('li').slice(0,2)  选择从 start 到 end 位置的元素，假设是负数。则从后開始    	       集合元素
	 * filter(s/o/e/f)   $('li').filter('.red').end()$('div').find('p').end()获取当前元素前一次状态                集合元素
	 * contents() 		$('div').contents()		获取某元素以下全部元素节点，包括文本节点。
	 * 							假设是 iframe，则能够查找文本内容	               集合元素
	 */
	
});

/*
*过滤器名             		jQuery语法 				说明 		 		            返回
*:first 			$('li:first') 		选取第一个元素 						单个元素
*:last 				$('li:last') 		选取最后一个元素 					单个元素
*:not(selector) 	        $('li:not(.red)') 	选取 class 不是 red 的 li元素 			        集合元素
*:even 				$('li.even') 		选择索引(0 開始)是偶数的全部元素 		        集合元素
*:odd 				$('li:odd') 		选择索引(0 開始)是奇数的全部元素 		        集合元素
*:eq(index) 		        $('li:eq(2)') 		选择索引(0 開始)等于 index 的元素 		        单个元素
*:gt(index) 		        $('li:gt(2)') 		选择索引(0 開始)大于 index 的元素 		        集合元素
*:lt(index) 		        $('li.lt(2)') 		选择索引(0 開始)小于 index 的元素 		        集合元素
*:header 			$(':header') 		选择标题元素，h1 ~ h6 				        集合元素
*:animated 			$(':animated') 		选择正在运行动画的元素				        集合元素
*:focus 			$(':focus') 		选择当前被焦点的元素 					集合元素
*:hidden 			$(':hidden') 		选取全部不可见元素 					集合元素
*:visible 			$(':visible') 		选取全部可见元素 					集合元素
*子元素过滤器名             			   jQuery语法 				   说明 		 		   返回
*:first-child 					$('li:first-child') 	        获取每一个父元素的第一个子元素			集合元素
*:last-child 					$('li:last-child') 	        获取每一个父元素的最后一个子元素 			集合元素
*:only-child 					$('li:only-child') 	        获取仅仅有一个子元素的元素 			集合元素
*:nth-child(odd/even/eq(index))			$('li:nth-child(even)')		获取每一个自己定义子元素的元素(索引值从 1 開始计算)	集合元素
*/


                                                                     <span style="font-size:18px;color:#FF0000;">未完待续。

。

。。。。。。

</span>

转载于:https://www.cnblogs.com/mqxnongmin/p/10923115.html

weixin_30691871

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习之路（四）之过滤选择器

今天是第四课主要学习过滤选择器<!DOCTYPE html><html><head><meta charset="UTF-8"><title>lesson4 过滤选择器</title&...
复制链接

扫一扫