'$ (यह)' और 'यह' में क्या अंतर है?

567

मैं वर्तमान में इस ट्यूटोरियल के माध्यम से काम कर रहा हूँ: jQuery के साथ शुरुआत करना

नीचे दो उदाहरणों के लिए:

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

पहले उदाहरण में सूचना, हम $(this)प्रत्येक liतत्व के अंदर कुछ पाठ संलग्न करने के लिए उपयोग करते हैं । दूसरे उदाहरण में हम thisफॉर्म को रीसेट करते समय सीधे उपयोग करते हैं।

$(this)की तुलना में अधिक बार उपयोग किया जा रहा है this।

मेरा अनुमान पहले उदाहरण में है, $()प्रत्येक liतत्व को एक jQuery ऑब्जेक्ट में परिवर्तित कर रहा है जो append()फ़ंक्शन को समझता है जबकि दूसरे उदाहरण reset()को सीधे फॉर्म पर बुलाया जा सकता है।

मूल रूप से हमें $()विशेष jQuery- केवल फ़ंक्शंस की आवश्यकता है।

क्या ये सही है?

javascript jquery this

— केविन वू
स्रोत

2

@ रीगेल, यह क्यों संरक्षित किया गया था? ओपी ने सवाल किया और सही जवाब का अनुमान लगाया।

— Vol7ron

21

@ रीगेल: मुझे लगता है कि मुझे इसे मेटा में पूछना चाहिए, लेकिन अगर यह सब संरक्षण के लिए आवश्यक है, तो सभी सवालों को संरक्षित

— vol7ron

516

हाँ, आपको केवल तभी आवश्यकता होगी $()जब आप jQuery का उपयोग कर रहे हों। यदि आप डोम चीजों को करने के लिए jQuery की मदद चाहते हैं तो बस इसे ध्यान में रखें।

$(this)[0] === this

मूल रूप से हर बार जब आपको तत्वों का एक सेट वापस मिलता है तो jQuery इसे jQuery ऑब्जेक्ट में बदल देता है । यदि आप जानते हैं कि आपके पास केवल एक परिणाम है, तो यह पहले तत्व में होने वाला है।

$("#myDiv")[0] === document.getElementById("myDiv");

और इसी तरह...

— स्पेंसर रूपर्ट
स्रोत

3

वहाँ का उपयोग करने के लिए एक कारण है $(this)[0]से अधिक thisवे हमेशा एक ही कर रहे हैं?

— जय

2

@ जय यदि आप केवल 'इस' का उपयोग करके लंबे समय से टाइप करना पसंद करते हैं, तो हाँ। $ () jQuery का कंस्ट्रक्टर फ़ंक्शन है। "यह 'आह्वान के DOM तत्व का एक संदर्भ है। इसलिए मूल रूप से, $ (यह) में, आप बस इसे एक पैरामीटर के रूप में $ () में पारित कर रहे हैं ताकि आप jQuery के तरीकों और कार्यों को कॉल कर सकें"।

— जूलिवर गैलेटो

2

@ संजय - इसका उपयोग करने का कोई अच्छा कारण नहीं है कि $(this)[0]मैं इसका उपयोग केवल अवधारणा को समझाने के लिए कर रहा था। :) मैं प्रयोग करते हैं $("#myDiv")[0]से अधिक document.getElementById("myDiv")है, हालांकि।

— स्पेंसर रूपॉर्ट

369

$() jQuery का कंस्ट्रक्टर फ़ंक्शन है।

this आह्वान के DOM तत्व का संदर्भ है।

तो मूल रूप से, में $(this), आप बस एक पैरामीटर के रूप thisमें गुजर रहे हैं $()ताकि आप jQuery के तरीकों और कार्यों को कॉल कर सकें।

— Reigel
स्रोत

92

हां, आपको $(this)jQuery फ़ंक्शंस की आवश्यकता है , लेकिन जब आप jQuery का उपयोग न करने वाले तत्व की मूल जावास्क्रिप्ट विधियों का उपयोग करना चाहते हैं, तो आप बस उपयोग कर सकते हैं this।

— एलेक्स राजा
स्रोत

74

उपयोग करते समय jQuery, $(this)आमतौर पर उपयोग करने की सलाह दी जाती है । लेकिन अगर आप जानते हैं (आपको सीखना चाहिए और जानना चाहिए) अंतर, कभी-कभी यह सिर्फ उपयोग करने के लिए अधिक सुविधाजनक और तेज होता है this। उदाहरण के लिए:

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

की तुलना में आसान और शुद्ध है

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});

— फ्रेड्रिक गॉस
स्रोत

9

मैंने उदाहरण दिया। धन्यवाद !

— अम्मार

46

thisतत्व है, $(this)उस तत्व के साथ निर्मित jQuery वस्तु है

$(".class").each(function(){
 //the iterations current html element 
 //the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
 var HTMLElement = this;

 //the current HTML element is passed to the jQuery constructor
 //the jQuery API is exposed here (such as .html() and .append())
 var jQueryObject = $(this);
});

गहरा रूप

