jquery 學習筆記

 

//檢測window中新增的對象
//first
var oldMap = {};
for(var i in window)
{
    oldMap[i] = 1;
}

//second
for(var i in window)
{
    if(oldMap[i]) continue;
    alert(i);
}

$()選擇器獲取到的既不是一個dom元素，也不是節點列表，而是一個新的對象

$() 不傳入任何參數會返回一個空的jquery對象

$("<div>")  根據傳入的html建立jquery對象， 原理：建立一個

//google  cdn獲取jquery  
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
    google.load("jquery",'1.4.2');
    google.setOnLoadCallback(function(){alert('aa'+$)}); 
</script>

//這種寫法更好
$ = [1,2];
jQuery(function($){
    //自動傳入jquery對象，即便外邊的$被覆蓋依然可使用$
    alert($);
})

//建立一個元素，同時給他添加一些屬性和方法

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

//獲取select標籤的值，當爲單選時爲一個數值，當爲多選時則會返回一個數組，

//設置多選傳入數組 $("select").val([1,2,3]);

$("select option:selected").each(function(){  
    alert(this.value);
})


//綁定事件時傳入參數，很好的解決了閉包產生的問題
var message = 'Spoon!';

$('#foo').bind('click', {msg:message}, function(evt) {

    //訪問出入參數的方式
    alert(evt.data.msg);
    
});
message = 'sjk';

在事件處理函數內返回false就等價於執行事件對象上的.preventDefault()[ie:evt.returnValue=false;]和.stopPropagation()[ie:evt.cancelBubble=true;]

jq綁定的事件只能用自身的方法來觸發，但js綁定的事件一樣能夠用jq來觸發

$("#song").click(function(evt){
    alert(evt.originalEvent); //原始的時間對象
    alert('click');    
})

//事件綁定外邊的一個函數

function test(evt, msg){
    alert(evt);
    alert(msg);    
    alert(this.innerHTML);
}

document.getElementById('song').onclick = function(evt){
    test.call(this, evt, 'ok');    //important
};

//    trigger傳入參數
$("#song").click( function (event, a, b) {
  // 一個普通的點擊事件時，a和b是undefined類型
  // 若是用下面的語句觸發，那麼a指向"foo",而b指向"bar"
      alert(a+'\n'+b);
} ).trigger("click", ["foo", "bar"]);


live事件委託的元理
$(document).bind("click", function (e) {
    $(e.target).closest("li").toggleClass("hilight");
});

//新發現mouse事件 mouseenter / mouseleave

jquery返回的對象很是相似數組，但並非繼承自數組 instanceof  Array

//會自動把數組的下標賦值到this下面
[].push.apply(this,ary);

//jquery對象實現原理
function list(ary)
{
    this.ary = ary;
    [].push.apply(this,ary);
}

list.prototype = {
    attr:function(){
        for(var i=0;i<this.ary.lenght;i++){
            this.ary[i][name] = value;
        }    
    },
    get:function(index){
        if(index === undefined) return this.ary;
        else{
            return this.ary[index];
        }
    },
    push:[].push,
    shift:[].shift
}

var l = new list([1,2,3]);
l.push(4);
l.push(5);

console.dir(l);


下面的script標籤會等上面的script標籤中的內容所有加載完畢後才執行
___________________________________________________________________________
xpath:比css選擇器更爲強大些

//改變某個函數的this上下文
    function closure(fn,scope)
    {
        return function(){
            fn.apply(scope, arguments);
        }
    }

//調用一個對象上指定的方法    
    function invoke(obj, methodName)
    {
        return function(){
            obj.methodName.apply(obj,arguments);
        };
    }

都是返回一個通過包裝過的函數
_________________________________________________________________________________
$.proxy(fn,scope)用法
$(function(){
    function test(){
        alert(this.html());    
    }
    var h = $(":header");
    h.click($.proxy(test,h)) //改變this的值
    
    alert(test.guid); //每一個函數賦值一個guid，當次函數通過閉包處理後返回的函數任何此函數的guid相同，
    而後就能夠用guid來判斷這兩個函數是相同的（很差比較這兩個函數是否相同）
})

