जावास्क्रिप्ट बनाम jQuery: प्रमुख अंतर जिसे आप जानना चाहते हैं

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

• जावास्क्रिप्ट: वेब विकास में एक शक्तिशाली भाषा
• JQuery: जावास्क्रिप्ट से विकसित एक पुस्तकालय
• JQuery क्यों बनाया गया है और JQuery की विशेष क्षमताएं क्या हैं
• उदाहरणों के साथ जावास्क्रिप्ट और JQuery के बीच अंतर
  • हमारे HTML दस्तावेज़ में जावास्क्रिप्ट और JQuery को जोड़ना
  • डोम ट्रैवर्सल और मैनीपुलेशन
  • घटना से निपटना
  • अजाक्स कॉल
  • एनीमेशन

जावास्क्रिप्ट: वेब विकास में एक शक्तिशाली भाषा

जावास्क्रिप्ट एक स्क्रिप्टिंग भाषा है जिसका उपयोग हमारे वेब पेजों में अन्तरक्रियाशीलता जोड़ने के लिए किया जाता है। यह HTML और CSS के साथ तीन मुख्य तकनीकों में से एक है जो वेब पेज बनाने के लिए उपयोग की जाती हैं। जबकि HTML और CSS वेब पेज की संरचना को परिभाषित करते हैं और वेब पेजों की बनावट / लुक / स्टाइलिंग करते हैं, जावास्क्रिप्ट का उपयोग वेब पेज को अंतःक्रियात्मकता से जोड़कर गतिशील बनाने के लिए किया जाता है जिसका अर्थ है कि जावास्क्रिप्ट के साथ हम माउस क्लिक, माउस ओवर और अन्य के लिए कुछ कोड जोड़ सकते हैं। वेब पेज पर घटनाओं और बहुत कुछ।

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

हमारे जावास्क्रिप्ट बनाम jQuery के साथ चलते हैं और जावास्क्रिप्ट से विकसित पुस्तकालय को समझते हैं।

jQuery: जावास्क्रिप्ट से विकसित एक पुस्तकालय

इन वर्षों में जावास्क्रिप्ट वेब विकास के लिए एक शक्तिशाली भाषा बन गई है। कई पुस्तकालय और रूपरेखाएँ सामने आई हैं जो जावास्क्रिप्ट के ऊपर बनी हैं। इन पुस्तकालयों और रूपरेखाओं को जावास्क्रिप्ट की क्षमता का विस्तार करने के लिए विकसित किया गया है, इसके साथ बहुत सी चीजें करते हैं और डेवलपर के काम को आसान बनाने के लिए भी।

jQuery जावास्क्रिप्ट का एक ऐसा पुस्तकालय है जो इसे बनाया गया है। यह जॉन इस्तीफे द्वारा आविष्कार की गई सबसे लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है और जनवरी 2006 में बारकैंप एनवाईसी में जारी की गई थी। jQuery मुफ़्त है, एक ओपन-सोर्स लाइब्रेरी है, जिसे एमआईटी लाइसेंस के तहत लाइसेंस प्राप्त है। इसमें क्रॉस-ब्राउज़र संगतता की एक शक्तिशाली विशेषता है। यह आसानी से क्रॉस-ब्राउज़र समस्याओं को संभाल सकता है जो हम जावास्क्रिप्ट के साथ सामना कर सकते हैं। इस प्रकार कई डेवलपर्स क्रॉस-ब्राउज़र संगतता मुद्दों से बचने के लिए jQuery का उपयोग करते हैं।

अब हमारे जावास्क्रिप्ट बनाम jQuery ब्लॉग के साथ चलते हैं और देखते हैं कि jQuery क्यों बनाया गया था।

JQuery क्यों बनाया गया है और jQuery की विशेष क्षमताएं क्या हैं?

जावास्क्रिप्ट में, हमें बेसिक ऑपरेशंस के लिए बहुत सारे कोड लिखने पड़ते हैं जबकि jQuery के साथ एक ही ऑपरेशन को कोड की एक लाइन के साथ किया जा सकता है। इसलिए डेवलपर्स को जावास्क्रिप्ट के साथ jQuery के साथ काम करना आसान लगता है।