this^{एमडीएन} एक निष्पादन संदर्भ में निहित है

गुंजाइश वर्तमान निष्पादन संदर्भ ^ECMA को संदर्भित करता है । समझने के लिए this, जावास्क्रिप्ट में जिस तरह से निष्पादन संदर्भ संचालित होते हैं , उसे समझना महत्वपूर्ण है।

निष्पादन संदर्भ इसे बांधते हैं

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

jQuery इसे बांधता है

निष्पादन संदर्भ एक तार्किक स्टैक बनाते हैं। नतीजा यह है कि स्टैक में गहरे संदर्भ पिछले चर तक पहुंचते हैं, लेकिन उनके बाइंडिंग को बदल दिया गया हो सकता है। हर बार jQuery कॉलबैक फ़ंक्शन को कॉल करता है, यह apply^MDN का उपयोग करके इस बाइंडिंग को बदल देता है ।

callback.apply( obj[ i ] )//where obj[i] is the current element

कॉलिंग applyका परिणाम यह है कि jQuery कॉलबैक फ़ंक्शन के अंदर, कॉलबैक फ़ंक्शनthis द्वारा उपयोग किए जा रहे वर्तमान तत्व को संदर्भित करता है ।

उदाहरण के लिए, .eachकॉलबैक फ़ंक्शन आमतौर पर उपयोग के लिए अनुमति देता है .each(function(index,element){/*scope*/})। उस दायरे में, this == elementसच है।

jQuery के कॉलबैक वर्तमान तत्व के साथ बुलाए जाने वाले फ़ंक्शन को बांधने के लिए लागू फ़ंक्शन का उपयोग करते हैं। यह तत्व jQuery वस्तु के तत्व सरणी से आता है। निर्मित प्रत्येक jQuery ऑब्जेक्ट में तत्वों की एक सरणी होती है जो चयनकर्ता ^{jQuery एपीआई से} मेल खाती है जिसका उपयोग jQuery ऑब्जेक्ट को तुरंत करने के लिए किया गया था।

$(selector)jQuery फ़ंक्शन को कॉल करता है (याद रखें कि $यह एक संदर्भ है jQuery, कोड window.jQuery = window.$ = jQuery;:)। आंतरिक रूप से, jQuery फ़ंक्शन एक फ़ंक्शन ऑब्जेक्ट को तत्काल बदल देता है। तो जबकि यह तुरंत स्पष्ट नहीं हो सकता है, $()आंतरिक रूप से उपयोग करता है new jQuery()। इस jQuery ऑब्जेक्ट के निर्माण का एक हिस्सा चयनकर्ता के सभी मैचों को खोजने के लिए है। कंस्ट्रक्टर html स्ट्रिंग्स और तत्वों को भी स्वीकार करेगा । जब आप thisjQuery कंस्ट्रक्टर के पास जाते हैं, तो आप एक jQuery ऑब्जेक्ट के साथ निर्माण के लिए वर्तमान तत्व पास कर रहे हैं । JQuery ऑब्जेक्ट में चयनकर्ता से मेल खाने वाले DOM तत्वों की एक सरणी जैसी संरचना होती है (या मामले में सिर्फ एक तत्व this)।

एक बार jQuery ऑब्जेक्ट के निर्माण के बाद, jQuery एपीआई अब सामने आ गया है। जब एक jQuery एपीआई फ़ंक्शन कहा जाता है, तो यह आंतरिक रूप से इस सरणी जैसी संरचना पर पुनरावृति करेगा। सरणी में प्रत्येक आइटम के लिए, यह कॉलबैक फ़ंक्शन को कॉल करता है, thisवर्तमान तत्व के कॉलबैक को बाइंड करता है। इस कॉल को ऊपर दिए गए कोड स्निपेट में देखा जा सकता है, जहां objसरणी जैसी संरचना है, और iवर्तमान तत्व के सरणी में स्थिति के लिए उपयोग किया जाने वाला पुनरावृत्ति है।

— ट्रैविस जे
स्रोत

39

हाँ, का उपयोग करके $(this), आपने ऑब्जेक्ट के लिए jQuery कार्यक्षमता सक्षम की। केवल उपयोग करने से this, यह केवल सामान्य जावास्क्रिप्ट कार्यक्षमता है।

— रे लू
स्रोत

-1

thisएक जावास्क्रिप्ट ऑब्जेक्ट को संदर्भित करता है और $(this)jQuery के साथ एनकैप्सुलेट करता है।

उदाहरण =>

// Getting Name and modify css property of dom object through jQuery
var name = $(this).attr('name');
$(this).css('background-color','white')

// Getting form object and its data and work on..
this = document.getElementsByName("new_photo")[0]
formData = new FormData(this)

// Calling blur method on find input field with help of both as below
$(this).find('input[type=text]')[0].blur()

//Above is equivalent to
this = $(this).find('input[type=text]')[0]
this.blur()

//Find value of a text field with id "index-number"
this = document.getElementById("index-number");
this.value

or 

this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')

— ललित कुमार मौर्य
स्रोत