17.jQuery

27164 ワード
Java開発 
# jQuery  

  jQuery        JavaScript  

          ,         

  jQuery  :

*   CSS3  
*         ,     .  2.0    ,    IE678
*       ,      
* AJAX    

##     

```javascript

    /**
    *    jQuery  
    *         : jQuery()
    *         ,          
    *                 
    *             $
    */
    $( function(){
        alert("jquery");
     });
        /*window.onload = function(){
        alert(1);
        }

        window.onload = function(){
        alert(2);
    }*/

```

## DOM   jQuery  

### DOM  

  document         ,  DOM  , document.getElementById()

### jQuery  

    jQuery         ,  jQuery  , $("#id")

  : DOM   jQuery      

```javascript
function fn(){
    //dom  ,          
    var user = document.getElementById("user");
    alert(user.value);

    //jQuery  ,          
    var $user = $("#user");
    alert( $user.val() );
}
```

### DOM   jQuery    

```javascript

			function fn(){
				//dom  ,          
				var user = document.getElementById("user");
				//alert(user.value);
				
				//jQuery  ,          
				var $user = $("#user");
				//alert( $user.val() );
				
				//DOM    jQuery  ,   
				//alert(  $(user).val() )
				
				//jQuery    DOM  ,   
				//jQuery         ,        DOM  
				alert ( $user[0].value );
	
			}
			
		
```



## jQuery   

       :              html  

   css      

###      

* **      $("   ")**
* **id    $("#id   ")**
* **class    $(".class   ")**

```javascript
	
    //<input type="button" value="   id   one            "  id="b1"/>
    //jQuery      (    )
     $("#b1").click( function(){
     	//css  ,     ,CSS       
     	 $("#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").css("background-color","red");
		$("#two").css("background-color","red");*/
		$("#two ,span").css("background-color","red");
	});

	
```

###      

* **$("A B")  A       B  **
* $("A>B")  A          B
* $("A+B")  A            B  
* $("A~B")  A          B  

```javascript

	   //<input type="button" value="    <body>     <div>        "  id="b1"/>
	   $("#b1").click(function(){
	   	  $("body div").css("background-color","red");
	   })
	   
	   //<input type="button" value="    <body>    <div>         "  id="b2"/>
		 $("#b2").click(function(){
		 	  $("body>div").css("background-color","red");
		 });
		 
		 //<input type="button" value="    id   one      <div>         "  id="b3"/>
		 $("#b3").click(function(){
		 	  $("#one+div").css("background-color","red");
		 });
		 
		 //<input type="button" value="    id   two           <div>           "  id="b4"/>
		 $("#b4").click(function(){
		 	  $("#two~div").css("background-color","red");
		 });
		 
		 //<input type="button" value="    id   two       <div>            "  id="b5"/>
		 $("#b5").click(function(){
		 	/**
		 	 *  id="two"        
		 	 *      ,    
		 	 */
		 	$("#two").siblings("div").css("background-color","red");
		 });
		
	
```



###      

* **         ：$("A[   ]")**
* **             ：$("A[   = ]")** 
*               ：$("A[   != ]")
*            9     ：$("A[   ^= ]")
*                 ：$("A[   $= ]")
*              ：$("A[   *= ]")
* **       ，        ：$("A[   != ][   != ][   != ]")

```javascript
	
	
		 //<input type="button" value="     title  div        "  id="b1"/>
		 $("#b1").click(function(){
		 		//     ,    title
		 		$("div[title]").css("background-color","red");
		 });
		 
		// <input type="button" value="   title   test div        "  id="b2"/>
		 $("#b2").click(function(){
		 	  //      test   
		 	  $("div[title=test]").css("background-color","red");
		 });
		 
		// <input type="button" value="   title    test div  (    title      )      "  id="b3"/>
		$("#b3").click(function(){
			 //      test
			 $("div[title!=test]").css("background-color","red");
		});
		
		// <input type="button" value="   title   te    div        "  id="b4"/>
		$("#b4").click(function(){
			 //    te   
			  $("div[title^=te]").css("background-color","red");
		});
	
		// <input type="button" value="   title   est    div        "  id="b5"/>
		$("#b5").click(function(){
			 //    est   
			  $("div[title$=est]").css("background-color","red");
		});
		
    // <input type="button" value="  title    es div        "  id="b6"/>
    $("#b6").click(function(){
			 //     es 
			  $("div[title*=es]").css("background-color","red");
		});
		
		// <input type="button" value="     id div  ，          title   “es”  div         "  id="b7"/>
		 $("#b7").click(function(){
			  $("div[id][title*=es]").css("background-color","red");
		});
	
   
```

###      

*               ：  :first
*                ：  :last
*             ： :not(selecter) 
* **  ，  0     ：  :even**
* **  ，  0     ：  :odd**
*      ：  :eq(index) 
*   n ：  :gt(index)
*   n ：  :lt(index) 
*      （
 /
 ....） :header  ---     
