jquery常用的5个方法_关于jQuery方法的5个鲜为人知的细节

jquery常用的5个方法

jQuery是世界上使用最广泛JavaScript库，但是我们所有人都已经知道这一点。 尽管最近几个月提出了很多批评，但它仍然吸引了开发人员的广泛关注。 无论您是jQuery的初学者还是JavaScript专家（Dave Methvin和其他团队成员均被排除在外），您可能都不知道jQuery的某些特性。 在本文中，我们将讨论其中五个。

在事件绑定器中返回false

众所周知，jQuery的首要目标是使用一套统一的方法来标准化不同浏览器的行为方式。 jQuery在可能的情况下增强了浏览器的功能，集成了本机不支持的功能。 考虑一下由于Internet Explorer 6和7本身不支持jQuery而可以使用的选择器（属性选择器:not ， :last-child等）。

有时，尽管这些是罕见的例外，但jQuery与标准行为略有不同。 一个示例是，在jQuery事件处理程序中返回false （例如，附加到on()事件处理程序）与调用相同：

event.stopPropagation();
event.preventDefault();

相反，在诸如addEventListener()类的本机事件处理程序中返回false等效于编写：

event.preventDefault();

通过查看jQuery源代码的相关部分可以证明这种行为：

if ( ret !== undefined ) {
   if ( (event.result = ret) === false ) {
      event.preventDefault();
      event.stopPropagation();
   }
}

伪选择器比您想的要多

在许多伪选择器的jQuery文档中，您可以找到以下注释（在这种情况下，与:checkbox伪选择器有关）：

$（“：checkbox”）等同于$（“ [type = checkbox]”）。 与其他伪类选择器（以“：”开头的伪类选择器）一样，建议在其前面加上标签名称或其他一些选择器。 否则，暗示通用选择器（“ *”）。 换句话说，裸露的$（'：checkbox'）等效于$（“ *：checkbox”），因此应改用$（“ input：checkbox”）。

现在，让我们看一下jQuery中的实际代码：

function createInputPseudo( type ) {
	return function( elem ) {
		var name = elem.nodeName.toLowerCase();
		return name === "input" && elem.type === type;
	};
}

从代码中可以看到，该文档略有不正确。 $(':checkbox')实际上等效于$('input[type="checkbox"]') （请注意name === "input" ），但是会测试页面的所有元素就像您调用它指定通用选择器一样，或根本不指定。

考虑到这一点，当您使用这样的过滤器并编写以下内容时，您可能会不想再添加元素选择器：

var $checkboxes = $(':checkbox');

但是，出于性能原因，仍然值得使用它，以使jQuery不会扫描页面的每个元素。 因此，您仍应编写如下语句：

var $checkboxes = $('input:checkbox');

jQuery.type()

本部分的标题可能已经是您的新鲜事物。 您是否知道jQuery有确定对象内部JavaScript [[Class]]的方法 ？

即使您已经知道此方法，您也可能会忽略的是它与本机JavaScript typeof运算符确实不同。 实际上， jQuery.type()返回传递的参数的更精确指示。 让我们看一些例子：

// prints object
console.log(typeof null);

// prints object
console.log(typeof [1, 2, 3]);

// prints object
console.log(typeof new Number(3));

使用jQuery.type()测试相同的参数，我们有：

// prints null
console.log($.type(null));

// prints array
console.log($.type([1, 2, 3]));

// prints number
console.log($.type(new Number(3)));

因此，如果您正在开发jQuery插件，则可能需要使用jQuery.type()来更精确地了解要处理的参数类型。

attr()可以removeAttr()

我知道本节的标题至少听起来有些奇怪，但它只说明事实。 对于不了解jQuery的attr()方法的您来说，它为匹配的元素集中的第一个元素检索属性的值，或者为每个匹配的元素设置一个或多个属性。

尽管您可能会忽略此行为，但除了Number或String之外， attr()方法还可以接受null作为其第二个参数。 发生这种情况时，它将充当其对应方法： removeAttr() 。 顾名思义，后者从匹配元素集中的每个元素中删除一个属性。

不相信我吗 让我们看一下源代码的相关部分：

attr: function( elem, name, value ) {
    ...
    if ( value !== undefined ) {

        if ( value === null ) {
		    jQuery.removeAttr( elem, name );
    ...
}

如您所见，该方法测试给定值是否已定义（ if ( value !== undefined ) ），然后显式检查其是否为null ，在这种情况下，调用removeAttr()方法。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

当您必须根据条件设置或删除属性并且不想分支代码时，这会很方便。 因此，例如，您可以编写：

$(selector).attr(anAttr, condition ? value : null);

代替

condition ? $(selector).attr(anAttr, value) : $(selector).removeAttr(anAttr);

您是否应该在代码中真正使用此技巧？ 该决定取决于您，但是如果我是您，则不会使用它来使代码清晰。 目前，这种行为不是记录，并有一个关于它的讨论 ，如果你有兴趣。

将类似数组的对象转换为数组

您可能知道，JavaScript具有类型，例如nodeList或函数中的arguments变量，它们与数组相似 ，但与数组相似 。 这意味着我们可以使用类似数组的符号（例如arguments[0] ）访问它们的元素，但不能使用诸如forEach()和join()类的数组方法。

假设我们有一个按如下方式检索的DOM元素的nodeList ：

var list = document.getElementsByClassName('book');

我们想使用forEach()方法遍历此类似数组的对象。 如果直接在变量（ list.forEach(...) ）上调用forEach() ， list.forEach(...)得到错误：“未捕获的TypeError：未定义不是函数”。 为避免此问题，最常用的技术之一是使用prototype属性和call()方法，如下所示：

Array.prototype.forEach.call(list, function() {...});

或者，您可以编写：

[].forEach.call(list, function() {...});

无论选择哪种解决方案，读取或写入都不是很优雅。 对我们来说幸运的是，jQuery助了我们一臂之力。 多亏了jQuery.makeArray()方法，我们可以简单地编写：

$.makeArray(list).forEach(function() {...});

好多了，不是吗？

结论

除了这五个主题之外，您可以从本文中学到的是，即使是像jQuery这样的出色而可靠的项目也不是完美的。 它存在错误和文档问题，并且知道方法的唯一信任来源是其来源。 好吧，实际上甚至是代码也可能因与开发人员的意图不同而存在，但这是另一回事了。

另一个教训是，您应该对所采用的框架和库感到好奇，不时阅读源代码，并尝试尽可能多地学习新的有用技巧和技术。

作为最后的建议，如果您像我一样喜欢jQuery，请为该项目做出贡献。 甚至报告错误或解决小的文档问题也可能对数百万的开发人员产生巨大的影响。

哦，如果您想知道我怎么知道这些细微的细节，原因是因为我写了几本有关jQuery的书 ，并且因为我遵循了jQuery问题跟踪器。 :)

翻译自: https://www.sitepoint.com/5-little-known-details-jquery-methods/

jquery常用的5个方法