其他人的回答集中在“jQuery vs.纯JS”这个宽泛的问题上。从你的OP来看，我认为你只是想知道如果你已经选择使用jQuery，什么时候使用普通JS更好。你的例子是一个完美的例子，当你应该使用香草JS:

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

既慢，(在我看来)可读性较差:

this.id。

它更慢，因为你必须旋转一个新的JS对象，只是为了用jQuery的方式检索属性。现在，如果你要使用$(this)来执行其他操作，那么无论如何，将jQuery对象存储在一个变量中并对其进行操作。但是，我遇到过很多只需要元素的属性(比如id或src)的情况。

还有其他常见的做法吗 像这样的吗?某些Javascript 可以完成操作 更简单，无需引入jQuery 混合。或者这是一种罕见的情况?( jQuery的“快捷方式”实际需要 更多的代码)

我认为最常见的情况是你在你的帖子中描述的;人们不必要地在jQuery对象中包装$(this)。我最常看到的是id和value(而不是使用$(this).val())。

编辑:这里有一篇文章解释了为什么在attr()情况下使用jQuery比较慢。坦白:从标签维基上偷来的，但我认为这个问题值得一提。

再次编辑:考虑到直接访问属性的可读性/性能影响，我认为一个好的经验法则可能是尝试使用它。如果可能，<attributename>。在某些情况下，由于浏览器不一致，这种方法可能不起作用，但如果它不起作用，最好先尝试这种方法，然后再求助于jQuery。

$(this)与this不同:

通过使用$(this)，可以确保jQuery原型被传递到对象上。

已经有了一个公认的答案，但我相信这里直接输入的答案不能在本机javascript方法/属性列表中全面地保证跨浏览器支持。为此，请允许我把你引向quirkmode

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

它可能是关于在任何地方的任何浏览器上什么可以工作，什么不能工作的最全面的列表。请特别注意DOM部分。要读的东西很多，但重点不是全部读完，而是作为参考。

当我开始认真编写web应用程序时，我打印出了所有的DOM表，并把它们挂在墙上，这样我就能一眼知道哪些是安全的，哪些需要hack。这些天，当我有疑问时，我只是谷歌一些类似quirksmode parentNode兼容性的东西。

和其他事情一样，判断主要是一种经验。我不建议你阅读整个网站，记住所有的问题来弄清楚什么时候使用jQuery，什么时候使用纯JS。只是要注意这个列表。搜索起来很容易。随着时间的推移，你会发现什么时候纯JS更可取。

PS: PPK(网站的作者)也有一本非常好的书，我推荐你去读

其他人的回答集中在“jQuery vs.纯JS”这个宽泛的问题上。从你的OP来看，我认为你只是想知道如果你已经选择使用jQuery，什么时候使用普通JS更好。你的例子是一个完美的例子，当你应该使用香草JS:

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

既慢，(在我看来)可读性较差:

this.id。

它更慢，因为你必须旋转一个新的JS对象，只是为了用jQuery的方式检索属性。现在，如果你要使用$(this)来执行其他操作，那么无论如何，将jQuery对象存储在一个变量中并对其进行操作。但是，我遇到过很多只需要元素的属性(比如id或src)的情况。

还有其他常见的做法吗 像这样的吗?某些Javascript 可以完成操作 更简单，无需引入jQuery 混合。或者这是一种罕见的情况?( jQuery的“快捷方式”实际需要 更多的代码)

我认为最常见的情况是你在你的帖子中描述的;人们不必要地在jQuery对象中包装$(this)。我最常看到的是id和value(而不是使用$(this).val())。

编辑:这里有一篇文章解释了为什么在attr()情况下使用jQuery比较慢。坦白:从标签维基上偷来的，但我认为这个问题值得一提。

再次编辑:考虑到直接访问属性的可读性/性能影响，我认为一个好的经验法则可能是尝试使用它。如果可能，<attributename>。在某些情况下，由于浏览器不一致，这种方法可能不起作用，但如果它不起作用，最好先尝试这种方法，然后再求助于jQuery。

第一个答案作为DOM元素的live属性列表相当完整。

你可能会觉得认识其他人也很有趣。

当这是文件时:

这一点。获取当前文档表单的HTMLCollection， 这一点。锚来获得一个HTMLCollection的所有HTMLAnchorElements与名称被设置， 这一点。链接来获得一个包含所有HTMLAnchorElements的HTMLCollection，并设置href， 这一点。image来获取一个包含所有HTMLImageElements的HTMLCollection 对于已弃用的applet，如this.applet，也是如此

当你处理文档的时候。表单、文档。forms[formNameOrId]获取如此命名或标识的表单。

当这是一个表单时:

this[inputNameOrId]获取如此命名或标识的字段

当这是表单字段时:

这一点。类型以获取字段类型

在学习jQuery选择器时，我们经常跳过学习已经存在的HTML元素属性，因为它们访问起来非常快。

this.id (as you know) this.value (on most input types. only issues I know are IE when a <select> doesn't have value properties set on its <option> elements, or radio inputs in Safari.) this.className to get or set an entire "class" property this.selectedIndex against a <select> to get the selected index this.options against a <select> to get a list of <option> elements this.text against an <option> to get its text content this.rows against a <table> to get a collection of <tr> elements this.cells against a <tr> to get its cells (td & th) this.parentNode to get a direct parent this.checked to get the checked state of a checkbox Thanks @Tim Down this.selected to get the selected state of an option Thanks @Tim Down this.disabled to get the disabled state of an input Thanks @Tim Down this.readOnly to get the readOnly state of an input Thanks @Tim Down this.href against an <a> element to get its href this.hostname against an <a> element to get the domain of its href this.pathname against an <a> element to get the path of its href this.search against an <a> element to get the querystring of its href this.src against an element where it is valid to have a src

.．.我想你已经明白了。

有时，性能是至关重要的。比如，如果你在循环中多次执行某项操作，你可能想要抛弃jQuery。

一般来说，你可以替换:

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

:

上面的措辞很糟糕。getAttribute不是一个替换，但它检索从服务器发送的属性的值，其对应的setAttribute将设置它。在某些情况下是必要的。

下面的句子在某种程度上涵盖了它。请看这个答案，了解更好的治疗方法。

el.getAttribute('someName');

.．.以便直接访问属性。注意，属性与属性不同(尽管它们有时相互镜像)。当然还有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(span[0])，它看起来像是一个外部while的无限循环，但因为我们处理的是一个“活动列表”，当我们执行parent. removecchild (span[0]);时，它会被更新。这是我们在使用数组(或类数组对象)时忽略的一个非常漂亮的特性。