我已经注意到试图监视/回答 jQuery 的常见问题,有 javascript,使用 jQuery,实际上使您能够编写更少并做...的某些做法也基本相同。并还可能产生性能方面的好处。

一个具体的例子

$(this)this

在 click 事件引用被单击的对象 id

jQuery

$(this).attr("id");

Javascript

this.id;

是否有任何其他常见的做法,像这样?其中某些 Javascript 操作可能变得更容易,完成但不 jQuery 进行组合。或者,这是极少数的情况下?(jQuery"快捷方式"实际上需要更多的代码)

编辑︰我喜欢关于 jQuery 与纯 javascript 性能的答案,而我实际上寻找更多定量解答。JQuery 使用时,其中一个实际上会好一些的实例关闭 (可读性紧凑性) 而不是使用$()使用纯 javascript。除了本示例以外我投降我原来的问题。

2011-01-10 21:53:40
问题评论:

我不肯定我了解问题。您在查找有关使用库代码的优点的看法或您所查找的其他非 jQuery 类似于this.id的跨浏览器兼容技术?

从答案好像每个人都采取这一问题作为哲学,我本来是非常量化,并几乎编译的如我所述的一个常见 (恶意) 做法的实例列表。

相关doxdesk.com/img/updates/20091116-so-large.gif

@chris 也是meta.stackexchange.com/questions/19478/the-many-memes-of-meta/...

回答:

  • this.id (如您所知)
  • this.value (大多数输入类型。 仅在问题上我知道<select>没有value时 IE。)
  • this.className以获取或设置整个"class"属性
  • this.selectedIndex根据<select>获取所选的索引
  • this.options根据<select> <option>元素的列表
  • 要获取其文本内容<option>对照this.text
  • this.rows<table>获取<tr>元素的集合
  • 根据<tr>要获取其单元格 (td 和 th) this.cells
  • this.parentNode以获取直接父级
  • this.checked以获取checkbox下的,谢谢 @Tim的选中的状态
  • this.selected以获取option下的,谢谢 @Tim所选的状态
  • this.disabled以获取input下的,谢谢 @Tim的禁用的状态
  • this.readOnly以获取input下的,谢谢 @Tim的只读状态
  • 要获取其href <a>元素对this.href
  • this.hostname根据<a>元素可以获取其href
  • this.pathname根据<a>元素可以获取其href的路径
  • 要获取其href的查询字符串<a>元素对this.search
  • this.srcsrc无效元素

...我认为您已领会了要旨。

将性能至关重要的时间。如果当前正在执行一个循环中的某些内容多次转移,像您可能想要扔掉 jQuery。

一般情况下您可以替换︰

$(el).attr('someName');

使用︰

以上是不当措词。getAttribute不能替代,但它并不检索来自服务器,特性的值和其相应的setAttribute会将其设置。在某些情况下的需要。

下面的句子的排序覆盖它。请参阅此答案更好的治疗。

el.getAttribute('someName');

...in 订单直接访问属性。请注意,属性与属性相同 (尽管他们互相镜像有时)。当然也有是setAttribute

假定您有一种情况在接收到需要进行解包某一类型的所有标记的页面。它是简单和容易使用 jQuery:

$('span').unwrap();  // unwrap all span elements

但如果有很多,可能需要执行一些本地的 DOM API:

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

此代码是很短,它比 jQuery 版本中,更好地执行,并可以很容易地成为个人库中的可重用函数。

这可能看起来像我有无限循环与外while由于while(spans[0]),而是因为我们正在处理的"活动组" parent.removeChild(span[0]);更新时进行更新。这是一种非常巧妙的功能,我们错过了解的而使用数组 (或类似数组的对象) 时。

不错...这所以主要围绕此关键字 uneccessarily 被包装到 jQuery 对象。

@jondavidjohn︰ 嗯,有一些修补程序在某些情况下,像this.value一样好在某些情况下有两个浏览器的特点。这完全取决于您的需要。有许多好技巧,尤其是在性能至关重要的 jQuery,不容易。我会试着更多的考虑。

我已准备编写的答案,但我将改为添加对您的建议。通常, attr()是大规模使用过度。如果你只处理一个元素,然后您很少需要attr()我收藏的两个被checked的复选框属性周围的混乱 (各种围绕那个神秘 incantations: $(this).attr("checked", "checked")$(this).is(":checked")等),同样selected <option>元素的属性。

Aaargh,@patrick、 否︰ 已经建议getAttribute()几乎从不需要︰ 它折断在 IE 中,并不总是反映的当前状态,并没有什么 jQuery 无论如何都不会。只需使用属性。...stackoverflow.com/questions/4456231/

此答案应该是 wiki

正确答案是您将始终采用对性能产生负面影响,在使用 jQuery,而不是普通的老式本机 JavaScript。这是因为 jQuery 是一个 JavaScript 库。它不是一些别致的新版的 JavaScript。

原因在于强大的 jQuery 是它使一些事情过于繁琐 (AJAX 是一个最佳示例) 的跨浏览器情况下的平滑通过无数的可用的浏览器之间的不一致,并提供了一个一致的 API。它还轻松地概念,如链接、 暗示的迭代等,以简化对元素组一起工作。

学习 jQuery 是学习 JavaScript 没有替代方案。应后者中具有坚实的基础,以便充分认识前者简化为您所知道。

-编辑以包含注释 —

