मुझे $ (यह) क्यों उपयोग करना है?

Question

संभव डुप्लिकेट:
jQuery $(this) vs this

jQuery में कभी कभी मुझे लगता है कि एक समारोह के भीतर मैं का उपयोग करने के $(this) क्योंकि this काम नहीं करेगा:

var listItems = $('li'); 
listItems.each(function(index) { 
    $(this).css({ 

    }) 
}) 

कोई भी विचार कारण के कारण क्यों?

Answer 1

• $() है DOM element of invocation

के लिए एक संदर्भ तो बुनियादी तौर पर, jQuery constructor समारोह

this है आप एक jQuery object

में एक DOM reference चालू कर देते हैं अपने उदाहरण में, आप भी कर सकते थे

listItems.each(function(index, element){ 
    $(element).css({ 
    }); 
}); 

0 का उपयोग करें

.. से .each() दोनों कॉलबैक में इंडेक्स + तत्व दोनों पास करेगा।

Answer 2

this देशी डोम तत्व है। $(this) एक jQuery ऑब्जेक्ट है जो आपको .css() पर फ़ंक्शंस कॉल करने की अनुमति देता है।

Answer 3

this आमतौर पर डिफ़ॉल्ट रूप से एक DOM ऑब्जेक्ट होता है, जिसका अर्थ है कि इसमें केवल सामान्य DOM ऑब्जेक्ट्स पर विधियां हैं।

आप (जैसे jQuery के .css समारोह के रूप में) एक पुस्तकालय-विशेष समारोह आह्वान करने के लिए चाहते हैं, आप यह एक पूर्ण jQuery वस्तु पहले, जो है क्या $() डिफ़ॉल्ट रूप से करता है कन्वर्ट करने के लिए यदि आप इसे एक डोम वस्तु पारित किया है।

(आप अन्य चीजें $() पर भी भेज सकते हैं, जैसे कि HTML स्ट्रिंग (एक नई jQuery-wrapped DOM ऑब्जेक्ट बनाने के लिए) या एक सीएसएस चयनकर्ता (jQuery ऑब्जेक्ट्स का एक सेट प्राप्त करने के लिए जो चयनकर्ता से मेल खाने वाले डॉम ऑब्जेक्ट्स के अनुरूप है)

Answer 4

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

आमतौर पर, जब लोगों के पास डोम ऑब्जेक्ट होता है (चाहे इसे संदर्भित किया जाए this या element) वे हर बार वे एक jQuery विधि के लिए उपयोग की जरूरत है लपेटो करने की कोशिश करेंगे:

jQuery(this).css('a', 'b'); 

समस्या यह है जब आप इस कई बार कर रहे हैं:

jQuery(this).css('a', 'b'); 
jQuery(this).find('span').attr(...); 
jQuery(this).... 

हर बार jQuery() कहा जाता है, एक नया jQuery उदाहरण बनाया गया है। इस तरह का ऑपरेशन महंगा है और यदि संभव हो तो इससे बचा जाना चाहिए - खासकर लूप में!

इससे बचने के लिए, आप एक jQuery उदाहरण $(this).css(a,b).attr(a,b)... लौटने वाले सभी विधियों के साथ चेनिंग का उपयोग कर सकते हैं)। समय के बाकी आप एक स्थानीय रूप से घोषित चर कि jQuery उदाहरण के लिए संदर्भित करता होना चाहिए और उसके बाद सिर्फ इतना है कि का उपयोग करें:

var self = jQuery(this); 
self.css(...); 
self.attr(...); 

आप एक .each() कॉलबैक फ़ंक्शन के भीतर इस कर रहे हैं, वहाँ अभी भी एक नया jQuery वस्तु है हर एक पुनरावृत्ति पर बनाया जा रहा है। आप एक सामान्य jQuery वस्तु जो आप लगातार उत्परिवर्तित होने से इस से बच सकते हैं और फिर आपको लगता है कि एक उदाहरण बंद jQuery तरीकों से चला सकते हैं: इस पर

देखो:

$('a').each(function(i){ 
    $.single(this).append('Anchor number ' + i); 
}); 

:

jQuery.single = function(a){ 
    return function(b){ 
     a[0] = b; 
     return a 
    } 
}(jQuery([1])); 

अब इसे देखो

केवल एक jQuery ऑब्जेक्ट का उपयोग किया जा रहा है। सोचा के लिए

$_ = $.single; 
$('a').each(function(i){ 
    $_(this).append('Anchor number ' + i); 
}); 

खाद्य: आप इसे भी तेजी पहचानकर्ता संकल्प से बचने के लिए कर सकते हैं। अधिक जानकारी यहां: http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/

Answer 5

यदि आप फ़ायरफ़ॉक्स का उपयोग कर रहे हैं, तो अंतर देखने के लिए console.log ($ (this)) और console.log (यह) आज़माएं।