Jquery：瞭解語法

我正在關注來自tutsplus的jquery視頻講座。在講座講師使用此代碼來顯示/隱藏聯繫表格上的按鈕，點擊Jquery：瞭解語法

var ContactForm = { 
    container: $('#contact'), 

    init: function(){ 
    $('<button></button>', { 
     text:"Contact Us" 
    }) 
    .insertAfter('article') 
    .on('click', this.show); 
    }, 

    show: function() { 
    ContactForm.close.call(ContactForm.container); 
    ContactForm.container.show(); 
    }, 

    close: function() { 
    var $this = $(this); 

    console.log($this); 

    $('span.close').on('click',function(){ 
     $this.hide(); 
    }); 
    } 
};

我不能得到什麼教練解釋了有關一些這些點的，所以如果你能幫我明白這個語法

init :function(), // i know about anonymous or named functions only

我們如何使用ContactForm訪問關閉/顯示。
什麼區別，當我們說this.show（在處理）和 $(this).show

來源

2015-08-27 Sikander

其實，init: function() { }不是一個匿名函數在所有。我會盡可能最好地回答你問題的許多部分。

ContactForm是一個對象，因此具有可以通過JS訪問的屬性和方法。例如，可以通過使用它的文本名稱訪問從對象的外部的show()和close()方法，例如：

ContactForm.show(); 
ContactForm.close();

由於它是一個對象，則還可以通過使用內部的this關鍵字引用它它。例如，如果你想打電話從init()方法裏面show()方法，你可以這樣做：

var ContactForm = { 
    init: function() 
    { 
     this.show(); // using this keyword. 
    }, 

    show: function() 
    { 

    }, 

    close: function() 
    { 

    } 
}

在這種特定情況下，this === ContactForm。但是，您指定$(this)的語法用於從DOMElement對象創建jQuery對象（或集合）。例如，假設您想要一個回調函數綁定到一個元素的click事件：

$('a').on('click', function() { 
    $(this) // <-- This now holds a jQuery object representing the clicked element 
});

因此，承受所有的這一點：

內show()方法，第一行調用close()方法的ContactForm對象。該代碼使用函數的原型call()方法，該方法允許我們在函數內指定this的值。因此，在下面的行：

ContactForm.close.call(ContactForm.container);

的代碼被髮送ContactForm.container（這是一個jQuery對象）到close()方法，使得它可以通過this訪問：內部的

var $this = $(this);

方法this現在=== $('#contact')和不是ContactForm。

來源

2015-08-27 06:22:58 BenM

完美的解釋..thank你了:-) – Sikander

注：'變量$此= $（本）;'裏面的原代碼實際上是多餘的。如果從*外*它不會工作調用，並從對象中（如你所述）'this'已經是一個jQuery對象。一般來說，代碼可能看起來不錯，在乍看之下，仔細檢查沒有這麼多。 – Yoshi

init函數是ContactForm上的函數，您可以調用它來將所有代碼連接到DOM元素（因此初始化javascript）。您應該可以通過使用ContactForm.init（）來訪問它;在ContactForm定義的範圍內。與.show（）和。關閉（）函數 - 他們應該在ContactForm.show（）可從其中的ContactForm定義的範圍。

作爲其它答案提到「這個」指的是在當前塊的範圍，並且例如在這種情況下與一個點擊事件處理，將參考被點擊的元素。「這」和「$（本）」之間的區別其實只是後者被包裹在一個jQuery選擇，這將讓您使用jQuery的功能，如.show（）和.hide（）。這些在DOM元素本身上不可用。

來源

2015-08-27 06:25:31 Claus

Jquery：瞭解語法

回答

相關問題