jQuery: प्रोप बनाम attr ... स्पष्टीकरण

Question

नोट, यह .prop() vs .attr() का डुप्लिकेट नहीं है; वह प्रश्न प्रोप बनाम एटीआर की मूल कार्यक्षमता को संदर्भित करता है, जबकि यह प्रश्न सेटर्स के रूप में उनके मतभेदों के लिए विशिष्ट है।

.prop() का उपयोग करके सेट किया जाना चाहिए, इसे कम करने की कोशिश में, jQuery 1.7.2 के साथ परीक्षण में, नया तत्व बनाते समय .attr() के माध्यम से क्या सेट किया जाना चाहिए, मुझे लगता है कि प्रोप लगभग 2.5 गुना तेज, तो यह बेहतर लगता है।

accesskey, संरेखित, पृष्ठभूमि, bgcolor, वर्ग, contenteditable, ContextMenu, डेटा-XXXX, खींचने योग्य, ऊंचाई:

चीजों में से केवल सूची attr है कि मैं मिल सकता है का उपयोग कर स्थापित किया जाना attr के लिए इन देता है छिपा हुआ, आईडी, मद, itemprop, वर्तनी जाँच, शैली, विषय, tabindex, शीर्षक, वेलिजन, चौड़ाई

1. है यह पूरा (यानी, कुछ भी नहीं है कि सूची में - जैसे मिनट के रूप में, अधिकतम, कदम, आदि - प्रोप का उपयोग करना चाहिए)?

2. परीक्षण में, उनमें से कुछ प्रोप का उपयोग करते समय ठीक काम करने लगते हैं।

   आईडी, वर्ग, संरेखित, contenteditable, खींचने योग्य, छिपा हुआ, वर्तनी जाँच, tabindex, शीर्षक

3. वहाँ कुछ है: उपरोक्त सूची का परीक्षण, मुझे कोई प्रोप के साथ निम्न करने में कोई समस्या हुई है कारण, "एटीआर के साथ सेट करने के लिए सामान जो अभी भी प्रोप के साथ सेट करते समय काम करते हैं" की सूची के लिए, फिर भी इसे एटीआर के साथ क्यों सेट किया जाना चाहिए? यदि नहीं, तो जब बनाने तो 250% तेजी से प्रदर्शन एक बुनियादी <div id="foo" class="bar" draggable="true" title="zipzap"> मेरे लिए बहुत अच्छा लगता है ... :) सरल शब्दों पर इस को समझने के लिए

Answer 1

मुझे ऑनलाइन कोई पूरी सूची नहीं मिल रही है। हर कोई जो किसी भी प्रकार की सूची देता है, वह सिर्फ jQuery 1.6 ब्लॉग पोस्ट में दिए गए आंशिक प्रति को कॉपी करता है। # 3 के बारे में, स्टारक्स सॉर्टफ ने इसे यहां एक उत्तर में अपनी टिप्पणी में संबोधित किया। http://timmywillison.com/ एक सभ्य चर्चा के साथ बेहतर जानकारी में चला जाता है। एमडीएन और डब्ल्यू 3 सी चश्मा भी उल्लेख करते हैं कि विशेषताओं से विभिन्न इंटरफेस हैं जहां उन्हें सेट किया जा सकता है जैसे कि वे गुण थे (https://developer.mozilla.org/en/DOM/element), हालांकि एमडीएन वास्तव में उन लोगों को सूचीबद्ध नहीं करता है।एमडीएन का उल्लेख है कि प्रॉपर्टी इंटरफेस का उपयोग गेटएट्रिब्यूट का उपयोग करने से अधिक भंगुर है:

"हालांकि इन इंटरफेस को आम तौर पर अधिकांश HTML और XML तत्वों द्वारा साझा किया जाता है, तो DOM HTML विशिष्टता में सूचीबद्ध विशेष वस्तुओं के लिए अधिक विशिष्ट इंटरफेस होते हैं। नोट, हालांकि, ये HTML इंटरफेस "केवल [HTML 4.01] और [XHTML 1.0] दस्तावेज़ों के लिए हैं और एक्सएचटीएमएल के किसी भी भविष्य के संस्करण के साथ काम करने की गारंटी नहीं है।" एचटीएमएल 5 ड्राफ्ट का कहना है कि इसका उद्देश्य इन HTML के साथ पिछड़ा संगतता का लक्ष्य है इंटरफेस लेकिन उनके बारे में कहते हैं कि "कुछ विशेषताओं को जिन्हें पहले हटा दिया गया था, खराब समर्थन किया गया था, शायद ही कभी इस्तेमाल किया जाता है या अनावश्यक माना जाता है।" कोई भी पूरी तरह से DOM XML विशेषता विधियों जैसे getAttribute() पर जाकर संभावित संघर्ष से बच सकता है। "

हालांकि, अब यह मानना ​​सुरक्षित लगता है कि फ़ायरफ़ॉक्स और क्रोम में प्रदान किए गए किसी भी HTML5 ड्यूटेप पेज पहले से ही ऐसे माहौल में है जहां 'बहिष्कृत, खराब समर्थित', आदि इंटरफेस को पहले ही हटा दिया गया है।

इस प्रकार मैंने jQuery गुणों में उल्लिखित गैर-विशेषता गुणों का परीक्षण किया है, साथ ही प्रत्येक एचटीएमएल तत्व प्रकार के खिलाफ, बुलियन, स्ट्रिंग और इंट वैल्यू का उपयोग करके।

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

HTML तत्वों के लिए (खिड़की पर विचार नहीं, दस्तावेज़:

1.7.2 और 1.8pre, चाहे आप .prop फोन() या attr() का उपयोग करना, jQuery आंतरिक रूप से हमेशा वास्तव में .prop के लिए इस्तेमाल करेगा , आदि यहाँ), jQuery निम्नलिखित विशेषताओं में से किसी सेट हो जाएगा नहीं है जब तक आप .attr (का उपयोग करें):

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() या तो .prop साथ विशेषताओं की निम्न सूची (या .attr सेट हो जाएगा)। ऊपर की पहली सूची में, jQuery हमेशा .prop() का उपयोग करता है, भले ही आप .attr() या .prop() का उपयोग करते हों। इस सूची में विशेषताओं के लिए, jQuery जो भी आप उपयोग करते हैं उसका उपयोग करता है। यदि आप .prop() का उपयोग करते हैं, तो jQuery .prop(), और vica versa का उपयोग करता है। किसी भी मामले में, परिणाम वही है। तो किसी भी संभावित अर्थपूर्ण विचारों को अनदेखा करते हुए, प्रोप() को .attr() से 2.5 गुना तेज होने के संबंध में, jQuery 1.6.1 ब्लॉग पोस्ट से पता चलता है कि .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 

Answer 2

प्रयास करें।

.attr() तत्व की विशेषता देता है। उस विशेषता को जब पृष्ठ पर लोड किया गया था।

.prop(),,

• तत्व की संपत्ति देता है यह एक तत्व के राज्य, चेक बॉक्स के मामले में की तरह हो सकता है, यह या जाँच की जानी या तो कर सकते हैं अनियंत्रित।
• या, डिफ़ॉल्ट स्थिति के बाद से, इसे किसी तत्व की संशोधित विशेषता में संशोधित किया जा सकता है।

यह question में आपके सामने जाने वाले सभी अंतर हैं। आम तौर पर, जब डोम मैनिपुलेशन भाग के साथ काम करते हैं, तो आपको गुणों की बजाय संपत्ति की आवश्यकता होती है। टी.जे. द्वारा answer वास्तव में अवधारणा को साफ़ करता है।