html和jQuery常用的选择器

最新推荐文章于 2021-06-04 09:33:55 发布

Sesshoumaru华

最新推荐文章于 2021-06-04 09:33:55 发布

阅读量332

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_38921377/article/details/73771150

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>css.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
	<style type="text/css">
		/*id选择器*/
		#myDiv{color:red}
		/*类选择器*/
		.myDiv2{color:green}
		/*标签选择器*/
		span{color:gray}
		/*属性选择器*/
		[my='a']{color:blue}
		/*后代选择器*/
		div p{color:skyblue}
	</style>
	
	<script type="text/javascript" src="../../jquery-2.2.4.js"></script>
	<script type="text/javascript">
		//jquery的选择器,沿用css3的选择器语法,半增强
		//作用是为了获取满足选择器条件的dom元素集合(返回值就是数组)
		//通过jquery选择器获取到的数组,并不是js的数组,是jquery拓展后的数组
		
		$(function(){
			/*id选择器*/
			var myDiv=$("#myDiv");
			//alert(myDiv);
			/*类选择器*/
			var myDiv2=$(".myDiv2");
			//alert(myDiv2);
			//标签选择器
			var spanArray=$("span");
			//alert(spanArray);
			//属性选择器
			var p=$("[my]");
			p.text("一二三");
			var p=$("[my='b']");
			p.text("四五六");
			//后代选择器
			$("div a").text("google");
			
			
			$("table tr:even").css("backgroundColor","gray");
			$("table tr:first").css("backgroundColor","yellow");
		})
		
		
	</script>
  </head>
  
  <body>
 
	<div id="myDiv">hello jquery</div>
	
	<div class="myDiv2">hello world</div>
	
	<span>hello</span>
	
	<p my="a"></p>
	
	<p my="b"></p>
	
	<div>
		<a href="www.google.com"></a>
	</div>
	<div>
		<p>whos your daddy</p>
	</div>
	 <table border="1" width="800" height="400">
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	
  </body>
</html>