JQuery选择器

最新推荐文章于 2023-04-23 17:34:04 发布

hyhcloud

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量169

点赞数

分类专栏： JQuery、AJAX 文章标签： JQuery选择器

本文链接：https://blog.csdn.net/Huangyuhua068/article/details/89330767

版权

JQuery、AJAX 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.1 基本选择器

给按钮注册点击事件
js方式：js对象.onclick = function(){};
jq方式：jq对象.click(function(){});

js方式1：js对象.style.backgroundColor="red";
js方式2：js对象.style="background-color:red";
jq方式1：jq对象.css("background-color","red");
jq方式2：jq对象.css("backgroundColor","red");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}	
	 </style>
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		 <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
		 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
		 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		
 
		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>
		 
	   <div id="one">
	    	 id为one       
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		 </div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		<div id="mover" >
		 	  div  动画
		</div>

		<span class="spanone">class为spanone的span元素</span>
		<span class="mini">class为mini的span元素</span>
		

		<input type="text" value="zhang" id="username" name="username">
	
	</body>
	
	<script type="text/javascript">
// <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
//给b1注册点击事件
$("#b1").click(function () {
	$("#one").css("background-color","red");
});


// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
$("#b2").click(function () {
	$("div").css("background-color","red");
});


// <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
$("#b3").click(function () {
    $(".mini").css("background-color","red");
});


// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
$("#b4").click(function () {
    $("span,#two").css("background-color","red");
});

	</script>
   
</html>

1.2 层级选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
	 </style>
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
		 <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
		 <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 红色"  id="b3"/>
		 <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色"  id="b4"/>
		 <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红色"  id="b5"/>
		
 
		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>
		 
	     <div id="one">
	    	 id为one  
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one">
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		<div id="mover" >
		 	  动画
		</div>

		<span class="spanone">    span
		</span>
		
	</body>
	
	<script type="text/javascript">
	
		//改变 <body> 内所有 <div> 的背景色为红色
		$("#b1").click(function () {
			$("body div").css("background-color","red");
        });

		// 改变 <body> 内子 <div> 的背景色为 红色
		$("#b2").click(function () {
			$("body>div").css("background-color","red");
        });

		//改变 id 为 one 的下一个 <div> 的背景色为 红色
		$("#b3").click(function () {
            $("#one + div").css("background-color","red");
        });

		//改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色
		$("#b4").click(function () {
			$("#two ~ div").css("background-color","red");
        });

		//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红色
		$("#b5").click(function () {
            //$("#two").siblings()，获取id为two的所有兄弟元素。
            $("#two").siblings("div").css("background-color","red");
        });


	</script>
   
</html>