摘要：不論怎樣嵌套，定位父級是誰，都是到達頁面邊緣的距離。原生的相對于定位的祖先節點的距離。后來添加的照樣有事件，這是通過事件委托實現的。如果用普通寫法，新添加的是沒有事件的。一旦用時，一定要是用的。

width() height() ★★★★★

innerWidth() innerHeight() ★★★★★

outerWidth() outerHeight() ★★★★★

參數的作用

與原生JS的區別

    
        
    
    
    


div

$(function(){
   alert($("#div1").get(0).offsetWidth); //0 原生的JS是獲取不到隱藏元素的尺寸的
   alert($("#div1").width()); //100 JQ是可以獲取隱藏元素的尺寸的
 })

可視區的尺寸
頁面的尺寸

    
    
    
    
    


div

scrollTop() ★★★★★scr
ollLeft() ★
滾動距離

    
    
    
    
    


div

offset() ★★★★★

left top
position() ★★★

left top
不認margin值

  alert($("#div2").position().left); //0

 #div2 {width: 100px; height: 100px; position: relative; left: 50px; background: yellow;}
  

利用計算原理，得到相應值
offsetParent() ★
例子：懶加載頁面中的圖片
計算出到有定位的祖先節點的距離

懶加載圖片

on() ★★★★★

off() ★★★★★

JQ中都是綁定的形式
支持多事件寫法
click()寫法，也是采用off()取消

    
    
    
    


    
aaaaaa

    
    
    
    


    
aaaaaa

常用性★★★★★

pageX, pageY 與cient的區別
which
target
stopPropagation()
preventDefault()
return false

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

多次添加on的處理方式
例子：拖拽效果

    
    
    
    
    


    
aaaaaa
    span

    
    
    
    
    


    
div

委托的好處
ev.delegateTarget

    
    
    
    
    


    
    

        
11111
        
11111
        
11111
        
11111
        
11111
    

取消委托

比click()形式更強大
事件的命名空間
例子：主動觸發的添加內容

    
    
    
    
    


    
    

        
11111
        
11111
        
11111
        
11111
        
11111
    

    
    
    
    
    


    
div

    
    
    
    
    


    
div

教程網站

★★★★★比原生typeof更強大

    
    
    
    
    


    
div

$.isFunction() ★★★

$.isNumeric() ★★★

$.isArray() ★★★

$.isWindow() ★★★

$.isEmptyObject() ★★★

$.isPlainObject() ★★★

對象繼承操作
深拷貝操作

兩處傳參的的區別
$.proxy()改變this指向的用法

用$.proxy()傳參的用法

利用This改指向，更加方便

本課練習:登錄彈窗效果

$.map方法也是用來遍歷數組和對象，但是會返回一個新對象

    
    
    
    
    


    
div
    
div
    
div

    
    
    
    
    


    
div
    
div
    
div

    
    
    
    
    


    
div
    
div
    
div

用于移除字符串頭部和尾部多余的空格

$.trim("   Hello   ") // Hello

    
    
    
    
    


    
div
    
div
    
div

常用度★★★

常用度 ★篩選的功能

常用度★
$.getJSON
常用度★

JSONP，不受同源影響

建議直接使用問號

$(function(){
            // $.getJson() 動態請求json或JsonP
            //直接用$.getJSON，我們就不需要再通過設置dataType: json了
            $.getJSON("data.php", function(data){
                console.log(data);
            }); //data.php返給我們的是一個json格式
 })

$.getJSON("data.php?callback=?", function(data){ //data.php返回的是jsonp的形式，我們就可以后面添上callback=? 注意其中callback是key值，而問號?是value值。一旦用getJSON時，一定要是用callback=?的。如果給callback指定了名稱，那么返回的是字符串形式，并不是json形式，在getJSON里面就解析不了，所以就只能走error。所以在$.getJSON()里面給callback命名是沒有意義的，一定要是用?才可以自動解析
                console.log(data);
            }).error(function(err){
                console.log(err);
            });
            $.ajax({ //在使用ajax的時候，可以給callback自定義名稱，例如下面定義了“show”
                url:"data.php?callback=show",
                success: function(data){
                    //返回的數據就是一個類似"show({name: "hello"})"的字符串，然后再后續處理進行使用
                }
            })
            //另外如果在$.ajax()中設置了datatype為"jsonp"，那么在url的地方是不需要加callback的，因為它會自動添加好

常用度★
默認配置

$(function(){
            //如果有很多ajax，那么可以利用$.ajaxSetup()來進行默認設置
            $.ajaxSetup({
                type: "POST" //那么所有的ajax傳輸類型都改為post了
            });
})

全局事件
加到document上，參數的意義
$.ajaxStart() ★
$.ajaxStop() ★
$.ajaxSuccess() ★
$.ajaxError() ★
$.ajaxComplete() ★
$.ajaxSend() ★
屬性 ★
Global, Context
JSONP, jsonpCallback
Cache, Timeout
processData
contentType
ajax參考資料

