8.1 jQuery कनेक्ट करना
अंत में, हमें jQuery लाइब्रेरी मिल गई। जब तक यह लेख लिखा गया था, तब तक यह पहले से ही अप्रचलित हो चुका था और लगभग कभी भी नई परियोजनाओं में उपयोग नहीं किया गया था । लेकिन एक समय में यह बहुत लोकप्रिय था, बहुत अच्छी तरह से प्रलेखित था, और इसके उपयोग के साथ इंटरनेट पर बहुत सारे उदाहरण हैं ।
इसलिए, यदि आप एक छोटी सी वेब परियोजना लिख रहे हैं और आधुनिक ढांचे सीखने में महीनों खर्च नहीं करना चाहते हैं, तो मैं अनुशंसा करता हूं कि आप jQuery लाइब्रेरी का उपयोग करें।
हजारों jQuery कार्यों का उपयोग करने के लिए, आपको इसे अपने पृष्ठ में शामिल करने की आवश्यकता है। आप इसे इस प्रकार कर सकते हैं:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>JQuery के साथ काम करना दो प्रकारों में विभाजित किया जा सकता है।
सबसे पहले, आप एक jQuery लाइब्रेरी ऑब्जेक्ट प्राप्त कर सकते हैं, जो एक कस्टम jQuery ऑब्जेक्ट में लिपटा एक नियमित HTML तत्व है।
दूसरे, jQuery में कई वैश्विक वस्तुएं हैं जो HTML तत्वों से बंधी नहीं हैं। उनका भी उपयोग करने की आवश्यकता है।
पहले से शुरू करते हैं।
8.2 चयनकर्ताओं के साथ काम करना
jQuery वस्तुओं के साथ काम करने के लिए चयनकर्ताओं का उपयोग करता है (सीएसएस और इसकी कक्षाएं याद रखें?) इसलिए, jQuery में, यदि आप किसी वस्तु या वस्तुओं के समूह का चयन करना चाहते हैं, तो आपको उनके चयनकर्ता को सेट करने की आवश्यकता है।
उदाहरण:
| कोड | विवरण | टिप्पणी | |
|---|---|---|---|
| 1 | $("div") | DIV टैग वाले सभी ऑब्जेक्ट का चयन करता है | कई वस्तुएँ |
| 2 | $("img.#image123") | आईएमजी टैग और आईडी == छवि123 के साथ सभी वस्तुओं का चयन करता है | एक वस्तु |
| 3 | $("#छवि123") | आईडी के साथ सभी वस्तुओं का चयन करता है == छवि123 | एक वस्तु |
| 4 | $("div.article") | DIV टैग वाले सभी ऑब्जेक्ट का चयन करता है जिनमें क्लास आलेख है | कई वस्तुएँ |
मान लीजिए कि हम सभी लिंक्स में इवेंट हैंडलिंग जोड़ना चाहते हैं onclick, यहां बताया गया है कि हम इसे jQuery के साथ कैसे कर सकते हैं:
$("a").click(function() {
alert("Click");
});यहां तीन कदम उठाए गए हैं:
- चयनकर्ता से मेल खाने वाली वस्तु प्राप्त करता है
"a"। - हम एक अज्ञात फ़ंक्शन बनाते हैं जो कॉल करता है
alert()। clickहम इस फ़ंक्शन को पॉइंट 1 से सभी ऑब्जेक्ट्स के लिए इवेंट हैंडलर के रूप में सेट करते हैं ।
JQuery के बारे में एक और अच्छी बात यह है कि इसका कोड पढ़ने में आसान है। यह पता लगाने में ज्यादा समय नहीं लगता कि सब कुछ कैसे काम करता है। यदि कामकाजी कोड है, तो यह समझना काफी आसान है कि यह क्या करता है।
8.3 दस्तावेज़ तत्वों के साथ कार्य करना
आइए jQuery का उपयोग करके दस्तावेज़ के साथ काम करने के कुछ परिदृश्य देखें।
किसी तत्व का मान प्राप्त करें (उन तत्वों के लिए जिनमें मान हैं):
var result = $ ("selector").value();तत्व मान सेट करें (उन तत्वों के लिए जिनमें मान हैं):
$ ("selector").value(newValue);किसी तत्व के अंदर HTML कैसे जोड़ें?
$ ("selector").html(newHTML);और HTML कैसे प्राप्त करें जो तत्व के अंदर है?
var html = $ ("selector").html();क्या होगा यदि मैं HTML नहीं, बल्कि सादा पाठ प्राप्त/जोड़ना चाहता हूं? यहाँ भी कोई आश्चर्य नहीं।
var html = $ ("selector").text();क्या होगा यदि मैं किसी तत्व का रंग प्राप्त/बदलना चाहता हूं?
$ ("selector").color("red");यदि आपको शैलियों के साथ काम करने की ज़रूरत है, तो यह करना भी आसान है:
$ ("selector").css("color", "red");कैसे एक नया तत्व जोड़ने के लिए?
$ (".container").append($("h3"));