JQ的基本选择器

最新推荐文章于 2022-04-02 21:34:03 发布

云飞扬°

最新推荐文章于 2022-04-02 21:34:03 发布

阅读量498

点赞数

分类专栏： JQuery 文章标签： JQ的基本选择器

本文链接：https://blog.csdn.net/weixin_44706512/article/details/90314973

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JQ的基本选择器


ID选择器 : #ID的名称
		         
类选择器: 以 . 开头     .类名
		     
元素选择器: 标签的名称
		  
通配符选择器: * 
		       
选择器分组: 选择器1,选择器2（中间以逗号隔开）

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入css文件夹下的.css文件-->
		<link rel="stylesheet" href="../../css/style.css" />
		<!--引入JQ文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			//文档加载事件，页面初始化的操作
			$(function(){
				//初始化操作，给按钮绑定事件
				$("#btn1").click(function(){
					//ID选择器 : #ID的名称
					$("#two").css("background-color","yellow");
				});
				
				$("#btn2").click(function(){
					//类选择器:以.开头    格式： .类名
					$(".mini").css("background-color","yellow");
				});

				$("#btn3").click(function(){
					//元素选择器: 标签的名称
					$("div").css("background-color","yellow");
				});
				
				$("#btn4").click(function(){
				    //通配符选择器: * 
					$("*").css("background-color","yellow");
				});
				
				$("#btn5").click(function(){
				    //通配符选择器: * 
					$(".mini,span").css("background-color","yellow");
				});
			});
		</script>
		
		
		
	</head>
	<body>
		<input type="button" value="ID为two的元素" id="btn1"/> <br />
		<input type="button" value="mini类的所有元素" id="btn2" /><br />
		<input type="button" value="所有div元素" id="btn3" /><br />
		<input type="button" value="通配符选择器" id="btn4" /><br />
		<input type="button" value="mini类和span元素" id="btn5" /><br />
		<div id="one">
			<div class="mini">1-1</div>		
		</div>
		
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
		
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		
		<span id="four">span</span>
	</body>
</html>

运行截图：

点击“ID为two的元素”按钮

点击“mini类的所有元素”按钮

点击“所有div元素“按钮

点击”通配符选择器“按钮

点击”mini类和span元素“按钮

附：style.css文件

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
	padding-left:25px;
}
.onSuccess{
    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
	padding-left:25px;
}
.high{
    color:red;
}


  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;
  }


table		{ border:0;border-collapse:collapse;}
td	{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th			{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even		{ background:#FFF38F;}  /* 偶数行样式*/
.odd		{ background:#FFFFEE;}  /* 奇数行样式*/
.selected		{ background:#FF6500;color:#fff;}