Jquery:理解语法

Jquery : Understanding Syntax

本文关键字：语法 Jquery      更新时间：2023-09-26

我正在跟随tutsplus的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访问close/show
  • 我们这么说有什么区别?显示(在处理程序中)和$(this).show

实际上，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()方法中，第一行调用ContactForm对象的close()方法。代码使用了函数的原型call()方法，该方法允许我们在函数内部指定this的值。因此，在下面一行:

ContactForm.close.call(ContactForm.container);

代码将ContactForm.container(这是一个jQuery对象)发送给close()方法，以便this可以访问它:

var $this = $(this);

在close()方法内部，this now === $('#contact') and not ContactForm .

init函数是ContactForm上的函数，您将调用它将所有这些代码连接到DOM元素(因此初始化javascript)。您应该能够通过使用ContactForm.init()来访问它;在定义ContactForm的作用域中。与.show()和.close()函数一样，它们应该在ContactForm.show()中从定义ContactForm的作用域中可用。

正如另一个答案提到的，'this'指的是当前块的作用域，例如在这种情况下，使用click处理程序，它将指的是被单击的元素。'this'和'$(this)'之间的区别实际上只是后者被包装在jQuery选择器中，它将允许您访问jQuery函数，例如。show()和。hide()。这些在DOM元素本身上是不可用的。

相关文章：