• हालाँकि जावास्क्रिप्ट वह मूल भाषा है जहाँ से jQuery विकसित हुआ है, jQuery इवेंट हैंडलिंग, DOM हेरफेर करता है, Ajax जावास्क्रिप्ट की तुलना में बहुत आसान है। jQuery भी हमें अपने वेब पेज पर एनिमेटेड प्रभाव जोड़ने की अनुमति देता है जो जावास्क्रिप्ट के साथ बहुत दर्द और कोड की लाइनें लेता है।
• jQuery में वेब पेज पर एक ऑपरेशन करने के लिए इन-बिल्ट प्लग इन हैं। हमें इसका उपयोग करने के लिए बस अपने वेबपेज में प्लगइन को शामिल या आयात करना होगा। इस प्रकार प्लगइन्स हमें एनिमेशन और इंटरैक्शन या प्रभाव के सार बनाने की अनुमति देता है।
• हम jQuery के साथ अपने कस्टम प्लगइन भी बना सकते हैं। यदि हमें किसी वेब पेज पर एक निश्चित तरीके से एनीमेशन की आवश्यकता होती है, तो हम आवश्यकता के अनुसार एक प्लगइन विकसित कर सकते हैं और इसका उपयोग हमारे वेब पेज पर कर सकते हैं।
• jQuery में एक उच्च-स्तरीय UI विजेट लाइब्रेरी भी है। इस विजेट लाइब्रेरी में प्लगइन्स की एक पूरी श्रृंखला है जिसे हम अपने वेबपेज पर आयात कर सकते हैं और इसका उपयोग उपयोगकर्ता के अनुकूल वेब पेज बनाने के लिए कर सकते हैं।

चलो अंतर को समझते हैं।

जावास्क्रिप्ट बनाम jQuery

उदाहरण के साथ जावास्क्रिप्ट और jQuery के बीच अंतर के साथ आगे बढ़ना।

उदाहरणों के साथ जावास्क्रिप्ट बनाम jQuery

आइए उदाहरणों में देखें।

हमारे HTML दस्तावेज़ में जावास्क्रिप्ट और jQuery को जोड़ना

जावास्क्रिप्ट को टैग के अंदर सीधे HTML डॉक्यूमेंट में जोड़ा जाता है या HTML डॉक्यूमेंट में एक बाहरी जावास्क्रिप्ट फाइल को src विशेषता का उपयोग करके जोड़ा जा सकता है।
स्क्रिप्ट टैग के अंदर सीधे लिखा:

अलर्ट ('यह अलर्ट बॉक्स ऑनलोड घटना के साथ बुलाया गया था')

JQuery का उपयोग करने के लिए हम इसकी वेबसाइट से फ़ाइल डाउनलोड करते हैं और SCRIPT टैग के src विशेषता में डाउनलोड की गई jQuery फ़ाइल का पथ संदर्भित करते हैं या हम इसे सीधे CDN (सामग्री वितरण नेटवर्क) से प्राप्त कर सकते हैं।

CDN का उपयोग करना :

आइए DOM Traversal और Manipulation को समझते हैं

डोम ट्रैवर्सल और मैनीपुलेशन

जावास्क्रिप्ट में:

हम document.getElementById () विधि का उपयोग करके या document.querySelector () विधि का उपयोग करके जावास्क्रिप्ट में एक DOM तत्व का चयन कर सकते हैं।

var mydiv = document.querySelector ('# div1')

या

संदर्भ जावा द्वारा मूल्य बनाम पासिंग से गुजरना

document.getElementById ('# div1')

JQuery में:

यहां, हमें चयनकर्ता के साथ कोष्ठक में केवल $ प्रतीक का उपयोग करना होगा।

$ (चयनकर्ता) $ ('# div1') - चयनकर्ता एक आईडी 'div1' $ ('div1') है - चयनकर्ता एक वर्ग 'div1' $ ('p') है - चयनकर्ता अनुच्छेद है। Html पेज

उपरोक्त कथन में, $ एक संकेत है जिसका उपयोग jQuery तक पहुंचने के लिए किया जाता है, चयनकर्ता एक HTML तत्व है।

जावास्क्रिप्ट में शैलियों को जोड़ना:

document.getElementById ('myDiv')। style.backgroundColor = '# FFF'

JQuery में शैलियाँ जोड़ना:

