`

jquery基础之选择器

jQueryCSSJavaScriptHTML金融 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF"  id="b2"/>
		 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>
		 <input type="button" value=" 改变所有元素的背景色为 #00FF33"  id="b4"/>
		 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  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>
		
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		<span class="spanone">    span
		</span>
		<span class="mini">    span
		</span>
		
		 <input type="text" value="zhang" id="username" name="username" />
		 
	</body>
<script language="JavaScript">
//<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>
	$("#b1").click(function(){
		$("#one").css("background","red");
	});
	
//<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF"  id="b2"/>
  	$("#b2").click(function(){
		$("div").css("background","red");
	});
//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>
  	$('#b3').click(function(){
		$(".mini").css("background","red");
	});

//<input type="button" value=" 改变所有元素的背景色为 #00FF33"  id="b4"/>
 	$("#b4").click(function(){
		$("*").css("background","red");
	});
//<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>
 	$("#b5").click(function(){
		$("span,[id=two]").css("background","red");
	});
</script>
   
</html>





 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 含有属性title 的div元素"  id="b1"/>
		 <input type="button" value=" 属性title值等于test的div元素"  id="b2"/>
		 <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>
		 <input type="button" value=" 属性title值 以te开始 的div元素."  id="b4"/>
		 <input type="button" value=" 属性title值 以est结束 的div元素.."  id="b5"/>
		 <input type="button" value="属性title值 含有es的div元素."  id="b6"/>
		 <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>
		 
		 <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
		 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one   div
		     
		 </div>
		
		 <div id="two" class="mini"  title="test">
	    	   id为two   class是 mini  div  title="test"
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="visible" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" title="test02">
		 	  class是 one    title="test02"
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		
		<div class="visible" >
		 	  这是隐藏的
		</div>
		
		<div class="one">
			
			
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		
		
	</body>
<script language="JavaScript">
//<input type="button" value=" 含有属性title 的div元素"  id="b1"/>
 $("#b1").click(function(){
 	$("div[title]").css("background","red");
 });
//<input type="button" value=" 属性title值等于test的div元素"  id="b2"/>
$("#b2").click(function(){
	$("div[title=test]").css("background","red");
});
//<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>

$("#b3").click(function(){
	$("div[title!=test]").css("background","red");
});
//<input type="button" value=" 属性title值 以te开始 的div元素."  id="b4"/>
$("#b4").click(function(){
	$("div[title^=te]").css("background","red");
});

//<input type="button" value=" 属性title值 以est结束 的div元素.."  id="b5"/>
$("#b5").click(function(){
	$("div[title$=est]").css("background","red");
});

//<input type="button" value="属性title值 含有es的div元素."  id="b6"/>

$("#b6").click(function(){
	$("div[title*=es]").css("background","red");
});
//<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>
	$("#b7").click(function(){
		$("div[id][title*=es]").css("background","red");
	});
</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF"  id="b2"/>
		 <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>
		 <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>
		 <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>
		 <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>
		 <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>
		 <input type="button" value=" 改变所有的标题元素的背景色为 #0000FF"  id="b9"/>
		 <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF"  id="b10"/>
		
		
		
 
		 <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>
		
		<br>
			<div id="mover" >
			 	  动画
			</div>
		<br>
		
		
	</body>
<script language="JavaScript">
	function ca(){
	   $("#mover").slideToggle("slow",ca);
	}

    ca();
	
//<input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>
 	$("#b1").click(function(){
		$("div:first").css("background","red");
	});
 
//<input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF"  id="b2"/>
 	$("#b2").click(function(){
		$("div:last").css("background","red");
	});
 
//<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>
 	$("#b3").click(function(){
		$("div:not(.one)").css("background","red");
	});
//<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>
	$("#b4").click(function(){
		$("div:even").css("background","red");
	});

//<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>
  	$("#b5").click(function(){
		$("div:odd").css("background","red");
	});

//<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>
  
	$("#b6").click(function(){
		$("div:gt(3)").css("background","red");
	});
//<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>
  	$("#b7").click(function(){
		$("div:eq(3)").css("background","red");
	});

//<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>
  
	$("#b8").click(function(){
		$("div:lt(3)").css("background","red");
	});

//<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF"  id="b9"/>
  $("#b9").click(function(){
		$(":header").css("background","red");
	});
//<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF"  id="b10"/>
$("#b10").click(function(){
		$(":animated").css("background","red");
	});
</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
		 <input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
		 <input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
		 <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>
		 

		 <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
		 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one   div
		     
		 </div>
		
		 <div id="one" class="mini"  title="test">
	    	   id为two   class是 mini  div  title="test"
		       <div  class="mini" >class是 mini</div>
		</div>
		 <div class="one"  title="test">
		       <div  class="mini" >class是 mini******</div>
		</div>
		
		 <div class="visible" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" title="test02">
		 	  class是 one    title="test02"   (**************
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >cdddddddlass是 mini</div>
		</div>
		
		
		<div class="visible" >
		 	  这是隐藏的
		</div>
		
		<div class="one">
			
			
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		
		
	</body>
<script language="JavaScript">	
//<input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
/*
 * 注意 子元素和父元素之间的约束必须打空格
 */
 	$("#b1").click(function(){
		$("div[class='one'] :nth-child(2)").css("background","red");
	});
//<input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
  	$("#b2").click(function(){
		$("div[class='one'] :nth-child(1)").css("background","red");
	});

//<input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
  	$("#b3").click(function(){
		$("div[class='one'] :last-child").css("background","red");
	});

//<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>
  $("#b4").click(function(){
		$("div[class='one'] :only-child").css("background","red");
	});
</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>
		 <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>
		 <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色"  id="b5"/>
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one   div
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <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 class="one">
			
			
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		
		
	</body>
<script language="JavaScript">
//<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>
	$("#b1").click(function(){
		$("div:contains('di')").css("background","red");
	});

//<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>
	$("#b2").click(function(){
		$("div:empty").css("background","red");
	});
//<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>
   
	$("#b3").click(function(){
		$("div:has(.mini)").css("background","red");
	});
//<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>
	$("#b5").click(function(){
		$("div:parent").css("background","red");
	});
	
//<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色"  id="b5"/>	
    $("#b4").click(function(){
		$("div:not(:contains('di'))").css("background","red");
	});
</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"/>
		 <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"  id="b4"/>
		 <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"  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>
		
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		<span class="spanone">    span
		</span>
		
	</body>
<script language="JavaScript">
	
//<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF"  id="b1"/>
  $("#b1").click(function(){
     $("body div").css("background","red");
  });

//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"/>
  $("#b2").click(function(){
     $("body >div").css("background","red");
  });

//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"/>
   $("#b3").click(function(){
    	$("#one + div").css("background","red");
   });

//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"  id="b4"/>
   $("#b4").click(function(){
     $("#two ~div").css("background","red");
   });

//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"  id="b5"/>
   $("#b5").click(function(){
     $("#two div").css("background","red");
   });
	
</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
		 <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
 
 
         <input type="text" value="不可用值1" disabled="disabled"> 
		 <input type="text" value="可用值1" >
		 <input type="text" value="不可用值2" disabled="disabled">
		 <input type="text" value="可用值2" >
		 
		 <br>
		 <input type="checkbox" name="items" value="美容" >美容
		 <input type="checkbox" name="items" value="IT" >IT
		 <input type="checkbox" name="items" value="金融" >金融
		 <input type="checkbox" name="items" value="管理" >管理
		 
		 <br>
		  <input type="radio" name="sex" value="男" >男
		  <input type="radio" name="sex" value="女" >女
         <br>
		 
		  <select name="job" id="job" multiple="multiple" size=4>
          	<option>程序员</option>
			<option>中级程序员</option>
			<option>高级程序员</option>
			<option>系统分析师</option>
          </select>
		    
          <select name="edu" id="edu">
          	<option>本科</option>
			<option>博士</option>
			<option>硕士</option>
			<option>大专</option>
          </select>
	   
	  		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <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>
		
	</body>
<script language="JavaScript">
//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
  $("#b1").click(function(){
   	  /*
   	   *     <input type="text" value="不可用值1" disabled="disabled"> 
			 <input type="text" value="可用值1" >
			 <input type="text" value="不可用值2" disabled="disabled">
			 <input type="text" value="可用值2" >
   	   */
	  
	 $("input[type='text']:enabled").val('ssssssss');
	  
  });
  
//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
  $("#b2").click(function(){
   	  /*
   	   *     <input type="text" value="不可用值1" disabled="disabled"> 
			 <input type="text" value="可用值1" >
			 <input type="text" value="不可用值2" disabled="disabled">
			 <input type="text" value="可用值2" >
   	   */
	  
	  $("input[type='text']:disabled").val("}}}}}}}");
  });
  
  
//<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
  $("#b3").click(function(){
	 var $ckElement = $("input[type='checkbox']:checked");
	 alert($ckElement.length); 
  });

//<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
  $("#b4").click(function(){
   	  /*
   	      <select name="job" id="job" multiple="multiple" size=4>
          	<option>程序员</option>
			<option>中级程序员</option>
			<option>高级程序员</option>
			<option>系统分析师</option>
          </select>
		    
          <select name="edu" id="edu">
          	<option>本科</option>
			<option>博士</option>
			<option>硕士</option>
			<option>大专</option>
          </select>
   	   */
	  
	  var $selects = $("select option:selected");
	  $selects.each(function(index,domEle){
	  	/*
	  	 * 注意text属性是jquery的  不是dom的
	  	 */
	  	alert($(domEle).text());
	  });
  });
</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF"  id="b2"/>
		 <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
		 <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>
		 
		 <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
		 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one   div
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="visible" >
		 	    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 class="visible" >
		 	  这是隐藏的
		</div>
		
		<div class="one">
			
			
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		
		
	</body>
<script language="JavaScript">
//<input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF"  id="b1"/>
  $("#b1").click(function(){
  	$("div:visible").css("background","red");
  });
  
//<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF"  id="b2"/>
  $("#b2").click(function(){
  	$("div:hidden").show();
  });
 
//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
  
  	 /*
  	  *  <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
  	  */
	$("#b3").click(function(){
		var $inputEle = $("input:hidden");
		$inputEle.each(function(index,domEle){//注意第二个参数为dom对象 不是jquery对象
			alert(index);
			alert(domEle.value);
		});
	});
 
//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>
  $("#b4").click(function(){
  	 /*
  	  *  <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
  	  */
	 //$hid 集合
	 var $hid=$("input:hidden");
	 
	 /*
	  * 使用jquery中的全局函数,使用$.调用
	  * $.each($hid,function(index,domEle){
	  *   * 通用例遍方法，可用于例遍对象和数组
	  *   * $hid:要遍历的集合
	  *   * function(index,domEle)
	  *       * index:遍历的对象的索引
	  *       * domEle:保存每次被遍历的对象,dom对象
	  */
	 
	 $.each($hid,function(index,domEle){
	 	alert($(this).val())
	 })
  });	
	
	
</script>
   
</html>

 

分享到：
| Ajax
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery基础选择器练习题

    本篇文章将深入探讨jQuery的基础选择器及其在实际编程中的应用，以帮助你更好地理解和掌握这些知识点。 首先，我们来了解一下jQuery的基本选择器。它们是用于选取HTML元素的最基础工具，包括： 1. **ID选择器**: ...

    jQuery选择器基础知识

    其中，选择器是jQuery的核心功能之一，用于高效地选取DOM元素，从而实现对网页内容的控制和操作。本篇文章将深入探讨jQuery选择器的基础知识，包括其类型、用法和实际应用。 ### 1. 基本选择器 基本选择器包括ID...

    jquery4种选择器

    这些选择器是jQuery高效地定位页面元素的基础，让我们逐一了解它们。 首先，ID选择器是通过CSS的`#`符号来指定一个元素的唯一标识符。在jQuery中，如果你知道某个元素具有特定的ID，你可以用`$("#myID")`来快速获取...

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性，构建了一个适用于混合应用程序（Hybrid App）的周历选择器组件。 1. **周历选择器设计**： - 周历选择器通常用于日程管理或时间规划应用，显示一周的日期...

    一个jQueryUI时间选择器

    在使用jQuery UI时间选择器之前，你需要确保已经安装了jQuery和jQuery UI的基础库。你可以通过CDN链接或者下载库文件到本地引入。例如，在HTML文件中添加以下代码： ```html &lt;script src="https://code.jquery....

    JQuery选择器测试 离线版

    在jQuery中，选择器分为多种类型，包括基础选择器、类别选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器和通用选择器等。 1. **基础选择器**：主要包括`$()`，用于选取一个或多个DOM元素...

    jQuery选择器全解.

    选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景，熟悉并...

    jquery 城市选择器

    《jQuery城市选择器详解》 在网页开发中，经常需要实现一种功能，即用户可以选择他们的所在省份和城市，这在注册、填写地址等场景中尤为常见。jQuery城市选择器就是解决这一需求的有效工具，它利用JavaScript和...

    jquery样式选择器插件源码demo

    其中，样式选择器是jQuery的核心功能之一，它允许我们根据CSS样式规则来选取DOM元素，极大地提高了我们的工作效率。本文将深入探讨一个仅30行左右的jQuery样式选择器插件源码，揭示其背后的巧妙设计和实现原理。 ...

    jquery语法与选择器介绍 带有案例

    本教程将深入探讨jQuery的语法与选择器，并通过实际案例进行解析。** ### jQuery语法基础 jQuery的核心是它的链式操作和简洁的语法。在jQuery中，通常以`$`函数开始，它可以用来选择DOM元素、执行操作或创建新元素...

    jQuery颜色选择器

    jQuery颜色选择器是一种在网页开发中常用的前端工具，它极大地简化了用户在网页上选取颜色的过程。这个插件，称为colpick，是基于jQuery库构建的，为网页设计师和开发者提供了一个直观、易于集成的颜色选择界面。...

    jquery基础 选择器 事件

    在本文中，我们将深入探讨jQuery中的选择器和事件，这些都是jQuery基础的重要组成部分。 **jQuery选择器** jQuery的选择器是基于CSS选择器进行扩展的，允许开发者更加高效地选取DOM元素。以下是一些基本和高级选择...

    jQuery基础和jQuery选择器教程

    jQuery的选择器是其强大之处，它们基于CSS选择器，但扩展了一些额外的功能。 1. **基本选择器**: 包括 `ID选择器 (#)`, `类选择器 (.)`, 和 `元素选择器 (*)`，如： ```javascript $("#myID"); // ID选择器 $("....

    jquery基础教程中文版2015

    **jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程，旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...

    jquery双向选择器代码

    双向选择器则在此基础上增加了更复杂的逻辑，它可以同时选取两个或多个相关的元素。 例如，我们可以使用`:has()`、`:next()`、`:prev()`、`:parent()`、`:children()`等选择器来实现双向关联。`:has()`用于选取包含...

    jquery mobile datepicker 手机端日期选择器

    《jQuery Mobile Datepicker：手机端日期选择器深度解析》 在移动应用开发中，日期选择器是一个不可或缺的组件，它提供了用户友好的界面，让用户能够方便地选择日期。jQuery Mobile Datepicker 是一个专为手机端...

    jQuery日期选择器插件

    **jQuery日期选择器插件**是一种广泛应用于网页开发中的组件，它允许用户通过交互式的日历界面方便地选择日期。这种插件极大地提高了用户在网页上输入日期的体验，尤其适用于需要用户输入生日、预约日期或者截止日期...

    PPT和案例\jQuery选择器

    jQuery选择器是jQuery库的核心特性之一，它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格，并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明： **1. 基本...

    JQuery基础、选择器.docx

    **jQuery基础与选择器** jQuery 是一个非常流行的 JavaScript 库，由 John Resig 在2006年创建，因其简洁的语法和强大的功能而受到广大开发者喜爱。jQuery 的核心理念是“write less, do more”，它通过封装...

    jQuery表情图片选择器代码.rar

    在这个表情选择器中，Bootstrap可能被用来创建基础的布局结构，如网格系统、按钮和表单元素，确保组件在不同设备上都能良好展示。 jQuery是JavaScript的一个库，它简化了DOM操作、事件处理、动画和Ajax交互。在这个...

Magicbox
Global site tag (gtag.js) - Google Analytics