शुक्रवार, 25 सितंबर 2009

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

प्रस्तुतकर्ता अंकुर गुप्ता पर 5:37 pm

आज हम jQuery के द्वारा पेज के Elements में कुछ डालना और कुछ निकालना सीखेंगे. सबसे पहले अपने पेज में ये कोड कापी पेस्ट कर लें:

<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>

<body>
<input type="button" id="btn_clickme" value="Click Me" />
<script type="text/javascript">
$(document).ready(function(){
   $("#btn_clickme").click(function(){
      //अब यहां पर कोडिंग करेंगे
   });
});
</script>
</body>
</html>

अब अपने पेज में कोई Div टैग बनाते हैं.

<div id=”myname”><span>Welcome to My Page<span></div>

अभी जब आप पेज देखेंगे तो आपको "Welcome To My Page” तथा एक बटन दिखाई देगी.

तो अब शुरू किया जाए:

html() तथा html(val)

Html() से हम किसी भी टैग के भीतर के innerHTML कोड को प्राप्त कर सकते हैं.

अब जो कुछ भी मैं कोड लिख रहा हूं उसे btn_clickme वाले फ़ंग्शन के भीतर लिखियेगा.

alert($(“#myname”).html());

यह कुछ ऐसा दिखेगा

$(document).ready(function(){
   $("#btn_clickme").click(function(){
      alert($(“#myname”).html());
   });
});

अब इस पेज को ब्राउजर में खोलिये और Click Me बटन में क्लिक कीजिये. आपको एक एलर्ट बाक्स दिखेगा जिसमें

<span>Welcome to My Page</span> लिखा होगा.

html(val) से हम किसी भी टैग के भीतर में innerHTML कोड को भर सकते हैं. यहां पर val वह कोड है जिसे हम किसी टैग के भीतर भरना चाहते हैं.

अब पिछले उदाहरण के कोड alert($(“#myname”).html()); को मिटा दीजिये. इसके स्थान पर यह लिखिये:

$(“#myname”).html(“<b>Code Changed</b>”);

यह कुछ ऐसा दिखेगा

$(document).ready(function(){
   $("#btn_clickme").click(function(){
      $(“#myname”).html(“<b>Code Changed</b>”);
   });
});

अब इस पेज को ब्राउजर में देखिये: जैसे ही आप "click me” बटन में क्लिक करते हैं "Welcome To My Page” के स्थान पर मोटे मोटे अक्षरों से "Code Changed” लिखा हुआ आ जाता है.

image

text() तथा text(val)

इन दोनो फ़ंग्शन के बारे में ज्यादा नही लिखूंगा क्योंकि ये html() और html(val) के समान ही कार्य करते हैं पर एक बात का फ़र्क है. अगर आप alert($(“myname”).html()); लिखते हैं तो आपको ऐसा परिणाम मिलता है:<span>Welcome to My Page</span> पर अगर आप alert($(“myname”).text()); लिखते हैं तो आपको ऐसा परिणाम मिलेगा Welcome to My Page यानि कि span टैग गायब हो जायेंगी.जैसा कि नाम से ही स्पष्ट है कि html() फ़ंग्शन HTML Code को भी प्राप्त करता है है जबकि text() फ़ंग्शन अपने नाम के ही अनुरूप केवल TEXT को प्राप्त करता है.

append(content) तथा prepend(content)

एक नया पेज बनाइये और उसमें निम्नलिखित कोड कापी पेस्ट कर दीजिये

<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<input type="button" id="btn_clickme" value="Click Me" />
<div id=”mytitle”>This is Title of Page</div>
<div id=”foo”><b>Hi</b></div>
<script type="text/javascript">
$(document).ready(function(){
   $("#btn_clickme").click(function(){
      //अब यहां पर कोडिंग करेंगे
   });
});
</script>
</body>
</html>
तो अब शुरू करते हैं. btn_clickme के क्लिक हैंडलर के भीतर ये कोड लिख दीजिये:
$("#mytitle").append("- It Worked");
$("#mytitle").prepend("Welcome! ");
और अब पेज ब्राउजर में खोलिये. पहले आपको This is Title of Page लिखा हुआ दिखेगा. पर जैसे ही आप "Click Me” बटन में क्लिक करेंगे तो शुरू में "Welcome! ” तथा आखिरी में "- It Worked” शब्द आ जायेंगे और ये कुछ ऐसा दिखने लगेगा.Welcome! This is Title of Page- It Workedappend से आप किसी टैग के अंदर आखिरी तरफ़ से कोई सामग्री जोड़ सकते हैं. जैसे कि हमनें "It Worked” शब्द को जोड़ा. prepend से आप किसी टैग के अंदर शुरूआती तरफ़ से कोई सामग्री जोड़ सकते हैं. जैसे कि हमनें "Welcome” शब्द को जोड़ा.

appendTo(selector) तथा prependTo(selector)

अपने ऊपर वाले पेज को append/prepend वाली लाइनों को हटाकर फ़िर से पुरानी वाली स्थिति में लाइये.appendTo तथा prependTo किसी एक एलिमेंट के भीतर दूसरे एलिमेंट को डालने का काम करता है. दोनो में फ़र्क केवल इतना है कि एक आखिरी से डालता है तो दूसरा शुरूआत से.उदाहरणों ये और भी स्पष्ट हो जायेगा.

अभी आपके पेज में २ html एलिमेंट हैं:

<div id=”mytitle”>This is Title of Page</div>
<div id=”foo”><b>Hi</b></div>

अब इसे कुछ ऐसा करना चाहते हैं.

<div id=”foo”><b>Hi</b>
<div id=”mytitle”>This is Title of Page</div>
</div>

यानि कि "mytitle” वाले डिव टैग को "foo” वाले डिव टैग के भीतर डालना.जीहां! आपने ठीक अंदाजा लगाया इसके लिये appendTo का प्रयोग करना पड़ेगा.

इसके लिये ऐसा लिखिये

$("#mytitle").appendTo("#foo");

यानि कि "mytitle” आई डी वाले टैग को "foo” आई डी वाले टैग के भीतर आखिरी में रख दिया जाये.
इसी प्रकार अगर हमें ऐसा परिणाम प्राप्त करना हो:

<div id=”foo”>
<div id=”mytitle”>This is Title of Page</div>
<b>Hi</b>
</div>
तो appendTo की जगह prependTo का प्रयोग करेंगे.
लेबल:

1 टिप्पणी:

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

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

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

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

फ़ॉलोअर