JQueryクイックラーニング

            JQuery   、  ；         ，            JQuery   ！

概要

構文

セレクタ

イベント処理

Ajax

jQueryはJavaScript関数ライブラリです.
 
jQuery構文はHTML要素の選択のために作成され、要素に対していくつかの操作を実行することができます.
基礎文法は$(selector).action()
3つの部分として理解できます.1、$->ブラウザにJQueryを使用していることを伝えます.2->操作するノードを選択し、3->ノードの操作を行います.
セレクタ
エレメントセレクタ
すべてのp:$(「p」)を選択
id='Fox_を選択zhuang’のすべての要素:$("#Fox_zhuang")
属性セレクタ:href='www.cnblogsを選択する.com/Fox_zhuang'のラベル:$(「a[href='www.cnblogs.com/Fox_zhuang'」)
等~
ここでは、いくつかの一般的な選択方法を示します.
1、tableを選択してヘッダーのすべての行を除く:$("#tableid tr:gt(0)")
2、現在のノードの左右のノードを選択:

<table id="mytab"><tr><td><input type="text" value="123"/></td><td><input type="button" value="345"/></td></tr></table>

$("#mytab td").find("input[type='text']").parent().next().find("input[type='button']")

イベント処理
いくつかの一般的なイベントバインド方法:
.on()選択要素に1つ以上のイベントのイベント処理関数をバインドします.V1.7+
.off()選択要素から1つ以上のイベントのイベント処理関数を削除します.V1.7+
.bind(type,[data],fn)は、一致する要素ごとに特定のイベントにイベント処理関数をバインドする.V1.0
.one(type,[data],fn)は、一致する要素ごとにclickのような特定のイベントに対して、使い捨てのイベント処理関数をバインドする.V1.1+
.unbind(type,[data|fn]))bind()の逆操作で、一致する要素ごとにバインドされたイベントが削除されます.V1.0+
いくつかの一般的な方法:

$(document).ready(function(){}----- DOM                      ， onload()   ；
$("input[type='text']").blur(function(){alert('123')});-----               
.change(),.click(),.dbclick(),.focus() ...

           ：    zhuangsd     

1 function myBind()

2 {

3     $("#zhuangsd").click(function()

4     {

5         alert("i am click!");

6     });   

7 }        

 
  
其他方法同理也可以这么写，这里再提一下冒泡型事件(在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理 程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次 的最顶层，即document对象（有些浏览器是window）。)，当然还有捕获型事件有兴趣的小伙伴们，可以自己写一个demo感受一下，自己理解这个原理；便于以后bug排查。
 
  
 
  
 
   
 
    
 
     
 异步请求Ajax
 
    
 
   
 
  
 
  
      ，    ：        ->     （              ）->    ，         ，        ，         ，              ~
  
 1 //      

 2 function myLoadDataByGet(url, data) {

 3     var returnValue;

 4     $.ajax({

 5         url: url,

 6         type: 'GET',

 7         dataType: 'json',

 8         timeout: 1000,

 9         data: data,

10         cache: false,

11         success: function(rdata) {

12             returnValue = rdata;

13         } //          

14     });

15     return returnValue;

16 }
  
 
  
 
 
  
        demo,    ；     ~