Query का सिंटैक्स बहुत ही सरल और उपयोग में आसान है। इसकी डिज़ाइन ऐसी है कि आप कम कोड लिखकर अधिक कार्य कर सकें, जिसका मुख्य उद्देश्य डेवलपर्स के काम को सरल और प्रभावी बनाना है। इस अध्याय में, हम jQuery सिंटैक्स की बुनियादी जानकारी प्राप्त करेंगे और जानेंगे कि कैसे jQuery कोड लिखा और समझा जाता है।
jQuery के सिंटैक्स की नींव एक डॉलर साइन ($) से शुरू होती है, जो jQuery को संदर्भित करता है। इसके बाद, हम सेलेक्टर्स का उपयोग करते हैं जो HTML तत्वों को चुनने में मदद करते हैं, और फिर विभिन्न मेथड्स और फंक्शन्स का उपयोग करके उन तत्वों पर क्रियाएँ करते हैं।
इस अध्याय में, हम निम्नलिखित महत्वपूर्ण बिंदुओं को कवर करेंगे:
- बेसिक सिंटैक्स (Basic Syntax): jQuery कोड का सामान्य स्वरूप और संरचना।
- $(document).ready() का उपयोग (Using $(document).ready()): सुनिश्चित करना कि jQuery कोड तब तक निष्पादित न हो जब तक पूरा HTML डोक्यूमेंट लोड न हो जाए।
- jQuery सेलेक्टर्स (jQuery Selectors): HTML तत्वों को चुनने के विभिन्न तरीके।
इन बिंदुओं को समझने के बाद, आप jQuery कोड को आसानी से लिख और समझ सकेंगे, जिससे आपके वेब डेवलपमेंट कौशल में सुधार होगा। आइए, jQuery सिंटैक्स की इस यात्रा को शुरू करें और इसके बुनियादी सिद्धांतों को गहराई से समझें।
बेसिक सिंटैक्स (Basic Syntax)
jQuery का बेसिक सिंटैक्स बहुत ही सरल और सीधा है। इसका मुख्य उद्देश्य HTML डोक्यूमेंट के तत्वों को चुनना और उन पर विभिन्न कार्य करना है। jQuery सिंटैक्स हमेशा एक डॉलर साइन ($) से शुरू होता है, जिसे jQuery() फंक्शन के शॉर्टहैंड के रूप में उपयोग किया जाता है।
jQuery सिंटैक्स का मूल ढांचा
$(सेलेक्टर).क्रिया();
इस सिंटैक्स में:
$: jQuery को दर्शाता है।सेलेक्टर: HTML तत्व को चुनने के लिए उपयोग किया जाता है।क्रिया(): चुने गए तत्व पर क्रिया को निष्पादित करने के लिए उपयोग किया जाता है।
उदाहरण
- HTML तत्व को छिपाना (Hiding an HTML Element):
<!DOCTYPE html>
<html>
<head>
<title>Basic Syntax Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
इस उदाहरण में, जब डोक्यूमेंट पूरी तरह से लोड हो जाता है, तब $("p").hide(); कोड पेज पर मौजूद सभी <p> तत्वों को छिपा देता है।
- HTML तत्व का टेक्स्ट बदलना (Changing the Text of an HTML Element):
<!DOCTYPE html>
<html>
<head>
<title>Basic Syntax Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#myButton").click(function(){
$("#myParagraph").text("The text has been changed!");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="myButton">Change Text</button>
</body>
</html>
इस उदाहरण में, जब बटन (#myButton) पर क्लिक किया जाता है, तब $("#myParagraph").text("The text has been changed!"); कोड पैराग्राफ (#myParagraph) का टेक्स्ट बदल देता है।
$(document).ready() का उपयोग (Using $(document).ready())
jQuery में $(document).ready() एक महत्वपूर्ण फंक्शन है जो सुनिश्चित करता है कि पूरा HTML डोक्यूमेंट लोड और DOM पूरी तरह से तैयार हो चुका हो, इससे पहले कि jQuery कोड निष्पादित हो। यह फंक्शन पेज के सभी HTML तत्वों को लोड करने के बाद jQuery कोड को चलाने की अनुमति देता है, जिससे यह सुनिश्चित होता है कि सभी तत्व उपलब्ध और इंटरैक्ट करने योग्य हैं।
$(document).ready() सिंटैक्स
$(document).ready(function(){
// आपका jQuery कोड यहाँ आएगा
});इस सिंटैक्स में:
$(document).ready(): jQuery का फंक्शन है जो पूरे डोक्यूमेंट के लोड होने का इंतजार करता है।function() { ... }: एक अनाम फंक्शन है जिसमें आपका jQuery कोड लिखा जाएगा।
उदाहरण
- HTML तत्व को छिपाना (Hiding an HTML Element):
<!DOCTYPE html>
<html>
<head>
<title>$(document).ready() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
इस उदाहरण में, जब पूरा HTML डोक्यूमेंट लोड हो जाता है, तब $(document).ready() फंक्शन के अंदर लिखा गया कोड निष्पादित होता है, जो कि सभी <p> तत्वों को छिपा देता है।
- बटन क्लिक पर टेक्स्ट बदलना (Changing Text on Button Click):
<!DOCTYPE html>
<html>
<head>
<title>$(document).ready() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#myButton").click(function(){
$("#myParagraph").text("The text has been changed!");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="myButton">Change Text</button>
</body>
</html>
इस उदाहरण में, $(document).ready() फंक्शन सुनिश्चित करता है कि बटन (#myButton) पर क्लिक करने का इवेंट हैंडलर पेज के लोड होते ही स्थापित हो जाए। जब बटन पर क्लिक किया जाता है, तब $("#myParagraph").text("The text has been changed!"); कोड पैराग्राफ (#myParagraph) का टेक्स्ट बदल देता है।
jQuery सेलेक्टर्स (jQuery Selectors)
jQuery सेलेक्टर्स का उपयोग HTML डोक्यूमेंट में मौजूद विभिन्न तत्वों को चुनने के लिए किया जाता है ताकि उन पर विभिन्न क्रियाएं की जा सकें। सेलेक्टर्स का सिंटैक्स CSS सेलेक्टर्स के समान होता है, जिससे उन्हें समझना और उपयोग करना आसान होता है। सेलेक्टर्स jQuery कोड का एक महत्वपूर्ण हिस्सा हैं क्योंकि वे यह तय करते हैं कि कौन से HTML तत्वों पर कार्य किया जाएगा।
सामान्य jQuery सेलेक्टर्स
- सभी तत्वों का चयन (Selecting All Elements):
$("*")इस सेलेक्टर का उपयोग HTML डोक्यूमेंट में सभी तत्वों का चयन करने के लिए किया जाता है।
- विशिष्ट तत्व का चयन (Selecting Specific Elements):
$("p")यह सेलेक्टर सभी
<p>(पैराग्राफ) तत्वों का चयन करता है।
- आईडी के माध्यम से चयन (Selecting by ID):
$("#myElement")इस सेलेक्टर का उपयोग उस तत्व का चयन करने के लिए किया जाता है जिसका आईडी
myElementहै।
- क्लास के माध्यम से चयन (Selecting by Class):
$(".myClass")यह सेलेक्टर उन सभी तत्वों का चयन करता है जिनकी क्लास
myClassहै।
- विशिष्ट एट्रीब्यूट के माध्यम से चयन (Selecting by Attribute):
$("input[name='myName']")इस सेलेक्टर का उपयोग उन सभी
inputतत्वों का चयन करने के लिए किया जाता है जिनकाnameएट्रीब्यूटmyNameहै।
उदाहरण
- सभी पैराग्राफ छिपाना (Hiding All Paragraphs):
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
इस उदाहरण में, $("p").hide(); कोड सभी पैराग्राफ तत्वों को छिपा देता है।
- विशिष्ट आईडी वाले तत्व का टेक्स्ट बदलना (Changing Text of an Element with Specific ID):
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#myParagraph").text("The text has been changed!");
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
</body>
</html>
इस उदाहरण में, $("#myParagraph").text("The text has been changed!"); कोड उस पैराग्राफ का टेक्स्ट बदल देता है जिसका आईडी myParagraph है।
- विशिष्ट क्लास वाले तत्व का बैकग्राउंड रंग बदलना (Changing Background Color of Elements with Specific Class):
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".myClass").css("background-color", "yellow");
});
</script>
</head>
<body>
<p class="myClass">This is a paragraph with class myClass.</p>
<p>This is another paragraph.</p>
</body>
</html>
इस उदाहरण में, $(".myClass").css("background-color", "yellow"); कोड उन सभी तत्वों का बैकग्राउंड रंग बदल देता है जिनकी क्लास myClass है।