पिछली प्रविष्टि में मैंने आपको किसी टैग के भीतर कोई सामग्री या टैग डालना सिखाया था. आज हम jQuery में एलिमेंट्स को बाहर की ओर से जोड़ना सीखेंगे. अबकी बार से मैं पूरे कोड को लिखने की बजाय “शार्ट कट” में लिखूंगा. आपको अगर समझने में दिक्कत जा रही हो तो इस ब्लाग में प्रकाशित jQuery पर पुरानी प्रविष्टियां देखें
after(content), before(content)
इस फ़ंग्शन के द्वारा आप किसी टैग के बाद(after) या पहले(before) कोई सामग्री जोड़ सकते हैं. जैसे अगर निम्न लिखित कोड
<p>Welcome to my home</p>
में पैराग्राफ़ के बाद <strong>Hello</strong> जोड़ना हो तो आपको कुछ इस प्रकार कोड लिखना होगा:
$(‘p’).after(‘<strong>Hello</strong>’);
इससे निम्नलिखित परिणाम मिलेगा:
<p>Welcome to my home</p>
<strong>Hello</strong>
ये परिणाम आप अपने ब्राउजर पर देख सकते हैं पर व्यू सोर्स पर दिखाई नही देगा. इस कोड के बदलाव को देखने के लिये Firebug का प्रयोग करें.
इसी प्रकार अगर इस “हैलो” शब्द को पैराग्राफ़ के ऊपर जोड़ना हो तो after की बजाय before का प्रयोग करेंगे.
insertAfter(selector), insertBefore(selector)
हम इन फ़ंग्शनों को निम्नलिखित उदाहरणो से समझने की कोशिश करेंगे. जैसे आपके पास निम्न लिखित कोड है:
<p> is what I said... </p><div id="foo">FOO!</div>अब अगर हम चाहते हैं कि <p>…</p> टैग डिव आईडी फ़ू के बाद जुड़े तो हमें कुछ ऐसा कोड लिखना होगा.
$("p").insertAfter("#foo");
इस कोड का अर्थ है <p> टैग को foo आईडी वाले टैग के बाद में जोड़ें.
इसका परिणाम ऐसा आएगा.
<div id="foo">FOO!</div><p> is what I said... </p>
अब जैसा कि नाम से ही स्पष्ट है कि insertBefore() से इसका ठीक उलटा होगा. अत: इसे मैं आपके करने के लिये छोड़ रहा हूं.
wrap(html), wrapAll(html) तथा wrapInner(html)
इन तीनो फ़ंग्शन का एक ही काम है, चुने गये एलिमेंट्स में कुछ टैग्स को अगल बगल लगाना. लेकिन ये तीनों फ़ंग्शन इस रैपिंग के काम को अलग अलग तरीके से अंजाम देते हैं यानि कि इनका प्रभाव अलग अलग आता है. इसे समझने के लिये सबसे पहले एक एचटीएमएल फ़ाइल बनायें और उसमें ये कोड कापी पेस्ट कर दें:
<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
</head>
<body>
<input type="button" id="btn_clickme" value="Click Me" />
<script type="text/javascript">
$(document).ready(function(){
$("#btn_clickme").click(function(){
आपका कोड यहां लिखा जायेगा.
});
});
</script>
<p>Mera</p>
<p>Bharat</p>
<p>Mahan</p>
</body>
</html>
उपरोक्त कोड में हमने CSS का प्रयोग किया है ताकि पैराग्राफ़ और डिव टैग अलग अलग दिखाई दें.
उपरोक्त कोड में अगर हम चाहें कि हर पैराग्राफ़ टैग के दोनो ओर डिव टैग लग जाये तो हमें wrap(html) का प्रयोग करना होगा. इसके लिये कोड कुछ ऐसे लिखेंगे:
$(“p”).wrap(“<div></div>”);
पहले
बाद में
डिव टैग नीली लाइनों में दिखाई दे रहा है. फ़ायर बग में आपको ये कुछ ऐसा दिखेगा:
अब अगर हम ये चाहें कि डिव टैग हर पैराग्राफ़ की बजाय केवल पहले और आखिरी पैराग्राफ़ के दोनो ओर लग जाये तो wrapAll(html) फ़ंग्शन का प्रयोग करना पड़ेगा.
$(“p”).wrapAll(“<div></div>”);
पहले
बाद में
फ़ायर बग में कुछ ऐसा दिखेगा
अब ये तो हुई टैगों को बाहर से जोड़ने की बात. अगर हम पैराग्राफ़ के भीतर अक्षरों के दोनो ओर <b></b> टैग लगाना चाहें तो हमें wrapInner(html) फ़ंग्शन का प्रयोग करना पड़ेगा. यानि कि…
$(“p”).wrapInner(“<b></b>”);
पहले
बाद में
फ़ायरबग में
अब एक और बात आप तीनो wrap फ़ंग्शनों में HTML के अलावा एलिमेंट्स को भी गुजार सकते हैं. जैसे कि
$("p").wrapAll(“<div></div>”); को हम ऐसे भी लिख सकते हैं $("p").wrapAll(document.createElement("div"));Manipulation से संबंधित और बातें अगली प्रविष्टि में
अभी तक वेब डेवलपमेंट अथवा प्रोग्रामिंग आदि से संबंधित जानकारी पर अंग्रेजी का एकाधिकार रहा है. भारत में इतने आई टी गुरू होने के बावजूद भारतीय भाषाओं में इस विषय पर लेखन नगण्य है. इस ब्लाग के माध्यम से मैं हिन्दी भाषिओं तक वेब डेवलपमेंट का ज्ञान पहुंचाने की कोशिश कर रहा हूं. अत: आप सभी से अनुरोध है कि
कोई टिप्पणी नहीं:
एक टिप्पणी भेजें