*        :animated  ---             

```javascript
	
		
// <input type="button" value="       div           "  id="b1"/>
  $("#b1").click(function(){
  	 $("div:first").css("background-color","red");
  });
  
// <input type="button" value="        div           "  id="b2"/>
  $("#b2").click(function(){
  	 $("div:last").css("background-color","red");
  });
  
// <input type="button" value="   class   one     div           "  id="b3"/>
  $("#b3").click(function(){
  	$("div:not(.one)").css("background-color","red");
  });
  
// <input type="button" value="           div           "  id="b4"/>
  $("#b4").click(function(){
  	$("div:even").css("background-color","red");
  });
  
// <input type="button" value="           div           "  id="b5"/>
  $("#b5").click(function(){
  	$("div:odd").css("background-color","red");
  });
  
// <input type="button" value="          3   div           "  id="b6"/>
  $("#b6").click(function(){
  	$("div:gt(3)").css("background-color","red");
  });
  
// <input type="button" value="          3   div           "  id="b7"/>
  $("#b7").click(function(){
  	$("div:eq(3)").css("background-color","red");
  });
  
// <input type="button" value="          3   div           "  id="b8"/>
  $("#b8").click(function(){
  	$("div:lt(3)").css("background-color","red");
  });
  
// <input type="button" value="                  "  id="b9"/>
  $("#b9").click(function(){
  	 //    ,   h1-h6       :header
  	 $(":header").css("background-color","red");
  });
  
// <input type="button" value="                        "  id="b10"/>		
	$("#b10").click(function(){
		//         ,    animated
		$(":animated").css("background-color","red");
  });	 
  
  
  function abc(){
  	 $("#mover").slideUp(3000);
  }
  abc();
	
```

###      

*   ：  :enabled
*    ：  :disabled                
* **  （  radio ，  checkbox）：  :checked**
* **  （     
# jQuery  

## jQuery  

###     

```javascript

			/**
			 *       
			 */
			window.onload = function(){
				//dom         option
				var options = document.getElementsByTagName("option");
				for(var i=0;i<options.length;i++){
					alert(options[i].innerHTML);
				}
			}	
		
```

### jQuery    

  jQuery      each

  $("").each(              )

       :         ,       

```javascript

			$(function(){
				//jQuery    option  
				var $option = $("option");
				//jQuery      each
				/**
				 *      ,    
				 *  each    
				 *    :   ,       
				 *  each    ,            
				 */
				$option.each(function(index,element){
					//alert(index+"==="+element);
					//jQuery      ,     DOM  
					alert(  $(element).html()  );
				});
			});
		
```

### jQuery    each  

  jQuery      ,each

     jQuery    , $   

  $.each()  

```javascript

			$(function(){
				//jQuery    option  
				var $option = $("option");		
				var options = document.getElementsByTagName("option");	
				//jQuery  $        each
				/**
				 *     each   
				 *       
				 *     ,       
				 *   :         jQuery  ,    DOM  
				 */
				$.each(options, function(index,element) {
					alert( $(element).html());
				});
			});
		
```

## jQuery   

  jQuery    ,      on

      :

* click     
* blur     
* change     
* keyup     
* mouseover     
* mouseout     

### DOM      

```javascript

			window.onload = function(){
				//    
				var btn = document.getElementById("btn");
				//DOM       
				btn.onclick  = function(){
					alert("     ");
				}
			}
		
```

### jQuery      

  jQuery     ,                

  bind  ,      

```javascript
	
		   $(function(){
		   	 //    ,jQuery       bind
		   	 /*$("#btn").bind("click",function(){
		   	 	alert("     ");
		   	 });*/   	
		   	/*
		   	 *   bind        
		   	 * bind( {
		   	 * 	 "    ":function(){},
		   	 *   "    ":function(){}
		   	 * } );
		   	 */
		   	$("#btn").bind({
		   		"click":function(){
		   			alert("      ");
		   		},
		   		"mouseover":function(){
		   			alert("        ");
		   		}
		   	}); 	
		 });
		
```

### jQuery    

  jQuery      unbind

```javascript

			$(function(){
				$("#btn").bind({
					"click":function(){alert("    ")},
					"mouseover":function(){alert("    ")}
				});
				
				$("#unbtn").click(function(){
					//    btn     
					//unbind()       ,      
					//$("#btn").unbind();
					
					//      
					//$("#btn").unbind("click");
					
					//      
					$("#btn").unbind("click mouseover");
				})
			});
		
```

##       

```javascript

			function selectCity(value){
				/**
				 *  value      option value    
				 *        ,      ,     
				 *        
				 *        select 
				 */
				var citys = [
				  ["  ","  ","  "],["  ","  ","  "],["  ","  ","  "]
				];
				var city = citys[value];
				//      
				var cityId = $("#cityId");
				//        
				var s = "<option >---- - - - ----</option>";
				//jQuery    each  
				$.each(city, function(index,element) {
					s+="<option >" +element+ "</option>";
				});
				//       
				cityId.html(s);
			}
		
```

