Adding jQuery to Web Pages

Adding jQuery to Web Page

jQuery एक popular JavaScript library है जो JavaScript के साथ कई common web development tasks को आसान बनाती है। इसका उपयोग DOM manipulation, event handling, animations और AJAX जैसे कामों के लिए किया जा सकता है।

jQuery को webpage पर use करने से पहले उसकी library को HTML document में include करना जरूरी होता है। जब तक jQuery browser में load नहीं होगी, तब तक $ या jQuery जैसे jQuery functions काम नहीं करेंगे।

jQuery को webpage में जोड़ने के मुख्य रूप से दो तरीके हैं:

• CDN के माध्यम से
• Local JavaScript file के माध्यम से

CDN से jQuery जोड़ना

CDN (Content Delivery Network) के माध्यम से jQuery जोड़ने के लिए आपको jQuery की hosted JavaScript file का URL अपने HTML page में <script> tag के अंदर देना होता है।

उदाहरण के लिए, Google-hosted CDN से jQuery को इस तरह include किया जा सकता है:

ऊपर src attribute में jQuery library का CDN URL दिया गया है। Browser इस URL से JavaScript file load करेगा और उसके बाद page पर jQuery available हो जाएगी।

CDN का फायदा

CDN का उपयोग करने का एक फायदा यह है कि jQuery file किसी external CDN server से load होती है। कुछ situations में browser के पास पहले से वही resource cached हो सकता है, जिससे दोबारा download करने की जरूरत कम हो सकती है। हालांकि caching का behavior browser और cache policies पर depend करता है।

CDN use करने पर आपको jQuery की file अपने hosting server पर manually upload करने की जरूरत भी नहीं पड़ती।

Local File से jQuery जोड़ना

अगर आप jQuery को अपने project के अंदर रखना चाहते हैं, तो आप jQuery की JavaScript file को download करके अपने project folder में रख सकते हैं। इसके बाद <script> tag के src attribute में उस file का path देना होता है।

मान लीजिए आपके project की structure इस तरह है:

my-project/
│
├── index.html
├── js/
│   └── jquery.min.js
└── script.js

अब index.html में jQuery को इस तरह include किया जा सकता है:

यहाँ js/jquery.min.js relative path है। इसका मतलब है कि jquery.min.js file, js folder के अंदर मौजूद है। अगर आपकी file किसी दूसरे folder में है तो path भी उसी के अनुसार बदलना होगा।

jQuery को Custom JavaScript से पहले Load करना

अगर आपके custom JavaScript code में jQuery का उपयोग किया जा रहा है, तो jQuery library को उस code से पहले load करना जरूरी है। वरना browser को $ या jQuery object नहीं मिलेगा और JavaScript error आ सकती है।

इसलिए सामान्य order इस तरह रखा जा सकता है:

1. सबसे पहले jQuery library load करें।
2. इसके बाद अपना jQuery-based JavaScript code load करें।

jQuery को Body के End में जोड़ना

jQuery को HTML document के end में, यानी closing </body> tag से ठीक पहले भी include किया जा सकता है। इसके बाद आपका custom JavaScript code रखा जा सकता है। इससे browser को page का HTML पहले parse करने का मौका मिलता है और कई सामान्य situations में JavaScript loading को page rendering के बाद रखना उपयोगी हो सकता है।

$(document).ready() क्या है?

jQuery में $(document).ready() का उपयोग तब code execute करने के लिए किया जाता है जब HTML document का DOM तैयार हो जाता है। इसका फायदा यह है कि आपका jQuery code उन HTML elements के साथ काम कर सकता है जिन्हें browser ने document में parse कर लिया है।

उदाहरण:

यहाँ $("#message") ID वाले element को select करता है और .text() method उसके text को बदल देती है।

jQuery का $ Symbol

jQuery में $ एक commonly used shorthand है। इसका उपयोग jQuery functions और selectors के साथ किया जाता है। उदाहरण के लिए:

$("#title")
$(".box")
$("p")