则该评语会快速指出 (和我同意 100%) 上面的语句是指基准测试代码。本机 JavaScript 解决方案 (假设它写得好) 将超过一个 jQuery 解决方案,它可以完成相同的操作 (我将非常乐于否则请参见示例) 几乎每个用例中。jQuery 能加速开发时间,是的我不打算 downplay 的重要优势。它简化了易于阅读,易于遵循即多一些开发人员都能够创建自己的代码。

在我看来然后,答案取决于您试图实现。如果,我假定基于引用与性能方面的好处,如最高速度后从您的应用程序,然后使用 jQuery 带来了开销,每次您调用$()如果你会为了提高可读性,一致性,跨浏览器兼容性,等等,那么当然有理由通过 JavaScript 本机优选 jQuery。

我将非常乐于看到其中 jQuery 可以超过纯 JS 中的实现情况的一个示例。无论做什么,如果您正在使用 jQuery (或就此而言任何其他库) 具有函数开销是不可避免的。没有办法可以远离 (尽管) 从调用$()生成小开销。如果您不进行该调用,您可以节省时间。

未正确写入终生的解决方案可能会较慢。JQuery 团队执行包了一些高效的 JavaScript。请参阅 @Freelancer 的答案。

编写糟糕的解决方案将始终为未正确编写解决方案,并不是语言的故障。它不会更改库将导致系统开销本机函数可以避免,如果周密详尽的事实。

@g.d.d.c。认为的最佳范例,jQuery"胜过"(读框外的准则) 纯 JS 是在赞成减少开发时间 (即 business-wise 是一个极大值) 和简化试验

所写的内容的所有情况,但离开上面什么 @Ben 笔记。jQuery 可以使开发人员更快、 更可靠。请参见此 KillClass() 实现我写了许多年以前,但使用频繁。您知道什么?它是某些边缘情况下的损坏代码是很差的代码和错误代码是错误的代码,但通常使用 jQuery 可以使开发人员编写更好和更正确的代码较差。大多数情况下,计算机非常快,足以;它的开发人员需要帮助。

没有一个框架,称为...哦您猜会怎样?Vanilla JS祝你得到...这个笑话︰ D它牺牲性能的代码可读性...jQuery示例可以看到程序检索DOM元素的ID几乎35 X更快进行比较。:)

所以如果想要性能会更好地尝试香草 JS,并得出自己的结论。也许不会遇到 JavaScript 悬挂浏览器的 GUI/锁定 UI 线程期间密集类似for循环内的代码。

香草的 JS 是一个快速、 轻量、 跨平台的框架,构建令人难以置信的、 功能强大的 JavaScript 应用程序。

在他们的主页上,还有一些性能比较︰

enter image description here

:)) 非常喜欢这个笑话。实际上我发现,从开机自检 js 框架时代的许多开发人员往往会认为该 jquery 由于某种原因是最新的 javascript 版本

LOL 您给我,我空js文件下载并认为.哦是的这是作为纯粹玩笑 lol 超的讽刺意味。

应为名人堂影响 dude,此答案 (和网站)。

已接受的答案,但我认为此处直接键入应答可以全面,几乎保证跨浏览器支持本机 javascript 的方法/属性的列表中。对,可能我将您重定向到 quirksmode:

http://www.quirksmode.org/compatibility.html

它可能是最全面的哪些有用,哪些没用什么浏览器列表。应特别注意对 DOM 部分。有很多读点但不是可以读取它,但要使用它作为参考。

当我开始认真编写 web 应用程序,打印出所有 DOM 表,并暂停其墙上,这样我能一眼看何谓安全使用和需要攻击的威胁。这些天我只是 google 类似quirksmode parentNode compatibility时我有疑问。

像其它任何判决之主要是体验。我真的不建议您阅读整个站点并记住所有的问题算出何时使用 jQuery 以及何时使用普通的 JS。只是知道。很简单,若要搜索。与时间将开发纯 JS 最好的反应。


PS: PPK (作者的网站) 也有非常好的书,我建议做阅读

成为唯一一个以引用 ppk 兼容性 + 1。血液就在这里

+ 1 大的参考价值。

当︰

  1. 您知道是 unflinching 的跨浏览器支持自己在做什么,和
  2. 它不是大得多的代码类型,以及
  3. 未得可读性较差,并且
  4. 要合理地确信,jQuery 不会选择不同的实现基于浏览器,以实现更好的性能,然后︰

使用 JavaScript。(如果可能),否则使用 jQuery。

编辑︰ 此答案适用两者时选择使用 jQuery 整体而不是离开它,以及选择是否为使用 jQuery 在香草 JS。attr('id').id倾以 JS,应用.className = .className.replace( new Regexp("(?:^|s+)"+foo+"(?:s+|$)",'g'), '' ) jQuery 而倾。

我认为 OP 打算使用 jQuery,但想知道何时、 何地是不使用本机 JavaScript 在他 jQuery 方法内的。

+ 1,但在 4 上没有您的意思是 JQuery 可能不选择吗?

@ByronWhitlock whoops,一个过多的编辑操作引起逻辑反转。谢谢 !:)

.classList.remove('foo')似乎在较新的浏览器中工作正常

@Tyilo classList.remove 是没有在 IE9 中为实现示例caniuse.com/#feat=classlist的 HTML5 类列表 API 的一部分

内容来源于Stack Overflow When to use Vanilla JavaScript vs. jQuery?
请输入您的翻译

When to use Vanilla JavaScript vs. jQuery?

确认取消