摘要：不論怎樣嵌套，定位父級(jí)是誰(shuí)，都是到達(dá)頁(yè)面邊緣的距離。原生的相對(duì)于定位的祖先節(jié)點(diǎn)的距離。后來(lái)添加的照樣有事件，這是通過(guò)事件委托實(shí)現(xiàn)的。如果用普通寫(xiě)法，新添加的是沒(méi)有事件的。一旦用時(shí)，一定要是用的。

width() height() ★★★★★

innerWidth() innerHeight() ★★★★★

outerWidth() outerHeight() ★★★★★

參數(shù)的作用

與原生JS的區(qū)別

    
        
    
    
    


div

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

可視區(qū)的尺寸
頁(yè)面的尺寸

    
    
    
    
    


div

scrollTop() ★★★★★scr
ollLeft() ★
滾動(dòng)距離

    
    
    
    
    


div

offset() ★★★★★

left top
position() ★★★

left top
不認(rèn)margin值

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

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

利用計(jì)算原理，得到相應(yīng)值
offsetParent() ★
例子：懶加載頁(yè)面中的圖片
計(jì)算出到有定位的祖先節(jié)點(diǎn)的距離

懶加載圖片

on() ★★★★★

off() ★★★★★

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

    
    
    
    


    
aaaaaa

    
    
    
    


    
aaaaaa

常用性★★★★★

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

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

    
    
    
    
    


    
aaaaaa

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

    
    
    
    
    


    
aaaaaa
    span

    
    
    
    
    


    
div

委托的好處
ev.delegateTarget

    
    
    
    
    


    
    

        
11111
        
11111
        
11111
        
11111
        
11111
    

取消委托

比click()形式更強(qiáng)大
事件的命名空間
例子：主動(dòng)觸發(fā)的添加內(nèi)容

    
    
    
    
    


    
    

        
11111
        
11111
        
11111
        
11111
        
11111
    

    
    
    
    
    


    
div

    
    
    
    
    


    
div

教程網(wǎng)站

★★★★★比原生typeof更強(qiáng)大

    
    
    
    
    


    
div

$.isFunction() ★★★

$.isNumeric() ★★★

$.isArray() ★★★

$.isWindow() ★★★

$.isEmptyObject() ★★★

$.isPlainObject() ★★★

對(duì)象繼承操作
深拷貝操作

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

用$.proxy()傳參的用法

利用This改指向，更加方便

本課練習(xí):登錄彈窗效果

$.map方法也是用來(lái)遍歷數(shù)組和對(duì)象，但是會(huì)返回一個(gè)新對(duì)象

    
    
    
    
    


    
div
    
div
    
div

    
    
    
    
    


    
div
    
div
    
div

    
    
    
    
    


    
div
    
div
    
div

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

$.trim("   Hello   ") // Hello

    
    
    
    
    


    
div
    
div
    
div

常用度★★★

常用度 ★篩選的功能

常用度★
$.getJSON
常用度★

JSONP，不受同源影響

建議直接使用問(wèn)號(hào)

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

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

常用度★
默認(rèn)配置

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

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

常用度★
防止庫(kù)之間沖突

常用度★★★
遍歷

常用度★

    
    
    
    
   


    
div
    span

概念與參數(shù)意義

隊(duì)列名稱

 $(function(){
            //$.queue() 三個(gè)參數(shù)：隊(duì)列添加到哪個(gè)元素身上；隊(duì)列的名字；第三個(gè)參數(shù)是一個(gè)函數(shù)
            //$.dequeue() 兩個(gè)參數(shù)：元素和隊(duì)列名字
            //JQ中的隊(duì)列，存儲(chǔ)的都是函數(shù)
            //JQ的隊(duì)列，當(dāng)進(jìn)行出隊(duì)的操作的時(shí)候，會(huì)自動(dòng)執(zhí)行相應(yīng)的函數(shù)
            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()

源碼分析運(yùn)動(dòng)隊(duì)列

默認(rèn)隊(duì)列名fx

隊(duì)列的具體應(yīng)用基本使用

基本使用

    
    
    
    
   


    
div

    
    
    
    
   


    
div

基本概念與用法

add

remove

fire

應(yīng)用場(chǎng)景

四大參數(shù)

once

memory

unique

stopOnFalse

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

用回調(diào)對(duì)象來(lái)解決作用域的問(wèn)題

$(function(){
            var cb = $.Callbacks();
            function a(){
                alert(1);
            }
            (function(){
                function b(){
                    alert(2);
                }
                cb.add(a);
                cb.add(b);
            })();
           // a(); //彈1
            //b(); //b這個(gè)函數(shù)是找不到的，因?yàn)樽饔糜蚶锩鏇](méi)它
            cb.fire(); //彈1、2
 }) 

   $(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            //參數(shù) once：只能觸發(fā)一次
            var cb = $.Callbacks("once");
            cb.add(a);
            cb.add(b);
            cb.fire(); //彈1、2
            cb.fire(); //因?yàn)樘砑恿藚?shù)once，所以前面觸發(fā)過(guò)一次之后，這里不再觸發(fā)
        }) 
 

    $(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            //參數(shù) memory：不管前后添加的都一起觸發(fā)
            var cb = $.Callbacks("memory");
            cb.add(a);
            cb.add(b);
            cb.fire(); //彈1、2、3，因?yàn)閰?shù)memory，讓觸發(fā)時(shí)不管前面后面add的都觸發(fā)
            cb.add(c); 
 })  

  $(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
            }
            function c(){
                alert(3);
            }
            //參數(shù) 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);
            }
            //參數(shù) unique：去重功能
            var cb = $.Callbacks("stopOnFalse");
            cb.add(a);
            cb.add(a);
            cb.add(b);
            cb.add(c);
            cb.fire(); //彈1,1,2 不談3，因?yàn)樵赽里面碰到了false就不繼續(xù)執(zhí)行后面的函數(shù)c了
        })  

  $(function(){
            function a(){
                alert(1);
            }
            function b(){
                alert(2);
                return false;
            }
            function c(){
                alert(3);
            }
            //回調(diào)對(duì)象的參數(shù)可以組合使用
            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()對(duì)比學(xué)習(xí)

應(yīng)用場(chǎng)景

狀態(tài)的定義

狀態(tài)的映射 resolve, done reject, fail

ajax中的應(yīng)用 $.when()

利用狀態(tài)的應(yīng)用

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

編寫(xiě)插件基本格式

分析jQuery.e-calendar

配置參數(shù)

方法

自定義事件

實(shí)例：編寫(xiě)選項(xiàng)卡插件

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

    
    
    
    
    


    
div1
    
div2
    
div3

介紹與實(shí)現(xiàn)接口

$() -> find()

通用選擇 *

層級(jí)選擇 > + ~

基本篩選 :

animated

:eq()

:even

:odd

:first

:last

:gt()

:lt()

內(nèi)容篩選

:contains()

:empty

:parent

可見(jiàn)性篩選

: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()