🚣🏽 🏺 〰️ jQuery अंदर से बाहर - डोम में हेरफेर 💅🏾 🖱️ 👨🏾‍⚖️

छुट्टियां जारी हैं और हम इसका उपयोग नए ज्ञान प्राप्त करने, पुराने को मजबूत करने और विस्तार करने के लिए करेंगे।

मैंने लंबे समय तक सोचा कि आगे क्या विश्लेषण करना है - गुण, गुण और डेटा या डोम के साथ हेरफेर, मैंने भी दोनों लेख लिखना शुरू कर दिया। और पहले तो पहले विषय को देना अच्छा लगेगा, लेकिन पिछले विषय पर टिप्पणियों में हमने पहले से ही स्क्रिप्ट के साथ काम करने की एक विशेषता पर ध्यान आकर्षित किया, जो सिर्फ दूसरे विषय से संबंधित है, इसलिए हमने इसमें देरी नहीं की और इसके साथ शुरू करें। उसी समय, मैं उन लोगों से माफी मांगता हूं जिन्होंने लेख की शुरुआत देखी, जिन्हें मैंने गलती से लेखन प्रक्रिया के दौरान प्रकाशित किया था।

इसलिए, आज हम संख्या 1.8.3 (लेखन के समय स्थिर संस्करण) के तहत jQuery के स्रोतों में खुदाई की श्रृंखला जारी रखते हैं। हमें पहले से ही jQuery का एक सामान्य विचार मिला है , और html पार्सिंग भी । यह समय है कि हम कहीं न कहीं डालने के लिए तैयार हैं।

डोम के साथ लगभग कोई भी काम डोमिनिप फ़ंक्शन के माध्यम से jQuery को जाता है। हम उन सभी कार्यों पर विचार नहीं करेंगे जिनके साथ आप लाइब्रेरी में DOM बदल सकते हैं। आइए केवल मूल पर विचार करें।

domManip

इस उपयोगिता फ़ंक्शन का उद्देश्य प्रत्येक तत्व को एक विशिष्ट कॉलबैक करना है, लेकिन फिर भी बहुत सारे अतिरिक्त काम करते हैं।

domManip बारे में domManip बात न करने के लिए, यहाँ domManip का पूरा कोड है:

 append: function() { return this.domManip(arguments, true, function( elem ) { if ( this.nodeType === 1 || this.nodeType === 11 ) { this.appendChild( elem ); } } ); },

संक्षिप्त रूप में कहें, तो प्रत्येक तत्व में (यदि यह एक सामान्य ELEMENT_NODE या DOCUMENT_FRAGMENT_NODE ) तो हमारे सेट वर्तमान jQuery ऑब्जेक्ट में, पैरामीटर से फ़ंक्शन तक का एक तत्व सामान्य appendChild माध्यम से जोड़ा जाएगा।

फ़ंक्शन के अंदर एक टुकड़ा बनाया गया है ( बिल्डफ़्रेग्मेंट और पिछले लेख से हमें परिचित कार्यों को साफ ), जबकि clean अंदर, सभी स्क्रिप्ट एकत्र की जाती हैं जो परिणामस्वरूप टुकड़े में नहीं आएंगी लेकिन एक अलग सरणी में वापस आ जाएंगी ।

इसके अलावा, हमारे jQuery ऑब्जेक्ट में प्रत्येक तत्व के लिए, उसके संदर्भ में, उसी कॉलबैक को निष्पादित किया जाएगा, जिसके इनपुट को क्लोन किए गए टुकड़े को परोसा जाएगा जो हमने ऊपर प्राप्त किया था।

पैरामीटर के रूप में कार्य

domManip (क्रमशः, और इसका उपयोग करने वाले फ़ंक्शंस) एक फ़ंक्शन को इनपुट के रूप में स्वीकार कर सकते हैं, जिस स्थिति में इसे jQuery ऑब्जेक्ट में प्रत्येक तत्व को इसके संदर्भ में बुलाया जाएगा जिसे हम इसमें पास करना चाहते हैं।

स्टूडियो में बेकार (लेकिन दृश्य, मुझे आशा है) उदाहरण:

 <span class="user" data-id="15"></span> <span class="user" data-id="10"></span> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script> //     -   ,    $('span.user').prepend( function(idx, html) { //         , //     console.log(idx, html); //  $.data      return $(this).data('id') + ': '; } ); </script>

