`

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基础选择器练习题

    JQ 选择器大全包含：基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手

    jQuery选择器基础知识

    这是一份比较全面的jQuery选择器基础知识，包括源代码和相应的ppt，供大家分享

    jQuery基础和jQuery选择器教程

    jQuery基础+选择器 教程，适合入门初学者了解jQuery...

    jQuery 选择器 操作DOM 事件处理 动画基础

    jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础

    jQuery 选择器案例.rar

    在这个选择器案例中包含了 3 个基础案例，分别是 呼吸灯特效、手风琴特效、突出展示特效。某些图片可能套用了别人的图片，所有代码是原创。配套与jQuery课程资源。选择器课件详见 ...

    jquery基础 选择器 事件

    自己总结的一些事件,CSS,HTML,触发事件 ，以及选择器的使用

    jQuery选择器总结

    jQuery功能强大，被越来越多的企业使用，但是jQuery中的选择器是jQuery的基础，很多初学者感觉jQuery的选择器很杂乱难以掌握，这里通过一张思维导图可以助你快速掌握jQuery选择器。

    最全面的jQuery基础知识

    看完“最全面的jQuery基础知识”文件包，你就能详细了解jQuery的代码规则。 文件包更是你进行jQuery开发的参考手册。 文件包内实例丰富，将其拷贝到单独的html文件中即可执行。 文件包包含一个模板文件：template....

    Jquery选择器教程

    Jquery选择器教程详细的描述了Jquery选择器的使用。

    JQuery基础、选择器.docx

    。

    JQuery基础、选择器.pdf

    。

    jQuery基础案例分析（初学者入门精通最佳案例）

    2.jQuery选择器 3.jQuery中的DOM操作 4.jQuery中的事件和动画 5.jQuery对表单、表格的操作及更多应用 6.jQuery与Ajax的应用 7.jQuery插件的使用和写法 8.用jQuery打造个性网站 9.jQuery Mobile 10.jQuery各个版本的...

    jQuery基础入门

    内容简介 1.jQuery的由来及简介 2.jQuery对象和DOM对象 3.jQuery选择器 4.jQuery中的DOM操作 5.使用jQuery创建动画效果

    JQuery选择器

    基础的JQuery选择器 适用于初学者 里面有详细的JQuery选择器的讲解

    jQuery基本选择器和层次选择器学习使用

    主要介绍了jQuery基本选择器和层次选择器的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    JQuery中基础过滤选择器用法实例分析

    主要介绍了JQuery中基础过滤选择器用法,涉及jQuery属性选择及样式操作的相关技巧,需要的朋友可以参考下

    python 零基础学习篇web前端开发基础JQuery3 jquery选择器 .mp4

    python 零基础学习篇

    JQuery基础案例大全

    JQuery是现在最流行的Ajax框架；本案例是本人亲手总结的教学案例。基本包括的Jquery的各个方面的基础应用。包括：选择器；Dom操作；事件；动画；Ajax操作；是一个非常容易上手的代码案例。送给初学者。--邵老师

    Jquery01.md

    本篇文章记录了Jquery基础学习过程中的Jquery选择器以及核心函数。Jquery选择器：基本元素选择器，层级选择器，过滤选择器，子元素过滤选择器，表单过滤选择器，属性选择器，表单对象过滤选择器。

    js学习笔记——（15）jQuery选择器、样式操作、效果

    1.1jQuery基础选择器 原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。 $(‘选择器’) //里面选择器直接写css选择器即可，但是要加引号 原创文章 16获赞 11...

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