jQuery核心方法与实用程序方法

Question

jQuery方法通常被认为是2种类型; 核心方法和实用方法

我想他们称之为$ vs $()

有人可以提供每种类型的示例并突出显示差异.谢谢.

Answer 1

(跳到TL;如果你讨厌阅读并希望得到摘要,最后是DNR,如果你需要我所说的澄清,那就回去阅读整篇文章)

jQuery的本质

对jQuery新手来说,第一个也是最令人困惑的事情是jQuery对象是什么,以及为什么它以它的方式工作.jQuery的体系结构旨在允许开发人员使用简单,简洁的语法选择然后在一个语句中交互和操作所有相关元素,而不必担心不同浏览器如何工作之间的陷阱和警告.所以,如果我想将一个事件处理程序附加到具有特定CSS类的页面上的所有链接,我希望代码看起来像是$('a.my-selector').click(function() { /* my handler here */ });一个查看所有子元素的monstrosity document.body,检查它是否是一个锚元素在my-selector类,如果是这样,在重视特定于该浏览器的方式产生所需的处理程序,并递归调用自己该元素的孩子.

什么是核心方法和什么是插件方法

Core和Plugin方法是相同的,除了在jQuery脚本中定义了核心方法,并且您或其他开发人员定义了一个插件来扩展或增强jQuery的核心功能.

Core和Plugin方法(我从现在开始简称它们为"方法")是jQuery对象的成员函数($是jQuery减少类型的别名,因此$()并且jQuery()是相同的).这些方法提供了遍历,交互和操作页面元素的方法.

方法如何工作

在调用时$(),您将创建核心jQuery对象的实例,该实例具有到目前为止已定义的所有方法.此对象中还包含对您选择,引用或创建的所有浏览器HTML元素的引用,具体取决于您提供的参数$().因此,在方法中,您应该始终假设您正在处理元素集合,集合中包含零到多个项目.在大多数情况下,您的方法将从以下内容开始:

$.fn.myPlugin = function() {
  // `this` is the jquery object. the next line iterates over each element currently
  // in the collection and invokes the specified function against it.
  return this.each(function() {
     // within _this_ function, `this` is a reference to the current element
     // here, you can interact with or manipulate the element to whatever
     // ends required by your plugin.
  });
};

请注意,这$.fn只是$()对象的别名prototype.所以,$.prototype并且$.fn是同义词.fn/ prototype只是JavaScript允许您在对象上添加或替换方法的方式.

方法应该返回什么？

除了我稍后会说明的异常之外,方法应该返回生成的jQuery对象.结果是什么意思？如果该方法遍历或过滤当前元素,则它应返回包含这些新元素的jQuery对象.例如:$.fn.filter获取您选择的原始元素,然后删除与您指定的选择器不匹配的所有元素.例:

$('a').filter('.my-selector'); // finds all anchor tags on the document, then removes any that don't have the class `my-selector`.

如果该方法只应用某些行为,那么它应该只返回jQuery中的当前元素(在这种情况下,最容易返回结果this.each,如上所示).例如:$.fn.hide通过应用CSS使每个选定元素隐藏display:none,因此它可以返回this.each.这是非常粗略的样子:

$.fn.hide = function() {
   return this.each(function() {
      $(this).css({'display':'none'});
   });
}

现在,对于例外.您可能有一个方法从集合中的元素返回一个值.在这种情况下,可以不返回jQuery对象,而是返回值.例如,$.fn.html将所有选定元素的HTML内容作为一个字符串返回.

所以,你可能会问,"好的,但为什么还要为那些没有返回值的方法返回另一个jQuery对象？".这样做是为了让开发人员可以在一次调用中将功能链接在一起.回到.my-selector示例,假设您不仅要应用单击处理程序,还要将文本设置为粗体.

你可以这样说:

var myLinks = $('a.my-selector');

myLinks.click(function() { /* handle click */ });
myLinks.css({'font-weight':'bold'});

但是,这非常冗长,而且在JavaScript中,每一行都会计入您的页面重量.由于所有这些方法都返回一个jQuery对象,因此您可以在一个语句中链接调用:

$('a.my-selector').click(function() { /* handle click */ }).css({'font-weight':'bold'});

更简洁,对吧？

效用函数

实用程序功能是包含常用功能的静态或共享功能.如上所述,它们稍微超出了正常的jQuery模式,因为它们仅用于封装一些有用且可重用的逻辑.他们可以接受它需要的任何参数,并返回它想要的任何东西.例如,$.isArray使用如下:

var myArray = [];

alert($.isArray(myArray)); // displays true

它的定义大致如下:

$.isArray = function(o) {
 // check if o is array and return true or false
};

现在,您可以通过这样定义它来轻松地完成"旧学校"JavaScript方式:

function isArray(o) {
   // check if o is array and return true or false
}

此外,您可能会问附加它的优点是什么$.这样做的原因是为了防止覆盖由开发人员,其他脚本甚至其他版本的jQuery定义的同名函数(是的,如果你真的需要,可以在页面中包含多个版本的jQuery,但这是另一个故事).

TL; DNR

$()是指jQuery对象的一个​​实例,$.fn允许您在jQuery对象上添加或替换方法,并$.yourFunctionNameHere允许您定义"静态"或"共享"实用程序函数来封装有用的功能,否则这些功能不遵循jQuery实例模式.