Jquery选择器(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/erchouchou/article/details/81537073

基础选择器和层次选择器省略

基本选择器:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
	
	<ul>
	    <li>list item 1</li>
	    <li>list item 2</li>
	    <li>list item 3</li>
	    <li>list item 4</li>
	    <li>list item 5</li>
	</ul>
	
	<input type="checkbox" checked/>
	<input type="checkbox" checked/>
	<input type="checkbox"/>
	
	<table border="1">
	  <tr><td>line1[0]</td></tr>
	  <tr><td>line2[1]</td></tr>
	  <tr><td>line3[2]</td></tr>
	  <tr><td>line4[3]</td></tr>
	  <tr><td>line5[4]</td></tr>
	  <tr><td>line6[5]</td></tr>
	</table>	
	
	<h1>h1</h1>
	<h2>h2</h2> 
	<h3>h3</h3>
	
	<p>p</p>
	
	<!-- 基本选择器 -->
	<script type="text/javascript">
		//1)查找UL中第一个LI元素的内容
			//html()要用于html/jsp,不能用在xml
			//text()既能用于html/jsp,且能用于xml
			//alert( $("ul li:first").text() );
		
	  	//2)查找UL中最后个元素的内容
	  	    //alert( $("ul li:last").text() );
	  	
	  	//4)查找表格的索引号为1、3、5...奇数行个数,索引号从0开始
	  		//alert($("table tr:odd").size());
	  	
	  	//5)查找表格的索引号为2、4、6...偶数行个数,索引号从0开始
	  		//alert($("table tr:even").size());
	  	
	  	//6)查找表格中第二行的内容,从索引号0开始,这是一种祖先 后代 的变化形式
	  		//html():强调的是标签中的内容,即便标签中的子标签,也会显示出来
	  		//text():强调的是标签中的文本内容,即便标签中的子标签,也只会显示出文本内容,不会显示子标签
	  		//alert($("table tr:eq(1)").text());
	  	    //alert($("table tr:odd:first").text());
	  	//7)查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
	  		//alert($("table tr:gt(0)").size());
	  	
	  	//8)查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
	  		//alert($("table tr:lt(4)").size());
	  	
	  	//9)给页面内所有标题<h1><h2><h3>加上红色背景色,且文字加蓝色
	  		//$(":header").css("background-color","red").css("color","blue");
	  	
	  	//10)查找所有[未]选中的input为checkbox的元素个数
			//alert($(":checkbox:not(:checked)").size());
			
	</script>
	
  </body>
</html>

内容选择器:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <style type="text/css">
    	.myClass{
    		font-size:44px;
    		color:blue
    	}
    </style>
  </head>
  <body>
	
	<div><p>John Resig</p></div>
	<div><p>George Martin</p></div>
	<div>Malcom John Sinclair</div>
	<div>J. Ohn</div>
	<div></div>

	<p></p>
	<p></p>
	<!-- 内容选择器 -->
	<script type="text/javascript">
	
		//1)查找所有包含文本"John"的div元素的个数
		    //alert($("div:contains('John')").size());
	  	//2)查找所有p元素为空的元素个数
	  		//alert( $("p:empty").size() );
	  	
	  	//3)给所有包含p元素的div元素添加一个myClass样式
	  		$("div:has(p)").addClass("myClass");
	  	
	  	//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
	  		//alert( $("p:parent").size() );
	  		
	</script>

  </body>
</html>

 

阅读更多
换一批

没有更多推荐了,返回首页