常用度★
防止庫之間沖突

常用度★★★
遍歷

常用度★

    
    
    
    
   


    
div
    span

概念與參數意義

隊列名稱

 $(function(){
            //$.queue() 三個參數：隊列添加到哪個元素身上；隊列的名字；第三個參數是一個函數
            //$.dequeue() 兩個參數：元素和隊列名字
            //JQ中的隊列，存儲的都是函數
            //JQ的隊列，當進行出隊的操作的時候，會自動執行相應的函數
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            $.queue(document, "myeve", a);
            $.queue(document, "myeve", b);
            $.queue(document, "myeve", c);
            $.dequeue(document, "myeve"); //彈1
            $.dequeue(document, "myeve"); //彈2
            $.dequeue(document, "myeve"); //彈3
        })

queue() dequeue()

源碼分析運動隊列

默認隊列名fx

隊列的具體應用基本使用

基本使用

    
    
    
    
   


    
div

    
    
    
    
   


    
div

基本概念與用法

add

remove

fire

應用場景

四大參數

once

memory

unique

stopOnFalse

$(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            var cb = $.Callbacks(); //回調對象
            cb.add(a); //a添加到回調對象的集合里面
            cb.fire(); //fire就是觸發 彈出1
            cb.add(b); 
            cb.fire(); //彈出1和2
            cb.add(c);
            cb.remove(b);
            cb.fire(); //彈出1和3
 })   

用回調對象來解決作用域的問題

$(function(){
            var cb = $.Callbacks();
            function a(){
                alert(1);
            }
            (function(){
                function b(){
                    alert(2);
                }
                cb.add(a);
                cb.add(b);
            })();
           // a(); //彈1
            //b(); //b這個函數是找不到的，因為作用域里面沒它
            cb.fire(); //彈1、2
 }) 

   $(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            //參數 once：只能觸發一次
            var cb = $.Callbacks("once");
            cb.add(a);
            cb.add(b);
            cb.fire(); //彈1、2
            cb.fire(); //因為添加了參數once，所以前面觸發過一次之后，這里不再觸發
        }) 
 

    $(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            //參數 memory：不管前后添加的都一起觸發
            var cb = $.Callbacks("memory");
            cb.add(a);
            cb.add(b);
            cb.fire(); //彈1、2、3，因為參數memory，讓觸發時不管前面后面add的都觸發
            cb.add(c); 
 })  

  $(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            //參數 unique：去重功能
            var cb = $.Callbacks("unique");
            cb.add(a);
            cb.add(a);
            cb.add(a);
            cb.add(b);
            cb.fire(); //彈1、2，而不是彈1,1,1,2
        })  

  $(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
                return false;
            }
            function c(){
                alert(3);
            }
            //參數 unique：去重功能
            var cb = $.Callbacks("stopOnFalse");
            cb.add(a);
            cb.add(a);
            cb.add(b);
            cb.add(c);
            cb.fire(); //彈1,1,2 不談3，因為在b里面碰到了false就不繼續執行后面的函數c了
        })  

  $(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
                return false;
            }
            function c(){
                alert(3);
            }
            //回調對象的參數可以組合使用
            var cb = $.Callbacks("once memory");
            cb.add(a);
            cb.add(a);
            cb.add(b);
            cb.fire(); //彈1,1,2,3   
            cb.add(c);
            cb.fire(); //什么也不彈
        })  

常用度★★★

基本概念與用法

與Callbacks()對比學習

應用場景

狀態的定義

狀態的映射 resolve, done reject, fail

ajax中的應用 $.when()

利用狀態的應用

$.fn.extend() this指向
$.extend()

編寫插件基本格式

分析jQuery.e-calendar

配置參數

方法

自定義事件

實例：編寫選項卡插件

 $(function(){
            //$.trim是去掉左右空格，現在擴展一個只去左邊空格的方法
            $.extend({
                leftTrim: function(str){
                    //this : 工具方法中 this與$等價
                    return str.replace(/^s+/g,"");
                }
            });
            var str = "   hello  ";
            alert("(" + $.leftTrim(str) + ")");
        })

    
    
    
    
    


    
div1
    
div2
    
div3

介紹與實現接口

$() -> find()

通用選擇 *

層級選擇 > + ~

基本篩選 :

animated

:eq()

:even

:odd

:first

:last

:gt()

:lt()

內容篩選

:contains()

:empty

:parent

可見性篩選

:hidden

:visible

子元素篩選

:first-child

:last-child

:first-of-type

:last-of-type

:nth-child()

:nth-of-type()

:only-child

:only-of-type

表單篩選

:button

:checkbox

:radio

:checked

:disabled

:enabled

:selected

filter()
not()
has()