शनिवार, 26 सितंबर 2009

आइये jQuery सीखें - 4 – Manipulation(3)

आज हम कुछ अलग करने वाले हैं. हम एक बटन बनायेंगे जिसमें क्लिक करते ही वो अपना बटन स्वरूप खोकर एक डिव टैग का रूप धारण कर लेगी.

इसके लिये सबसे पहले एक 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” इस क्लिक किये गये बटन को चुनने का काम करता है.

फ़ायरबग में परिणाम कुछ ऐसे दिखेगा

पहले

image

बाद में (एक बटन को क्लिक करने के बाद)

image

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(); पेज में मौजूद सभी पैराग्राफ़ों को खत्म कर देता है.

कोई टिप्पणी नहीं:

एक टिप्पणी भेजें

इस ब्लाग में प्रकाशित सामग्री कापीराईट द्वारा सुरक्षित है. बिना अनुमति इसका किसी भी प्रकार से अन्यत्र प्रयोग/प्रकाशन मूल रूप में/बदल कर उपयोग नही किया जा सकता है.

हिंदी में तकनीकी लेखन को प्रोत्साहित करें

please donate अभी तक वेब डेवलपमेंट अथवा प्रोग्रामिंग आदि से संबंधित जानकारी पर अंग्रेजी का एकाधिकार रहा है. भारत में इतने आई टी गुरू होने के बावजूद भारतीय भाषाओं में इस विषय पर लेखन नगण्य है. इस ब्लाग के माध्यम से मैं हिन्दी भाषिओं तक वेब डेवलपमेंट का ज्ञान पहुंचाने की कोशिश कर रहा हूं. अत: आप सभी से अनुरोध है कि हिंदी में तकनीकी लेखन के लिये सहयोग करें
मैं वेबसाइटें भी बनाता हूं. यदि आपको बनवानी हो तो बताएं.

इस ब्लॉग में खोजें

समर्थक