——————————————————————————————————————————————————————————————————————————————————————————
w3c瀏覽器：
    addEventListener
    removeEventListener
IE：
    attachEvent 
    detachEvent

——————————————————————————————————————————————————————————————————————————————————————————
//closest對於處理事件委託很是有用,相似live的原理
$(document).bind("click", function (e) {
    $(e.target).closest("li").toggleClass("hilight");
});
_____________________________________________________________________________________
解決$命名空間衝突的問題
jQuery.noConflict();
jQuery(function($){  傳入一個函數後，jquery會自動把他的全局命名空間（$）,傳入次函數的參數中
    
    var len = $("ul li").length;
    console.log(len);
})

在引入jquery文件後馬上調用
//釋放$命名空間
jQuery.noConflict();

//釋放jQuery命名空間
jQuery.noConflict(true);


通常寫jquery代碼時能夠把$全局命名空間釋放掉，這樣就避免了和其餘插件的衝突
$能夠用局部的那個

//數據緩存
$("#song").data("title", 'title');
$("#song").data("age", 27);

//不傳入參數則會返回一個js對象,並非dom對象
var obj = $("#song").data();

alert(obj.title);
alert(obj.age);    

//能夠傳入obj，鍵值對
$("#song").data({name:12,age:27});


源碼分析：
————————

//註冊命名空間
function test(){}

var _nspool = {};

test.ns = function(name, value){
    var names = name.split('.');
    o = window;
    for(var i=0;i<names.length;i++)
    {
        if(!o[names[i]])
        {
            o[names[i]] = {};
        }
        o = o[names[i]];
        
        _nspool[name] = o[names[i]];
        o[names[i]] = value;
    }
}

test.ns('a.b.c', 123);
console.dir(_nspool);

//反註冊時只須要把 _nspool中的key值刪除

命名空間太長，可能會引發效率問題，能夠把他賦給一個值    

[object Object] [基本類型 構造函數]
alert({}.toString());
//數組上的toString方法被改寫了，因此咱們借用{}上的toString方法

判斷是不是一個數組    {}.toString.call([]);

//插件機制
jQuery自己添加
jQuery.newMethod = function(){}
jQuery.extend(obj);

jQuery對象添加
jQuery.fn = jQuery.fn.init.prototype = function(){}
jQuery.fn.extend(obj);

------------------------------------

var o1 = {name:1};
var o2 = {age:{sex:{hel:1}}};

jQuery.extend(o1,o2);

console.log(o1.age === o2.age);

_______________________________________

代理函數:把新返回的函數的guid和原函數的guid設置成相同的，這樣解除綁定的時候傳入原函數便可
var obj = {
  name: "John",
  test: function() {
    alert( this.name );
    $("#test").unbind("click", obj.test);
  }
};

 $("#song").click( jQuery.proxy( obj, "test" ) );

 //如下代碼跟上面那句是等價的:
 //$("#song").click( jQuery.proxy( obj.test, obj ) );

 //能夠與單獨執行下面這句作個比較。
 //$("#song").click( obj.test );
 
 
 原生js實現jquery的proxy方法 
//改變某個函數的內部this指針
function closure(fn, scope)
{
    return function (){
        fn.apply(scope, arguments);
    };
}

//調用某個對象的某個函數，並將次對象做爲方法的做用域
function invoke(obj, methodName)
{
    return function(){
        obj.methodName.apply(obj, arguments);
    };
}

————————————————————————————————————————————————————
函數綁定原理
var fns = [],conter = 0;
//綁定
function addEvent(){
    fn.guid = counter ++;
    fns[type] = fns[type] || {};
    fns[type][fn.guid] = fn;
    o["on"+type] = function(){
        //遍歷 fns
    }
}

//解除綁定
function delEvent(o, type, fn)
{
    delete fns[type][fn.guid];
}

____________________________________________________
jquery 插件
輪播器：slideview slinkySlider anythingSlider