आज हम कुछ अलग करने वाले हैं. हम एक बटन बनायेंगे जिसमें क्लिक करते ही वो अपना बटन स्वरूप खोकर एक डिव टैग का रूप धारण कर लेगी.
इसके लिये सबसे पहले एक HTML फ़ाइल बनायें और उसमें ये कोड कापी पेस्ट करें
<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
div {
border: 2px solid blue;
width: 200px;
height: 30px;
}
p { background:yellow; margin:4px; }
</style>
</head>
<body>
<button type="button" id="btn_clickme1">First Button</button>
<button type="button" id="btn_clickme2">Second Button</button>
<button type="button" id="btn_clickme3">Third Button</button>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
//आपका कोड यहां रहेगा
});
});
</script>
<p>Mera</p>
<p>Bharat</p>
<p>Mahan</p>
</body>
</html>
replaceWith(content)
हम इस बार ये करेंगे कि जैसे ही कोई उपयोगकर्ता बटन पर क्लिक करे वह बटन Div टैग में बदल जाये. ऐसा करने के लिये हमें replaceWith() फ़ंग्शन का प्रयोग करना पड़ेगा. यानि कि क्लिक मी बटन के फ़ंग्शन के भीतर आपको $(this).replaceWith("<div>You Clicked Me!</div>"); लिखना है.
$("#btn_clickme").click(function(){
$(this).replaceWith("<div>You Clicked Me!</div>");
});
अब ये “this” क्या बला है? पहले तो केवल css सेलेक्टर ही थे. चूंकि हमने क्लिक इवेंट हैंडलर में सेलेक्टर button टैग को रखा है इसलिये यह पेज में मौजूद सभी बटनों को चुन लेता है. जब किसी बटन में क्लिक किया जाता है तो ये “this” इस क्लिक किये गये बटन को चुनने का काम करता है.
फ़ायरबग में परिणाम कुछ ऐसे दिखेगा
पहले
बाद में (एक बटन को क्लिक करने के बाद)
replaceAll(selector)
यह फ़ंग्शन भी replaceWith की तरह ही कार्य करता है बस पैरामीटर बदल जाते हैं.
जो काम ऊपर में हमने इस कोड से किया है
$(this).replaceWith("<div>You Clicked Me!</div>");
इसी काम को हम निम्नलिखित कोड से भी कर सकते हैं(बस इसमें replaceAll फ़ंग्शन का प्रयोग हुआ है)
$("<div>You Clicked Me!</div>").replaceAll(this);
Empty() तथा Remove()
Empty() फ़ंग्शन आपके चुने हुए एलिमेंट्स के भीतर के सभी नोड्स को खत्म करके आपके एलिमेंट को एक इम्पटी या खाली टैग का रूप दे देता है.
उदाहरण:
हमारे पास एक पैराग्राफ़ है: <p>Welcome to my page</p>
हमने ये लाइने लिखीं: $(“p”).empty();
परिणाम: <p/>
वहीं Remove() फ़ंग्शन आपके चुने हुये एलिमेंट्स को पूरी तरह से खत्म कर देता है. उदाहरण के लिये $(“p”).remove(); पेज में मौजूद सभी पैराग्राफ़ों को खत्म कर देता है.
अभी तक वेब डेवलपमेंट अथवा प्रोग्रामिंग आदि से संबंधित जानकारी पर अंग्रेजी का एकाधिकार रहा है. भारत में इतने आई टी गुरू होने के बावजूद भारतीय भाषाओं में इस विषय पर लेखन नगण्य है. इस ब्लाग के माध्यम से मैं हिन्दी भाषिओं तक वेब डेवलपमेंट का ज्ञान पहुंचाने की कोशिश कर रहा हूं. अत: आप सभी से अनुरोध है कि
कोई टिप्पणी नहीं:
एक टिप्पणी भेजें