इनका अर्थ क्रमशः ID, class और tag selector के आधार पर elements को select करना है।

$ की जगह jQuery keyword भी इस्तेमाल किया जा सकता है। उदाहरण के लिए $(document) और jQuery(document) एक ही jQuery object को refer कर सकते हैं।

jQuery को Test करना

jQuery successfully load हुई है या नहीं, यह check करने के लिए एक simple example run किया जा सकता है:

अगर text successfully "jQuery is working!" में बदल जाता है, तो इसका मतलब है कि jQuery library load हो चुकी है और code successfully execute हो रहा है।

CDN और Local jQuery में Difference

CDN	Local File
Library external server से load होती है।	Library आपके अपने project/server से load होती है।
Project में file manually रखने की जरूरत नहीं होती।	jQuery file project में रखनी पड़ती है।
Internet connection required होता है ताकि CDN resource load हो सके।	File आपके server पर उपलब्ध होने के कारण external CDN dependency नहीं रहती।
URL के माध्यम से version select किया जाता है।	आप अपने project में मौजूद version को control कर सकते हैं।

jQuery जोड़ते समय ध्यान रखने वाली बातें

• jQuery library को use करने से पहले properly load करें।
• Custom jQuery code को library के बाद execute करें।
• CDN URL में सही version और URL का उपयोग करें।
• Local file use करते समय file path सही रखें।
• अगर $ is not defined जैसी error आए, तो सबसे पहले check करें कि jQuery properly load हुई है या नहीं।
• एक ही page पर बिना जरूरत jQuery को multiple times load न करें।
• Production project में वही library version use करें जिसे आपने अपने project के साथ test किया है।

jQuery जोड़ने के बाद क्या कर सकते हैं?

एक बार jQuery successfully load हो जाने के बाद आप इसके APIs का उपयोग करके कई common tasks आसानी से कर सकते हैं। जैसे:

• HTML elements को select और modify करना।
• HTML content और attributes बदलना।
• CSS properties modify करना।
• Click और दूसरे events handle करना।
• Elements को show और hide करना।
• Basic animations बनाना।
• AJAX requests के माध्यम से server से data लेना या भेजना।

Modern JavaScript और jQuery

आज के modern browsers में JavaScript के अंदर कई ऐसे features और APIs available हैं जिनसे DOM manipulation और event handling बिना jQuery के भी की जा सकती है। फिर भी पुराने projects, existing codebases और jQuery पर आधारित applications में jQuery को समझना उपयोगी हो सकता है।

इसलिए jQuery सीखते समय यह समझना जरूरी है कि jQuery JavaScript का replacement नहीं है, बल्कि JavaScript के ऊपर काम करने वाली एक library है जो कई common tasks को सरल syntax में करने की सुविधा देती है।

Important Points

• jQuery एक JavaScript library है।
• jQuery को webpage में use करने से पहले उसकी library include करनी होती है।
• jQuery को CDN या local file से add किया जा सकता है।
• jQuery-based code को library load होने के बाद execute करना चाहिए।
• $ jQuery का commonly used shorthand है।
• $(document).ready() DOM तैयार होने के बाद code execute करने के लिए उपयोग किया जाता है।
• Local jQuery use करते समय file path सही होना जरूरी है।
• jQuery DOM manipulation, events, animations और AJAX जैसे tasks में उपयोगी हो सकती है।

Conclusion

Web page में jQuery जोड़ना काफी simple है। आप इसे CDN URL के माध्यम से या अपनी project की local JavaScript file के रूप में include कर सकते हैं। jQuery को सही तरीके से load करने के बाद $ और दूसरे jQuery methods का उपयोग किया जा सकता है।

jQuery को समझने का सबसे important point यह है कि यह JavaScript की जगह कोई अलग programming language नहीं है, बल्कि JavaScript library है। इसे जोड़ने के बाद DOM manipulation, event handling और दूसरे common web development tasks को comparatively आसान syntax के साथ किया जा सकता है।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---