$ ('# myDiv')। css (color बैकग्राउंड-कलर ',' # FFF ')

#MyDiv चयनकर्ता 'myDiv' पहचानकर्ता को संदर्भित करता है

DOM की तुलना में jQuery में DOM एलिमेंट सिलेक्शन और मैनिपुलेशन अधिक संक्षिप्त है।

इवेंट हैंडलिंग के साथ आगे बढ़ना।

घटना से निपटना

जावास्क्रिप्ट में, हम एक HTML तत्व का चयन करते हैं:

document.getElementById ('# बटन 1')। addEventListener ('क्लिक', myCallback) फ़ंक्शन myCallback () {कंसोल ('myCallback फ़ंक्शन के अंदर')}

यहां getElementById () विधि का उपयोग किसी तत्व को उसकी आईडी द्वारा चयन करने के लिए किया जाता है, फिर हम ईवेंटवेंटर को ईवेंट में जोड़ने के लिए addEventListener () विधि का उपयोग करते हैं। इस उदाहरण में, हम myCallback फ़ंक्शन को श्रोता के रूप में 'क्लिक' ईवेंट में जोड़ते हैं।

हम उपरोक्त उदाहरण में एक अनाम फ़ंक्शन का भी उपयोग कर सकते हैं:

document.getElementById ('# बटन 1')। addEventListener ('क्लिक', फंक्शन () {कंसोल.लॉग ('फंक्शन के अंदर)})

EventListener को RemoveEventListener () विधि का उपयोग करके हटाया जा सकता है

document.getElementById ('# बटन 1')। RemoveEventListener ('क्लिक करें', myLaller)

JQuery में

jQuery ने लगभग सभी DOM क्रियाओं के लिए घटनाओं को पूर्वनिर्धारित किया है। हम किसी क्रिया के लिए विशिष्ट jQuery इवेंट का उपयोग कर सकते हैं।

$ ('पी')। क्लिक करें (फ़ंक्शन () {// क्लिक करें कार्रवाई})

अन्य उदाहरण हैं:

$ ('# बटन 1')। Dblclick (फ़ंक्शन () {// आईडी with बटन 1 के साथ HTML तत्व पर डबल क्लिक करने की घटना के लिए}}

JQuery के 'ऑन' मेथड का उपयोग किसी एक तत्व में एक या अधिक ईवेंट जोड़ने के लिए किया जाता है।

$ ('# बटन 1')। ('क्लिक', फ़ंक्शन () {// एक्शन})

हम विधि के साथ कई ईवेंट और कई ईवेंट हैंडलर जोड़ सकते हैं।

$ ('बटन 1')। ({क्लिक करें: फ़ंक्शन () {// कार्रवाई यहाँ}, dblclick: फ़ंक्शन () {// कार्रवाई यहाँ}})

दो या अधिक घटनाओं में नीचे की तरह एक ही हैंडलर हो सकता है:

$ ('# बटन 1')। ('क्लिक करें डब्लक्लिक', फंक्शन () {// एक्शन})

इस प्रकार हम देखते हैं कि कम और संक्षिप्त कोड के साथ, जावास्क्रिप्ट की तुलना में jQuery में ईवेंट हैंडलिंग आसान है।

अजाक्स कॉल के साथ आगे बढ़ना।

अजाक्स कॉल

जावास्क्रिप्ट में

किसी सर्वर पर अजाक्स अनुरोध भेजने के लिए जावास्क्रिप्ट ने XMLHttpRequest ऑब्जेक्ट का उपयोग किया। XMLHttpRequest में अजाक्स कॉल करने के कई तरीके हैं। दो सामान्य तरीके खुले हैं (विधि, URL, async, उपयोगकर्ता, PSW), भेजें () और भेजें (स्ट्रिंग)।
पहले XMLHttpRequest बनाने दें:

var xhttp = new XMLHttpRequest () उसके बाद खुली हुई विधि को कॉल करने के लिए इस ऑब्जेक्ट का उपयोग करें: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp .send ()

खुली विधि एक सर्वर / स्थान के लिए अनुरोध प्राप्त करती है, यह सच है कि अनुरोध अतुल्यकालिक है। यदि मान गलत है, तो इसका मतलब है कि अनुरोध समकालिक है।

पोस्ट अनुरोध करना:

var xhttp = new XMLHttpRequest () तब इस विधि का उपयोग खुली विधि को कॉल करने और एक पोस्ट अनुरोध करने के लिए करें: xhttp.open ('POST', 'D: //postinfo.txt', true, xhttp.send ()

अनुरोध के साथ डेटा पोस्ट करने के लिए, हम सेट करने के लिए डेटा के प्रकार को परिभाषित करने के लिए xhttp के सेटRequestHeader विधि का उपयोग करते हैं और भेजने का तरीका डेटा को कुंजी / मान जोड़े में भेजता है:

xhttp.setRequestHeader ('सामग्री-प्रकार', 'आवेदन / x-www-form-urlencoded') xhttp.send ('नाम = रवि और उपनाम = कुमार')

JQuery में

jQuery के अजाक्स कॉल करने के लिए कई इनबिल्ट तरीके हैं। इन तरीकों से, हम सर्वर से किसी भी डेटा को कॉल कर सकते हैं और डेटा के साथ वेबपेज का एक हिस्सा अपडेट कर सकते हैं। jQuery के तरीके अजाक्स कॉल को आसान बनाते हैं।
JQuery लोड () विधि: यह विधि URL से डेटा प्राप्त करती है और डेटा को HTML चयनकर्ता को लोड करती है।
$ ('पी')। लोड (URL, डेटा, कॉलबैक)
URL वह स्थान है जिसे डेटा के लिए कहा जाता है, वैकल्पिक डेटा पैरामीटर वह डेटा (कुंजी / मूल्य जोड़े) है जिसे हम कॉल के साथ भेजना चाहते हैं और वैकल्पिक पैरामीटर 'कॉलबैक' वह विधि है जिसे हम लोड के बाद निष्पादित करना चाहते हैं। बन चूका है।

JQuery $ .get () और $ .post () विधि: यह विधि URL से डेटा प्राप्त करती है और डेटा को HTML चयनकर्ता को लोड करती है।
$ .get (URL, कॉलबैक)
URL वह स्थान है जिसे डेटा के लिए कहा जाता है और कॉलबैक वह विधि है जिसे हम लोड पूरा होने के बाद निष्पादित करना चाहते हैं।

$। post (URL, डेटा, कॉलबैक)
URL वह स्थान है जिसे डेटा के लिए कहा जाता है, डेटा वह कुंजी / मान युग्म / s है जिसे हम कॉल के साथ भेजना चाहते हैं और कॉलबैक वह विधि है जिसे हम लोड पूरा होने के बाद निष्पादित करना चाहते हैं। यहां डेटा और कॉलबैक पैरामीटर वैकल्पिक हैं।

jQuery के अजाक्स कॉल जावास्क्रिप्ट की तुलना में अधिक संक्षिप्त हैं। जावास्क्रिप्ट में, हम एक XMLHTTPRequest ऑब्जेक्ट का उपयोग कर रहे हैं, jQuery में हमें ऐसी किसी वस्तु का उपयोग नहीं करना है।

एनीमेशन के साथ चल रहा है।

एनीमेशन

जावास्क्रिप्ट में

जावास्क्रिप्ट में jQuery चेतन () फ़ंक्शन की तरह एक विशिष्ट एनीमेशन फ़ंक्शन नहीं है। जावास्क्रिप्ट एनीमेशन प्रभाव में मुख्य रूप से तत्व की शैली में हेरफेर करके या सीएसएस परिवर्तन, अनुवाद या चेतन गुणों का उपयोग करके प्राप्त किया जाता है। जावास्क्रिप्ट भी एनीमेशन प्रभाव के लिए setInterval (), clearInterval (), setTimeout () और clearTimeout () विधियों का उपयोग करते हैं।

setInterval (myAnimation, 4) फ़ंक्शन myAnimation () {document.getElementById (y # div1 ’) 20deg) '}

जावास्क्रिप्ट में एनीमेशन मुख्य रूप से सीएसएस गुणों में हेरफेर करने के बारे में है।

JQuery में

jQuery के HTML तत्वों पर एनिमेशन या प्रभाव जोड़ने के लिए कई इनबिल्ट तरीके हैं। आइए उनमें से कुछ की जाँच करें।
चेतन () विधि: इस विधि का उपयोग किसी तत्व पर एनीमेशन जोड़ने के लिए किया जाता है।

$ ('# बटन 1')। क्लिक करें (फ़ंक्शन () {$ ('# div1')। अंतरंग ({ऊंचाई: '300px'}))

शो () विधि: इस विधि का उपयोग किसी छिपे हुए राज्य से दिखाई देने वाले तत्व को बनाने के लिए किया जाता है।

$ ('# बटन 1')। क्लिक करें (फ़ंक्शन () {$ ('# div1')। शो ()})

छिपाने () विधि: यह विधि किसी तत्व को दृश्यमान स्थिति से छिपाने के लिए उपयोग की जाती है।

$ ('# बटन 1')। क्लिक करें (फ़ंक्शन () {$ ('# div1')। छिपाएँ ()})

jQuery के पास एक वेबपेज में एनीमेशन और प्रभाव पैदा करने के लिए अपने तरीके हैं।

योग करने के लिए, जावास्क्रिप्ट वेब विकास के लिए एक भाषा है, jQuery एक पुस्तकालय है जो जावास्क्रिप्ट से उत्पन्न हुआ है। वेब विकास में जावास्क्रिप्ट और jQuery का अपना महत्व है।

अब जब आप जावास्क्रिप्ट लूप के बारे में जानते हैं, तो देखें Edureka द्वारा। वेब डेवलपमेंट सर्टिफिकेशन ट्रेनिंग आपको HTML5, CSS3, Twitter बूटस्ट्रैप 3, jQuery और Google API का उपयोग करके प्रभावशाली वेबसाइट बनाने और इसे अमेज़ॅन सिंपल स्टोरेज सर्विस (S3) में तैनात करने में मदद करेगी।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'जावास्क्रिप्ट बनाम jQuery' के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।

ग्रहण में ककड़ी उदाहरण के साथ सेलेनियम वेबड्राइवर