我应该使用哪种方法（.attr() vs .prop()）以获得更好的性能和使用体验？

10 浏览
0 Comments

我应该使用哪种方法（.attr() vs .prop()）以获得更好的性能和使用体验？

点击选择器时，我想获取元素的样式。我想知道该使用哪种方法：$(this).prop(\'style\')还是$(this).attr(\'style\')？\n我已经在下面的\"fiddle\"中解决了这个问题。请检查一下...\n点击这个fiddle链接: http://jsfiddle.net/maniator/JpUF2/\n希望这对你有帮助...

0

3 答案

0 Comments

问题的出现原因是想要确定在性能和使用方面应该使用哪种方法（.attr() vs .prop()）。

解决方法是通过以下方式来确定：

1. 检查HTML和Javascript代码示例中的差异。

2. 理解变量getAtt、thisProp和thisAttr的值。

3. 比较这些值以确定哪种方法更适合性能和使用。

首先，检查HTML和Javascript代码示例。代码中的HTML部分是一个带有id和style属性的

元素。Javascript部分通过id选择器获取该元素，并定义了一个click事件处理程序。

然后，理解变量getAtt、thisProp和thisAttr的值。变量getAtt通过使用原生的getAttribute方法获取元素的style属性值。变量thisProp通过使用jQuery的prop方法获取元素的style属性值，并返回一个CSSStyleDeclaration对象。变量thisAttr通过使用jQuery的attr方法获取元素的style属性值。

最后，比较这些值以确定哪种方法更适合性能和使用。根据示例中的结果，变量getAtt和thisAttr的值相同，都是元素的style属性值。而变量thisProp的值是一个CSSStyleDeclaration对象，它提供了更多与样式相关的属性和方法。

如果只需要获取元素的style属性值，使用.attr('style')方法或原生的getAttribute方法都可以。然而，如果需要对元素的样式进行更复杂的操作，如修改、添加或删除样式属性，使用.prop('style')方法可以更方便和灵活。

希望这篇文章对你有所帮助 🙂

0
0 Comments

这是因为有时候我们需要获取DOM元素的属性或者属性值，但是我们不确定应该使用哪种方法，即`.attr()`还是`.prop()`，以达到更好的性能和使用效果。

解决方法是根据我们要获取的是属性还是属性值来选择使用`.attr()`或者`.prop()`方法。如果我们需要获取DOM元素的属性，比如`style`属性，那么我们应该使用`.attr()`方法。而如果我们需要获取DOM元素的属性值，比如`tagName`属性的值，那么我们应该使用`.prop()`方法。

以下是示例代码：

// 使用 .attr() 方法获取属性
var styleAttr = $('div').attr('style');
console.log(styleAttr);
// 使用 .prop() 方法获取属性值
var tagNameProp = $('div').prop('tagName');
console.log(tagNameProp);

通过这种方式，我们可以根据具体的需求选择使用`.attr()`或者`.prop()`方法，以提高性能和使用效果。

0
0 Comments

这篇文章主要讨论了在使用jQuery时，使用.attr()和.prop()方法的性能和用法的问题。作者通过对所有属性进行测试，得出了使用.attr()和.prop()方法的区别和适用范围。

测试结果表明，使用1.7.2和1.8pre版本的jQuery，在以下属性上，无论使用.attr()还是.prop()方法，jQuery内部都会实际上使用.prop()方法：

async, autofocus, autoplay, checked, controls, defer, disabled, hidden, loop, multiple, open, readonly, required, scoped, selected

对于HTML元素（不考虑window、document等），除非使用.attr()方法，否则jQuery不会设置以下属性：

accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime, default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind, language, list, location, manifest, nodeName, nodeType, novalidate, pubdate, radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName

另外，对于以下属性，jQuery无论使用.attr()还是.prop()方法，结果都是一样的。无论你使用.prop()还是.attr()，jQuery都会使用你使用的方法。不考虑语义上的考虑，仅仅从.prop()方法比.attr()方法快2.5倍的性能上考虑，jQuery建议使用.attr()方法，但也可以使用.prop()方法提高性能：

accept, action, align, alt, autocomplete, border, challenge, charset, cite, class, code, color, cols, colspan, contenteditable, coords, data, defaultValue, dir, draggable, enctype, for, headers, height, hidden, high, href, hreflang, id, keytype, label, lang, low, max, maxlength, media, method, min, name, optimum, pattern, ping, placeholder, poster, preload, readonly, rel, required, reversed, rows, rowspan, sandbox, scope, shape, size, span, spellcheck, src, srcdoc, start, step, summary, tabindex, target, title, type, usemap, value, width, wrap

文章最后提到，这两个方法的区别不仅仅是性能上的差异，它们的功能也不相同。

根据测试结果，作者建议在使用jQuery时，根据具体需求选择使用.attr()方法还是.prop()方法。

0