jQuery HTML मैनिपुलेशन का उपयोग वेब पेज पर HTML तत्वों और उनकी सामग्री को बदलने, जोड़ने, या हटाने के लिए किया जाता है। यह फीचर वेब डेवलपर्स के लिए बहुत ही उपयोगी है, क्योंकि यह उन्हें वेब पेज को गतिशील और इंटरैक्टिव बनाने की अनुमति देता है। jQuery का सिंटैक्स सरल और शक्तिशाली है, जिससे HTML मैनिपुलेशन बहुत ही आसान हो जाता है।
इस अध्याय में, हम jQuery HTML मैनिपुलेशन की विभिन्न तकनीकों और उनके उपयोग के बारे में जानेंगे। हम निम्नलिखित महत्वपूर्ण बिंदुओं पर चर्चा करेंगे:
- टेक्स्ट और HTML कंटेंट बदलना (Changing Text and HTML Content): jQuery का उपयोग करके तत्वों के टेक्स्ट और HTML कंटेंट को बदलना।
- एट्रीब्यूट्स बदलना (Changing Attributes): HTML तत्वों के एट्रीब्यूट्स को जोड़ना, बदलना, और हटाना।
- CSS क्लासेज का हेरफेर (Manipulating CSS Classes): तत्वों में CSS क्लासेज को जोड़ना, हटाना, और टॉगल करना।
- DOM में तत्व जोड़ना और हटाना (Adding and Removing Elements in DOM): DOM में नए तत्व जोड़ना और मौजूदा तत्वों को हटाना।
इस अध्याय के अंत तक, आप सीखेंगे कि कैसे jQuery का उपयोग करके HTML तत्वों और उनकी सामग्री को प्रभावी ढंग से मैनिपुलेट किया जा सकता है। आइए, jQuery HTML मैनिपुलेशन की इस रोचक यात्रा को शुरू करें और इसके शक्तिशाली फीचर्स का लाभ उठाएं।
टेक्स्ट और HTML कंटेंट बदलना (Changing Text and HTML Content)
jQuery का उपयोग करके आप HTML तत्वों के टेक्स्ट और HTML कंटेंट को आसानी से बदल सकते हैं। यह फीचर आपके वेब पेज को अधिक इंटरैक्टिव और गतिशील बनाने में मदद करता है। jQuery में टेक्स्ट और HTML कंटेंट बदलने के लिए text() और html() मेथड्स का उपयोग किया जाता है।
1. टेक्स्ट बदलना (Changing Text)
$(सेलेक्टर).text(newText);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसका टेक्स्ट बदलना है।
- newText: नया टेक्स्ट जो उस तत्व में सेट किया जाएगा।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Change Text Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#changeTextButton").click(function(){
$("#myParagraph").text("The text has been changed!");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="changeTextButton">Change Text</button>
</body>
</html>
इस उदाहरण में, जब बटन (#changeTextButton) पर क्लिक किया जाता है, तब पैराग्राफ (#myParagraph) का टेक्स्ट "The text has been changed!" में बदल जाता है।
2. HTML कंटेंट बदलना (Changing HTML Content)
$(सेलेक्टर).html(newHtml);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसका HTML कंटेंट बदलना है।
- newHtml: नया HTML कंटेंट जो उस तत्व में सेट किया जाएगा।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Change HTML Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#changeHtmlButton").click(function(){
$("#myDiv").html("<h2>New Heading</h2><p>This is new content.</p>");
});
});
</script>
</head>
<body>
<div id="myDiv">
<h1>Original Heading</h1>
<p>This is original content.</p>
</div>
<button id="changeHtmlButton">Change HTML</button>
</body>
</html>
इस उदाहरण में, जब बटन (#changeHtmlButton) पर क्लिक किया जाता है, तब #myDiv तत्व का HTML कंटेंट "New Heading" और "This is new content." में बदल जाता है।
3. मौजूदा टेक्स्ट और HTML कंटेंट प्राप्त करना (Getting Existing Text and HTML Content)
मौजूदा टेक्स्ट प्राप्त करने के लिए text() मेथड का उपयोग करें:
var existingText = $(सेलेक्टर).text();
मौजूदा HTML कंटेंट प्राप्त करने के लिए html() मेथड का उपयोग करें:
var existingHtml = $(सेलेक्टर).html();
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Get Content Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#getTextButton").click(function(){
alert("Text: " + $("#myParagraph").text());
});
$("#getHtmlButton").click(function(){
alert("HTML: " + $("#myDiv").html());
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<div id="myDiv">
<h1>Original Heading</h1>
<p>This is original content.</p>
</div>
<button id="getTextButton">Get Text</button>
<button id="getHtmlButton">Get HTML</button>
</body>
</html>
इस उदाहरण में, #getTextButton पर क्लिक करने पर पैराग्राफ (#myParagraph) का मौजूदा टेक्स्ट अलर्ट बॉक्स में प्रदर्शित होता है, और #getHtmlButton पर क्लिक करने पर #myDiv का मौजूदा HTML कंटेंट अलर्ट बॉक्स में प्रदर्शित होता है।
jQuery के text() और html() मेथड्स का उपयोग करके आप HTML तत्वों के टेक्स्ट और HTML कंटेंट को आसानी से बदल सकते हैं। ये मेथड्स आपके वेब पेज को अधिक इंटरैक्टिव और गतिशील बनाने में मदद करते हैं। अब, आप इन मेथड्स का उपयोग अपने प्रोजेक्ट्स में करके अपने वेब पेज को अधिक प्रभावी बना सकते हैं।
एट्रीब्यूट्स बदलना (Changing Attributes)
jQuery का उपयोग करके आप HTML तत्वों के एट्रीब्यूट्स को आसानी से जोड़, बदल, और हटा सकते हैं। यह फीचर आपके वेब पेज को अधिक इंटरैक्टिव और उपयोगकर्ता-अनुकूल बनाने में मदद करता है। jQuery में एट्रीब्यूट्स को मैनिपुलेट करने के लिए attr() और removeAttr() मेथड्स का उपयोग किया जाता है।
1. एट्रीब्यूट्स सेट करना (Setting Attributes)
$(सेलेक्टर).attr(attributeName, value);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसका एट्रीब्यूट सेट करना है।
- attributeName: एट्रीब्यूट का नाम।
- value: एट्रीब्यूट की नई वैल्यू।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Set Attribute Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#setAttributeButton").click(function(){
$("#myImage").attr("src", "newImage.jpg");
});
});
</script>
</head>
<body>
<img id="myImage" src="originalImage.jpg" alt="Image">
<button id="setAttributeButton">Set Image Source</button>
</body>
</html>
इस उदाहरण में, जब बटन (#setAttributeButton) पर क्लिक किया जाता है, तब इमेज (#myImage) का src एट्रीब्यूट "newImage.jpg" में बदल जाता है।
2. एट्रीब्यूट्स प्राप्त करना (Getting Attributes)
var value = $(सेलेक्टर).attr(attributeName);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसका एट्रीब्यूट प्राप्त करना है।
- attributeName: एट्रीब्यूट का नाम।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Get Attribute Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#getAttributeButton").click(function(){
var srcValue = $("#myImage").attr("src");
alert("Image Source: " + srcValue);
});
});
</script>
</head>
<body>
<img id="myImage" src="originalImage.jpg" alt="Image">
<button id="getAttributeButton">Get Image Source</button>
</body>
</html>
इस उदाहरण में, जब बटन (#getAttributeButton) पर क्लिक किया जाता है, तब इमेज (#myImage) का src एट्रीब्यूट अलर्ट बॉक्स में प्रदर्शित होता है।
3. एट्रीब्यूट्स हटाना (Removing Attributes)
$(सेलेक्टर).removeAttr(attributeName);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसका एट्रीब्यूट हटाना है।
- attributeName: एट्रीब्यूट का नाम।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Remove Attribute Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#removeAttributeButton").click(function(){
$("#myImage").removeAttr("alt");
});
});
</script>
</head>
<body>
<img id="myImage" src="originalImage.jpg" alt="Image">
<button id="removeAttributeButton">Remove Alt Attribute</button>
</body>
</html>
इस उदाहरण में, जब बटन (#removeAttributeButton) पर क्लिक किया जाता है, तब इमेज (#myImage) का alt एट्रीब्यूट हटा दिया जाता है।
4. कई एट्रीब्यूट्स सेट करना (Setting Multiple Attributes)
$(सेलेक्टर).attr({
attributeName1: value1,
attributeName2: value2,
...
});
- attributeName: एट्रीब्यूट का नाम।
- value: एट्रीब्यूट की नई वैल्यू।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Set Multiple Attributes Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#setMultipleAttributesButton").click(function(){
$("#myImage").attr({
"src": "newImage.jpg",
"alt": "New Image"
});
});
});
</script>
</head>
<body>
<img id="myImage" src="originalImage.jpg" alt="Image">
<button id="setMultipleAttributesButton">Set Multiple Attributes</button>
</body>
</html>
इस उदाहरण में, जब बटन (#setMultipleAttributesButton) पर क्लिक किया जाता है, तब इमेज (#myImage) के src और alt एट्रीब्यूट्स नए मानों में बदल जाते हैं।
jQuery के attr() और removeAttr() मेथड्स का उपयोग करके आप HTML तत्वों के एट्रीब्यूट्स को आसानी से जोड़, बदल, और हटा सकते हैं। ये मेथड्स आपके वेब पेज को अधिक इंटरैक्टिव और उपयोगकर्ता-अनुकूल बनाने में मदद करते हैं। अब, आप इन मेथड्स का उपयोग अपने प्रोजेक्ट्स में करके अपने वेब पेज को अधिक प्रभावी बना सकते हैं।
CSS क्लासेज का हेरफेर (Manipulating CSS Classes)
jQuery का उपयोग करके आप HTML तत्वों की CSS क्लासेज को आसानी से जोड़, हटाने और टॉगल करने के लिए कर सकते हैं। यह फीचर आपके वेब पेज को अधिक इंटरैक्टिव और गतिशील बनाने में मदद करता है। jQuery में CSS क्लासेज को मैनिपुलेट करने के लिए addClass(), removeClass(), और toggleClass() मेथड्स का उपयोग किया जाता है।
1. CSS क्लास जोड़ना (Adding CSS Class)
$(सेलेक्टर).addClass(className);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसे क्लास जोड़ना है।
- className: जोड़ने के लिए CSS क्लास का नाम।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Add Class Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
$(document).ready(function(){
$("#addClassButton").click(function(){
$("#myParagraph").addClass("highlight");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="addClassButton">Add Class</button>
</body>
</html>
इस उदाहरण में, जब बटन (#addClassButton) पर क्लिक किया जाता है, तब पैराग्राफ (#myParagraph) में highlight क्लास जोड़ दी जाती है, जिससे उसका बैकग्राउंड रंग पीला हो जाता है।
2. CSS क्लास हटाना (Removing CSS Class)
$(सेलेक्टर).removeClass(className);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिससे क्लास हटाना है।
- className: हटाने के लिए CSS क्लास का नाम।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Remove Class Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
$(document).ready(function(){
$("#removeClassButton").click(function(){
$("#myParagraph").removeClass("highlight");
});
});
</script>
</head>
<body>
<p id="myParagraph" class="highlight">This is a paragraph.</p>
<button id="removeClassButton">Remove Class</button>
</body>
</html>
इस उदाहरण में, जब बटन (#removeClassButton) पर क्लिक किया जाता है, तब पैराग्राफ (#myParagraph) से highlight क्लास हटा दी जाती है, जिससे उसका बैकग्राउंड रंग वापस सामान्य हो जाता है।
3. CSS क्लास टॉगल करना (Toggling CSS Class)
$(सेलेक्टर).toggleClass(className);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसमें क्लास टॉगल करना है।
- className: टॉगल करने के लिए CSS क्लास का नाम।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Toggle Class Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
$(document).ready(function(){
$("#toggleClassButton").click(function(){
$("#myParagraph").toggleClass("highlight");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="toggleClassButton">Toggle Class</button>
</body>
</html>
इस उदाहरण में, जब बटन (#toggleClassButton) पर क्लिक किया जाता है, तब पैराग्राफ (#myParagraph) में highlight क्लास टॉगल हो जाती है। यदि क्लास पहले से मौजूद है तो यह हटा दी जाती है, और यदि नहीं है तो यह जोड़ दी जाती है।
4. एक से अधिक क्लास जोड़ना (Adding Multiple Classes)
$(सेलेक्टर).addClass("class1 class2 class3");
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसे क्लासेज जोड़ना है।
- class1 class2 class3: जोड़ने के लिए CSS क्लासेज के नाम।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Add Multiple Classes Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
</style>
<script>
$(document).ready(function(){
$("#addMultipleClassesButton").click(function(){
$("#myParagraph").addClass("highlight bold italic");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="addMultipleClassesButton">Add Multiple Classes</button>
</body>
</html>
इस उदाहरण में, जब बटन (#addMultipleClassesButton) पर क्लिक किया जाता है, तब पैराग्राफ (#myParagraph) में highlight, bold, और italic क्लासेज जोड़ दी जाती हैं, जिससे उसका बैकग्राउंड रंग पीला हो जाता है, टेक्स्ट बोल्ड हो जाता है, और टेक्स्ट इटैलिक हो जाता है।
jQuery के addClass(), removeClass(), और toggleClass() मेथड्स का उपयोग करके आप HTML तत्वों की CSS क्लासेज को आसानी से जोड़, हटाने और टॉगल कर सकते हैं। ये मेथड्स आपके वेब पेज को अधिक इंटरैक्टिव और गतिशील बनाने में मदद करते हैं। अब, आप इन मेथड्स का उपयोग अपने प्रोजेक्ट्स में करके अपने वेब पेज को अधिक प्रभावी बना सकते हैं।
डायनामिक जोड़े गए कंटेंट पर इवेंट्स (Events on Dynamic Added Content)
जब हम jQuery का उपयोग करके वेब पेज पर डायनामिक कंटेंट जोड़ते हैं, तो सीधे तौर पर जोड़े गए HTML तत्वों पर इवेंट्स ट्रिगर नहीं होते। इसके लिए हमें jQuery के on() मेथड का उपयोग करना पड़ता है, जिससे डायनामिक जोड़े गए कंटेंट पर भी इवेंट्स को ट्रैक और हैंडल किया जा सकता है। on() मेथड का उपयोग करके हम इन इवेंट्स को बबलिंग के माध्यम से कैप्चर कर सकते हैं।
डायनामिक कंटेंट पर इवेंट्स हैंडल करना (Handling Events on Dynamic Content)
डायनामिक कंटेंट पर इवेंट्स हैंडल करने के लिए on() मेथड का उपयोग किया जाता है। इस मेथड का उपयोग करके हम इवेंट डेलीगेशन कर सकते हैं, जिससे नए जोड़े गए तत्वों पर भी इवेंट्स को कैप्चर और हैंडल किया जा सकता है।
सिंटैक्स
$(डेलीगेट).on(event, target, function);
- डेलीगेट: एक स्थिर तत्व जिसे इवेंट डेलीगेशन के लिए उपयोग किया जाता है।
- event: इवेंट का प्रकार (जैसे, click, hover, आदि)।
- target: लक्ष्य तत्व जिसे डायनामिक रूप से जोड़ा गया है।
- function: इवेंट हैंडलर फंक्शन।
उदाहरण
1. डायनामिक रूप से जोड़े गए बटन पर क्लिक इवेंट हैंडल करना (Handling Click Event on Dynamically Added Button):
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Content Events Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// डायनामिक कंटेंट जोड़ना
$("#addButton").click(function(){
$("#dynamicContent").append('<button class="dynamicButton">Click Me</button>');
});
// डायनामिक बटन पर क्लिक इवेंट हैंडल करना
$(document).on("click", ".dynamicButton", function(){
alert("Dynamic button clicked!");
});
});
</script>
</head>
<body>
<button id="addButton">Add Button</button>
<div id="dynamicContent"></div>
</body>
</html>
इस उदाहरण में, जब बटन (#addButton) पर क्लिक किया जाता है, तब #dynamicContent में एक नया बटन (.dynamicButton) जोड़ा जाता है। $(document).on("click", ".dynamicButton", function(){ ... }); का उपयोग करके, डायनामिक रूप से जोड़े गए बटन पर क्लिक इवेंट को कैप्चर और हैंडल किया जाता है।
2. डायनामिक रूप से जोड़े गए इनपुट फील्ड पर कीप्रेस इवेंट हैंडल करना (Handling Keypress Event on Dynamically Added Input Field):
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Content Events Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// डायनामिक कंटेंट जोड़ना
$("#addInputButton").click(function(){
$("#dynamicContent").append('<input type="text" class="dynamicInput" placeholder="Type here">');
});
// डायनामिक इनपुट फील्ड पर कीप्रेस इवेंट हैंडल करना
$(document).on("keypress", ".dynamicInput", function(event){
alert("Key pressed: " + event.which);
});
});
</script>
</head>
<body>
<button id="addInputButton">Add Input Field</button>
<div id="dynamicContent"></div>
</body>
</html>
इस उदाहरण में, जब बटन (#addInputButton) पर क्लिक किया जाता है, तब #dynamicContent में एक नया इनपुट फील्ड (.dynamicInput) जोड़ा जाता है। $(document).on(“keypress”, “.dynamicInput”, function(event){ … }); का उपयोग करके, डायनामिक रूप से जोड़े गए इनपुट फील्ड पर कीप्रेस इवेंट को कैप्चर और हैंडल किया जाता है।
डायनामिक जोड़े गए कंटेंट पर इवेंट्स को ट्रैक और हैंडल करने के लिए jQuery का on() मेथड बहुत ही उपयोगी है। यह मेथड आपको इवेंट डेलीगेशन का उपयोग करके नए जोड़े गए तत्वों पर भी इवेंट्स को कैप्चर और हैंडल करने की अनुमति देता है। अब, आप on() मेथड का उपयोग अपने प्रोजेक्ट्स में करके डायनामिक कंटेंट पर इवेंट्स को आसानी से मैनिपुलेट कर सकते हैं।
jQuery में एक टेबल रो जोड़ना(Adding a table row in jQuery)
jQuery का उपयोग करके आप HTML टेबल में आसानी से नई रो जोड़ सकते हैं। यह आपको डायनामिक रूप से टेबल्स को अपडेट करने और डेटा जोड़ने की अनुमति देता है।
jQuery का उपयोग करके टेबल रो जोड़ना (Adding a Table Row Using jQuery)
append() और after() मेथड्स का उपयोग करके आप टेबल में नई रो जोड़ सकते हैं।
उदाहरण: append() मेथड का उपयोग
<!DOCTYPE html>
<html>
<head>
<title>Add Table Row Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#addRowButton").click(function(){
var newRow = "<tr><td>New Row</td><td>New Data</td></tr>";
$("#myTable tbody").append(newRow);
});
});
</script>
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
<button id="addRowButton">Add Row</button>
</body>
</html>
इस उदाहरण में, जब बटन (#addRowButton) पर क्लिक किया जाता है, तब #myTable के tbody में एक नई रो जोड़ी जाती है।
उदाहरण: after() मेथड का उपयोग
<!DOCTYPE html>
<html>
<head>
<title>Add Table Row Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#addRowButton").click(function(){
var newRow = "<tr><td>New Row</td><td>New Data</td></tr>";
$("#myTable tr:last").after(newRow);
});
});
</script>
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
<button id="addRowButton">Add Row</button>
</body>
</html>
इस उदाहरण में, जब बटन (#addRowButton) पर क्लिक किया जाता है, तब #myTable के अंतिम tr के बाद एक नई रो जोड़ी जाती है।
इन उदाहरणों से आप देख सकते हैं कि jQuery का उपयोग करके HTML टेबल में डायनामिक रूप से नई रो जोड़ना कितना आसान है।