欢迎光临
我的个人博客网站

jQuery选择器之基本选择器(1)


jQuery选择器之基本选择器(1)

基本选择器主要有五种:分别为#id选择器、.class选择器、element 选择器、*选择器和组合选择器。

1、#id选择器

根据id查找标签对象

2、element选择器

根据标签名查找标签对象

3、.class选择器

根据class查找标签对象

4、*选择器

表示任意的,所有的元素

5、组合选择器

合并多个选择器的结果并返回

主要代码实例如下:

<html> 	<head> 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 		<title>Untitled Document</title> 		<style type="text/css"> 			div, span, p { 			    width: 140px; 			    height: 140px; 			    margin: 5px; 			    background: #aaa; 			    border: #000 1px solid; 			    float: left; 			    font-size: 17px; 			    font-family: Verdana; 			} 			 			div.mini { 			    width: 55px; 			    height: 55px; 			    background-color: #aaa; 			    font-size: 12px; 			} 			 			div.hide { 			    display: none; 			} 		</style> 		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script> 		<script type="text/javascript"> 			$(function () { 				//1.选择 id 为 one 的元素 "background-color","#bbffaa" 				$("#btn1").click(function () { 					// css()方法设置标签的背景颜色 					// 第一个参数是样式名( 修改什么样式 ) 					// 修改为什么效果值 					$("#one").css("background-color","#bbffaa"); 				}); 				//2.选择 class 为 mini 的所有元素 				$("#btn2").click(function () { 					$(".mini").css("background-color","#bbffaa"); 				});  				//3.选择 元素名是 div 的所有元素 				$("#btn3").click(function () { 					$("div").css("background-color","#bbffaa"); 				});  				//4.选择所有的元素 				$("#btn4").click(function () { 					$("*").css("background-color","#bbffaa"); 				});  				//5.选择所有的 span 元素和id为two的元素 				$("#btn5").click(function () { 					$("span,#two").css("background-color","#bbffaa"); 				}); 			});  			 		</script> 	</head> 	<body> <!-- 	<div> 		<h1>基本选择器</h1> 	</div>	 -->	 		<input type="button" value="选择 id 为 one 的元素" id="btn1" /> 		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /> 		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" /> 		<input type="button" value="选择 所有的元素" id="btn4" /> 		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /> 		 		<br> 		<div class="one" id="one"> 			id 为 one,class 为 one 的div 			<div class="mini">class为mini</div> 		</div> 		<div class="one" id="two" title="test"> 			id为two,class为one,title为test的div 			<div class="mini" title="other">class为mini,title为other</div> 			<div class="mini" title="test">class为mini,title为test</div> 		</div> 		<div class="one"> 			<div class="mini">class为mini</div> 			<div class="mini">class为mini</div> 			<div class="mini">class为mini</div> 			<div class="mini"></div> 		</div> 		<div class="one"> 			<div class="mini">class为mini</div> 			<div class="mini">class为mini</div> 			<div class="mini">class为mini</div> 			<div class="mini" title="tesst">class为mini,title为tesst</div> 		</div> 		<div style="display:none;" class="none">style的display为"none"的div</div> 		<div class="hide">class为"hide"的div</div> 		<div> 			包含input的type为"hidden"的div<input type="hidden" size="8"> 		</div> 		<span class="one" id="span">span元素</span> 	</body> </html>  
赞(0) 打赏
未经允许不得转载:张拓的天空 » jQuery选择器之基本选择器(1)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