jquery चयनकर्ताओं और जेएस चयनकर्ताओं के बीच क्या अंतर है?

Question

नोब के लिए सरल सवाल। क्या इन चर के बीच कोई अंतर है?

var object1 = document.getElementById('myElement'); 
var object2 = $('#myElement'); 

इसके अलावा, क्या मैं ऑब्जेक्ट 2 पर सामान्य जेएस सामान चलाने में सक्षम हूं? उदाहरण के लिए, यदि #myElement है एक <textarea> मैं कर सकते हैं: एक बेहतर तरीका

$(object2).val('fill in with this text'); 

या, वहाँ है अभी तक:

object2.value = "fill in with this text"; 

या, मैं क्या करना चाहिए?

Answer 1

var object1 = document.getElementById('myElement'); 

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

object1.value = "text"; 

---

var object2 = $('#myElement'); 

आपको इस कॉल से एक jQuery वस्तु मिलता है। JQuery ऑब्जेक्ट के अंदर एक डोम ऑब्जेक्ट है। DOM ऑब्जेक्ट के लिए jQuery ऑब्जेक्ट को रैपर के रूप में सोचें।

jQuery ------------------+ 
|      | 
| Array ---------------+ | 
| |     | | 
| | HTMLElement------+ | | 
| | |    | | | 
| | | DOM properties | | | 
| | | DOM element | | | 
| | |  methods | | | 
| | |    | | | 
| | +----------------+ | | 
| | there may be zero, | | 
| | one or more such | | 
| | objects inside  | | 
| +--------------------+ | 
| jQuery properties  | 
| jQuery methods   | 
|      | 
+------------------------+ 

object2 के बाद से, एक jQuery वस्तु है आप val() फ़ंक्शन का उपयोग करें यह एक मूल्य देने के लिए: रेखचित्र यह कुछ इस तरह (सरलीकृत) लग रहा है। आप value संपत्ति का उपयोग नहीं कर सकते क्योंकि यह DOM ऑब्जेक्ट जैसा नहीं है।

object2.val("text"); 

अन्य उत्तर की तरह कहते हैं, आप कर सकते हैं पहुँच सरणी अपसंदर्भन (object2[0]) या get() फ़ंक्शन का उपयोग अंतर्निहित डोम वस्तु है, तो यह value का उपयोग कर एक मूल्य दे रही है।

Answer 2

ऑब्जेक्ट 2 अब एक jQuery ऑब्जेक्ट है, इसलिए इसे मानक तत्व के रूप में नहीं माना जा सकता है। हालांकि, आप इसे object2[0] संदर्भित कर सकते हैं जो आपको jQuery ऑब्जेक्ट में पहला तत्व देता है।

तो आप या तो object2[0].value = "fill in with this text"; का उपयोग कर सकते हैं या आप केवल jquery .val() तरीके का उपयोग कर सकते हैं। लेकिन यह भी ध्यान दें कि आप

$(object2).val('fill in with this text'); 

यह भी पर्याप्त होगा के रूप में

करने की ज़रूरत नहीं है:

object2.val('fill in with this text'); 

object2 के बाद से पहले से ही एक jQuery वस्तु है।

---

अन्त में एक नोट: jQuery(object1) आप देना होगा एक jQuery एक ही वस्तु के रूप में आप $('myElement') था, लेकिन jQuery चयनकर्ता कुछ मामलों में तेजी से या दस्तावेज़ के ऊपर अनुकूलित किया जा सकता है (जहां object1 पहले से ही एक डोम तत्व है) चयनकर्ता जो ब्राउज़र के मूल निवासी है। यह हमेशा तेज नहीं होगा, लेकिन कुछ मामलों में यह हो सकता है।

.getElementById (जैसा कि नीचे बताया गया है) चयन पर समान रूप से तेज़ होना चाहिए, लेकिन फिर इसे jQuery ऑब्जेक्ट में रखने का ओवरहेड है, इसलिए यह प्रकृति द्वारा, डिफ़ॉल्ट चयनकर्ता से धीमा होगा। बस उस पर निर्भर करता है जिसे आप पूरा करने की कोशिश कर रहे हैं, नच।

Answer 3

पहला डीओएम तत्व है, दूसरा एक डीओएम तत्व के संदर्भ में एक jQuery ऑब्जेक्ट है।

यह काम करेगा नहीं: object2.value = "fill in with this text"; के बाद से jQuery वस्तु एक .value संपत्ति नहीं है, लेकिन यह होगा:

object1.value = "fill in with this text"; 

$('#myElement') से कच्चे डोम तत्व प्राप्त करने के लिए, [0] या .get(0) इस तरह का उपयोग करें:

$('#myElement')[0].value = "fill in with this text"; 

Answer 4

एक jQuery चयनकर्ता $('#myElement') एक jQuery ऑब्जेक्ट देता है।

हालांकि, आप $('#myElement')[0] कर कर jQuery ऑब्जेक्ट से DOM तत्व प्राप्त कर सकते हैं।

तो, आप $(object2).val('fill in with this text') या $(object2)[0].value = 'fill in with this text'

Answer 5

$('idelement').val() कर तत्व का मान रूप में अच्छी तरह के रूप में वापस आ जाएगी document.getElementById('idelement').value कर सकते हैं। यह इस मंच पर मेरी पहली पोस्ट है, मैं इसे जितना संभव हो प्रारूपित करने की कोशिश कर रहा हूं।

यह मेरा क्रोम devtool से उत्पादन होता है $('idelement') और document.getElementById('idelement') बहुत अलग रूप में वे उत्पादन jQuery का उपयोग कर लिया गया मूल्यों के लिए विभिन्न डेटा संरचना यह बहुत है उपयोग करने के लिए $('idelement').val() नहीं $('idelement').value मामले में यू जावास्क्रिप्ट का उपयोग document.getElementById('idelement').value नहीं उपयोग कर रहे हैं document.getElementById('idelement').val()

आशा इस यू लोग

document.getElementById('compond_amount_txt') 
<input type=​"text" class=​"form-control" name=​"compond_amount_txt" id=​ 
"compond_amount_txt" value=​"10000" aria-describedby=​"basic-addon2">​ 

$('#compond_amount_txt') 
w.fn.init [input#compond_amount_txt.form-control]0: 
input#compond_amount_txt.form-controllength: 1__proto__: Object(0) 

$('#compond_amount_txt').value 
undefined 

$('#compond_amount_txt').val() 
"10000" 

document.getElementById('compond_amount_txt').val() 
VM4296:1 Uncaught TypeError: document.getElementById(...).val is not a 
function 
at <anonymous>:1:47 
(anonymous) @ VM4296:1 

document.getElementById('compond_amount_txt').value 
"10000"