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 ऑब्जेक्ट्ससह कार्य करण्यासाठी निवडक वापरते (CSS आणि त्याचे वर्ग लक्षात ठेवा?). म्हणून, jQuery मध्ये, जर तुम्हाला काही ऑब्जेक्ट किंवा ऑब्जेक्ट्सचा समूह निवडायचा असेल, तर तुम्हाला त्यांचा निवडकर्ता सेट करणे आवश्यक आहे.
उदाहरणे:
| कोड | वर्णन | नोंद | |
|---|---|---|---|
| १ | $("div") | DIV टॅगसह सर्व ऑब्जेक्ट्स निवडते | अनेक वस्तू |
| 2 | $("img.#image123") | IMG टॅग आणि ID == image123 सह सर्व ऑब्जेक्ट्स निवडते | एक वस्तू |
| 3 | $("#image123") | ID == image123 सह सर्व ऑब्जेक्ट्स निवडते | एक वस्तू |
| 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"));