jQuery DOM मैनिपुलेशन - 1
jQuery DOM मैनिपुलेशन
jQuery DOM मैनिपुलेशन - 1, CoddyKit पर jQuery Academy का एक निःशुल्क पाठ है। यह 1 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह jQuery Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। jQuery Academy पाठ्यक्रम में कुल 1 पाठ शामिल हैं।
विधियों का परिचय
नमस्कार,
अब तक हमने देखा कि JQuery का उपयोग किसलिए किया जाता है और चयनकर्ता का उपयोग कैसे किया जाता है।
अब आइए उन विधियों को देखें जो हमें DOM में बदलाव करने देती हैं।
text विधि
text() विधि
हम HTML तत्व की सामग्री तक पहुँचने के लिए text() विधि का उपयोग करते हैं।
किसी तत्व की सामग्री पढ़ने के लिए $ (selector).text() का उपयोग करें।
इसके अलावा, text विधि का उपयोग किसी तत्व की सामग्री अपडेट करने के लिए भी किया जाता है। नई सामग्री को आर्ग्युमेंट के रूप में text विधि में देना पर्याप्त है।
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
प्रश्न
html विधि
html() विधि
हमारी अगली विधि html() है।
जैसा कि इसके नाम से समझा जा सकता है, हमारे द्वारा चुने गए तत्व की केवल सामग्री के बजाय यह पूरा तत्व देती है।
आइए नीचे एक उदाहरण HTML तत्व परिभाषित करें।
base और target id वाले दो HTML तत्व परिभाषित किए गए हैं। फिर, जैसे ही DOM लोड होता है।
base तत्व की पूरी HTML सामग्री कॉपी करके target id वाले तत्व में जोड़ दी गई है।
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>एट्रिब्यूट चयनकर्ता
attr() विधि
हम HTML तत्वों के लिए अतिरिक्त व्यवहार निर्धारित करने हेतु एट्रिब्यूट का उपयोग करते हैं।
JavaScript कोड लिखते समय अक्सर हमें इन एट्रिब्यूट के मानों तक पहुँचने की आवश्यकता होती है।
ऐसे मामलों में attr विधि का उपयोग किया जाता है।
आइए नीचे एक उदाहरण बनाकर इस विधि को सीखें।
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>एट्रिब्यूट
नए एट्रिब्यूट निर्धारित करने की प्रक्रिया उन text() और html() विधियों जैसी है जिन्हें हमने पहले सीखा था।
पढ़ने के लिए उपयोग की जाने वाली attr() विधि को आर्ग्युमेंट देकर हम अपने लक्षित तत्व के लिए नया एट्रिब्यूट निर्धारित कर सकते हैं।
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
हमने एट्रिब्यूट जोड़ना सीखा;
अब आइए देखें कि किसी मौजूदा एट्रिब्यूट को कैसे हटाया जाता है।
इसके लिए हम removeAttr() विधि का उपयोग करेंगे।
आइए अपने उदाहरण को देखते हैं।
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));val विधि
val() विधि
आधुनिक वेब अनुप्रयोगों में फ़ॉर्म अनिवार्य होते हैं। फ़ॉर्म तत्वों में उपयोगकर्ताओं द्वारा दर्ज किए गए डेटा को पढ़ने के लिए हम val() विधि का उपयोग करेंगे।
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>चेतावनी
इवेंट प्रबंधन वाले पाठ में हम सीखेंगे कि प्रत्येक इनपुट डेटा को कैसे सुना जाए और उसे span तत्व में कैसे दिखाया जाए।
अतिरिक्त जानकारी
किसी इनपुट का मान अपडेट करने के लिए, जैसा कि आप अनुमान लगा सकते हैं, हम val विधि को आर्ग्युमेंट देते हैं।
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')बधाई हो
बधाई हो 🎉
हमने DOM में बदलाव करना सीखना शुरू कर दिया है।
अगले भाग में हम jQuery में DOM में बदलाव करना सीखना जारी रखेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 22
- पाठ
- 48
अक्सर पूछे जाने वाले प्रश्न
क्या “jQuery DOM मैनिपुलेशन - 1” पाठ निःशुल्क है?
हाँ — jQuery Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “jQuery DOM मैनिपुलेशन - 1” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। jQuery Academy पाठ्यक्रम में कुल 1 पाठ शामिल हैं।
“jQuery DOM मैनिपुलेशन - 1” में मैं क्या सीखूँगा?
jQuery DOM मैनिपुलेशन आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ jQuery Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या jQuery Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर jQuery Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 1 में से 1वाँ पाठ है।
“jQuery DOM मैनिपुलेशन - 1” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस jQuery Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर jQuery Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।