इस स्थिति में, प्रत्येक वर्ग की शुरुआत में "उपयोगकर्ता" के साथ एक टेक्स्ट नोड जोड़ा जाएगा, जिसकी सामग्री में उपयोगकर्ता शामिल होंगे:

 jQuery.fn.prepend = function() { //            span'  jQuery- return this.domManip(arguments, true, function( elem ) { //      //   span.user,    (this) // 1 -> ELEMENT_NODE // 11 -> DOCUMENT_FRAGMENT_NODE //     span'  if ( this.nodeType === 1 || this.nodeType === 11 ) { //  elem (   -    "xx: ") //     span (  ,   ) this.insertBefore( elem, this.firstChild ); } } ); };

स्क्रिप्ट

लिपियों के बारे में क्या, हमने उन्हें अलग से क्यों एकत्र किया? प्रत्येक स्क्रिप्ट को नियमित रूप से विकसित किया जाएगा । यदि यह src विशेषता वाली एक script , तो यह पूर्व- समकालिक रूप से लोड की जाएगी (स्क्रिप्ट निष्पादन आदेश का अनुपालन करने के लिए)। इस तरह की स्क्रिप्ट डोम में नहीं मिलेगी।

 $('<div>').append('<script>alert(1);</script>')

यह पिछले विषय पर टिप्पणियों से एक उदाहरण है (धन्यवाद alisey )। कृपया ध्यान दें कि निर्मित div हवा में लटका हुआ है, यह दस्तावेज़ में नहीं है, हालांकि, इस मामले में स्क्रिप्ट अभी भी निष्पादित की जाएगी ।

स्क्रिप्ट की प्रविष्टि के साथ src विशेषता के साथ एक पकड़ भी है। script प्रकार के साथ jQuery.getScript और jQuery.ajax के साथ एक ही बात (ये सभी एनालॉग हैं)। डिफ़ॉल्ट रूप से, jQuery का मानना है कि इसे कैश करने की आवश्यकता नहीं है और स्टार्टअप पर वर्तमान यूनिक्स-टाइमस्टैम्प के साथ एक पैरामीटर जोड़ता है। इस मामले में, यदि ब्राउज़र सर्वर से प्रतिक्रिया को कैश करना चाहता है (यह सभी हेडर पर निर्भर करता है), तो वह इसे url में कैश करेगा, जहां टाइमस्टैम्प होगा, जो कि कुछ (बल्कि ज्यादातर में) मामलों में स्वीकार्य नहीं है, क्योंकि अगले समान अनुरोध फिर से कैश को अतीत में ले जाएगा। और फिर इसे url में टाइमस्टैम्प के साथ कैश किया जाएगा।

इस स्थिति में, यह कोड खराब है, ऐसा न करें :

 $('<script>', { 'src': 'http://code.jquery.com/jquery-1.8.3.min.js' } ).appendTo(document.body);

और इसलिए - आप लंबे समय तक रह सकते हैं, देशी जावास्क्रिप्ट:

 var scriptElement = document.createElement('script'); scriptElement.setAttribute('src', 'http://code.jquery.com/jquery-1.8.3.min.js'); document.body.appendChild(scriptElement);

jQuery.empty और jQuery.remove

ये कार्य domManip द्वारा काम करते हैं और सामान्य रूप से हटाने वाले गिल्ड के माध्यम से पेड़ से वस्तुओं को हटाने में शामिल होते हैं। jQuery.remove शिकार के सभी नेस्टेड तत्वों को हटाता है, और jQuery.remove केवल उन नोड्स को हटाता है जो इस फ़ंक्शन को कॉल के पैरामीटर में निर्दिष्ट चयनकर्ता को फिट करते हैं। दोनों विधियां क्लीनडाटा फ़ंक्शन को कॉल करती हैं, जो हमें अभी तक ज्ञात नहीं है, जिसके संचालन के बारे में हम अगले भाग में चर्चा करेंगे।

jQuery.html

यह फ़ंक्शन, यदि कॉल के दौरान कोई पैरामीटर निर्दिष्ट नहीं किया गया है, तो हमारे टैग की सामग्री, इसकी innerHTML संपत्ति का मूल्य लौटाता है , जिसमें से jQuery उपयोगिता गुण पहले हटा दिए जाएंगे।

यदि कोई पैरामीटर निर्दिष्ट किया जाता है, तो हमारे jQuery ऑब्जेक्ट के सभी नोड्स में अधिकांश मामलों में पुस्तकालय (फिर से, यदि कोड में script , style , link टैग नहीं हैं और पहला टैग उस wrapMap में नहीं पाया जाता है wrapMap हम पिछले लेख में परिचित हैं) wrapMap गुण सेट करने का प्रयास करेंगे सीधे , अन्यथा यह पहले empty का उपयोग करके हमारे टैग की सामग्री को साफ़ करेगा, और फिर append का उपयोग करके इसमें कोड append ।

अंत में थोड़ा उर्फ

appendTo , prependTo , InsertBefore , insertAfter , replaceAll । उनके पास क्या आम है? वे, संक्षेप में, अन्य कार्यों के लिए उपनाम हैं , वे बस उन स्थानों को स्वैप करते हैं जहां फ़ंक्शन को लागू किया जाता है, इसके पैरामीटर के साथ। सीधे शब्दों में कहें, ऐसा कुछ होता है:

 $('<span>').appendTo(document.body) => $(document.body).append('<span>') $('span.user').insertAfter('span:first') => $('span:first').after('span.user')

निष्कर्ष

यह इस समय किसी भी तरह गड़बड़ था, है ना? मैं कुछ याद कर सकता था। किसी भी स्थिति में, यदि कोई प्रश्न छूट गया हो या कुछ झूठ बोला गया हो तो लिखें।

कोड लिखें और इसका आनंद लें!

jQuery अंदर से बाहर - डोम में हेरफेर