##       

```javascript

			$(function(){
				//     ,    ,      
				$("#add").click(function(){
					//     ,     ,     
					
					$("#second").append($("#first option:selected"));
				});
				
				//     ,  ,      
				$("#add_all").click(function(){
				
					$("#second").append($("#first option"));
				});
				
				//     ,   
				$("#remove").click(function(){
					
					$("#first").append($("#second option:selected"));
				});
				
				//     ,   
				$("#remove_all").click(function(){
					
					$("#first").append($("#second option"));
				});
			});
		
```

## validate      

    :

                 ,  

   validate  jQuery       ,      

       jQuery      ,         



###       

```javascript

        	$(function(){
        		$("#empForm").validate({
        			//       
        			rules:{
        				//    ,    
        				realname:"required",
        				//   ,    ,  5-8
        				username:{
        					required:true,
        					rangelength:[5,8]
        				},
        				//    ,    ,  6-12
        				psw:{
        					required:true,
        					rangelength:[6,12]
        				},
        				//    ,    ,     
        				psw2:{
        					required:true,
        					equalTo:"#psw"
        				},
        				//    ,      
        				gender:"required",
        				//    ,    ,  26-50  
        				age:{
        					required:true,
        					range:[26,50]
        				},
        				//    ,     
        				edu:"required",
        				//    ,    ,    ,   
        				birthday:{
        					required:true,
        					dateISO:true,
        					date:true
        				},
        				//    ,     
        				checkbox1:"required",
        				//    ,    ,        
        				email:{
        					required:true,
        					email:true
        				}
        				
        			},
        			//    
        			messages:{
        				//      
        				realname:"       ",
        				//     
        				username:{
        					required:"       ",
        					rangelength:"       5-8 "
        				},
        				//    
        				psw:{
        					required:"      ",
        					rangelength:"      6-12 "
        				},
        				//      
        				psw2:{
        					required:"      ",
        					equalTo:"       "
        				},
        				//    
        				gender:"   ",
        				//    
        				age:{
        					required:"      ",
        					range:"     26-50  "
        				},
        				//    
        				edu:"       ",
        				//    
        				birthday:{
        					required:"      ",
        					dateISO:"       ",
        					date:"     "
        				},
        				//    
        				checkbox1:"       ",
        				//    
        				email:{
        					required:"      ",
        					email:"       "
        				}
        			}
			
        		});
        	});
        
```

###        

        , jQuery    $      validator

           addMethod()

    :

*    
*     

```javascript
 
        	
        	/*
        	 *            
        	 * value   :        
        	 * element :        
        	 * param   :           range:[5,10]
        	 */
        	//        15   
        	$.validator.addMethod("cart15",function(value,element,param){
        		//        value  
        		if(value.length==18)
        		  return true;
        		//  15   ,   
        		var reg=/^[0-9]{15}$/;
        		
        		return reg.test(value);
        	});
        	
        	//         18   
        	$.validator.addMethod("cart18",function(value,element,param){
        		 if(value.length==15)
        		   return true;
        		//  18   , 17   ,         ,   X
        		var reg = /^[0-9]{17}[0-9X]{1}$/;
        		
        		return reg.test(value);
        	});
        	
        	//           
        	$.validator.addMethod("cartlength",function(value,element,param){
        		if(value.length == 15 || value.length==18)
        			return true;
        		return false;	
        	});
```

```javascript
//      
cart:{
    required:"        ",
    cartlength:"          15 18 ",
    cart15:"15      ",
    cart18:"18      ,       X"
}
```
</code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1290977039121195008"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
興味があるかもしれません
  • Java同時発注スレッドプールと原子カウント
    lijingyao8206
    Javaカウント ThreadPool まとめて発注する. JAvaスレッドプール
  • JAvaプログラミング思想抽象クラスとインタフェース
    ユリはお茶じゃない
    java 抽象クラス インタフェース
  • [不動産とビッグデータ]不動産データマイニングシステム
    comsci
    データ・マイニング
  • 配列キューの概要
    刃を浴びて喜ぶ.
    アレイキュー
  • Oracleストレージ・プロシージャでコンパイルできない解決策
    IT独行者
    oracle きおくてつづき
  • システムの再インストール後oracleリカバリ
    文強chu
    oracle
  • python学習二(いくつかの基礎文法)
    みかん
    pthon 基礎文法
  • svn共通コマンド
    aichenglong
    SVN バージョンのロールバック
    • アルファベットで分類:
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
    トップページ -
    私たちについて -
    構内検索 -
    Sitemap -
    権利侵害苦情
    著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
    京ICP備09083238号









    ASP.NETでのAjaxProの使い方
    androidとネットワーク(中)socketの罠