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

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

पिछली प्रविष्टि में मैंने आपको किसी टैग के भीतर कोई सामग्री या टैग डालना सिखाया था. आज हम 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>”);

पहले

image

बाद में

image

डिव टैग नीली लाइनों में दिखाई दे रहा है. फ़ायर बग में आपको ये कुछ ऐसा दिखेगा:

image

अब अगर हम ये चाहें कि डिव टैग हर पैराग्राफ़ की बजाय केवल पहले और आखिरी पैराग्राफ़ के दोनो ओर लग जाये तो wrapAll(html) फ़ंग्शन का प्रयोग करना पड़ेगा.

$(“p”).wrapAll(“<div></div>”);

पहले

image

बाद में

image

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

image

अब ये तो हुई टैगों को बाहर से जोड़ने की बात. अगर हम पैराग्राफ़ के भीतर अक्षरों के दोनो ओर <b></b> टैग लगाना चाहें तो हमें wrapInner(html) फ़ंग्शन का प्रयोग करना पड़ेगा. यानि कि…

$(“p”).wrapInner(“<b></b>”);

पहले

image

बाद में

image

फ़ायरबग में

image

अब एक और बात आप तीनो wrap फ़ंग्शनों में HTML के अलावा एलिमेंट्स को भी गुजार सकते हैं. जैसे कि

$("p").wrapAll(“<div></div>”); को हम ऐसे भी लिख सकते हैं $("p").wrapAll(document.createElement("div"));

Manipulation से संबंधित और बातें अगली प्रविष्टि में

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

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

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

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

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

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

समर्थक