jQuery selectors आपको HTML elements को एक group या एक एकल element की तरह select और manipulate करने की सुविधा देते है
jQuery आपके पेज में से किसी चीज को ढूढ़ने के लिये "CSS Selectors" का उपयोग करता है. अगर आप CSS का ज्ञान रखते हैं तो इसे आप बड़ी ही आसानी से समझ सकते हैं.
उदाहरण के लिये अगर हमारे पेज में निम्नलिखित कोड दिया है:
<div id=”box1”></div>
<div class=”google”></div>
<span class=”google”></span> तो अगर box1 नाम के आई डी वाले टैग को चुनना है तो इसे कुछ ऐसे लिखेंगे.
$("#box1")
अगर google क्लास वाले टैगों को चुनना है तो इसे ऐसे लिखेंगे
$(“.google”)
अगर सभी "Div” टैगों को चुनना है तो इसे ऐसे लिखेंगे
$(“div”)
सेलेक्टर्स jQuery का बहुत ही महत्वपूर्ण हिस्सा हैं. अत: इन्हे जरूर समझ लें. मैंने केवल तीन सेलेक्टर ऊपर बताये हैं पर jQuery, CSS में इस्तेमाल होने वाले सभी सेलेक्टरों को स्वीकार करता है.
हम एक छोटा सा प्रोग्राम बनाने जा रहे हैं जिसमें एक बटन होगी और उसमें क्लिक करने पर Hello World एक एलर्ट बाक्स में दिखाई देगा.
तो शुरू करते हैं.
१.सबसे पहले अपने पेज में एक इनपुट बटन बनायेंगे:
<input type=”button” id=”btn_clickme” value=”Click Me”/>
२. अब jQuery की कोडिंग शुरू करेंगे निम्नलिखित कोड को अपने पेज की बाडी टैग के भीतर कापी पेस्ट कर दीजिये.
<script type=”text/javascript”>
$(document).ready(function(){
$(“#btn_clickme”).click(function(){
alert(“Hello World”);
});
});
</script>
पूरा कोड कुछ इस प्रकार दिखाई देगा.
<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(){
alert("Hello World");
});
});
</script>
</body>
</html>
अब अपने पेज को ब्राउजर में देखिये.
आपको क्लिक मी के नाम का एक बटन दिखाई देगा जिसमें क्लिक करने पर एक बाक्स खुलेगा जिसमें "Hello World” लिखा मिलेगा.
f$("#btn_clickme").click(function(){ इसमें सबसे पहले "selector” लिखा गया है जो कि #btn_clickme है. यानि कि हम एक ऐसे Element को खोज रहे हैं जिसका ID “btn_clickme” को.
फ़िर एक बिंदी के बाद click लिखा है. इसका मतलब इवेंट से है. यानि कि #btn_clickme में जब क्लिक किया जाये.
अब आगे function(){ लिखा है. यानि कि #btn_clickme में जब क्लिक किया जाये तो क्या हो.
अब इसके आगे एक Alert फ़ंग्शन है जिसकी वजह से ये बाक्स दिखता है.
इस पूरे कोड का मतलब है कि जब #btn_clickme नाम के ID वाले Element में Clickकिया जाये तो Alert बाक्स वाला कोड रन किया जाये.
jQuery में और भी इवेंट उपलब्ध हैं जैसे dblclick , keydown , focus आदि.
आपने जो ऊपर उदाहरण देखा है उसे नीचे लिखे दो तरीकों से भी किया जा सकता है जैसे:
<input type="button" id="btn_clickme" value="Click Me" onclick=”alert('Hello World');” /> तथा
<input type="button" id="btn_clickme" value="Click Me" onclick=”doit();” />
<script type=”text/javascript”>
function doit(){
alert(“Hello World”);
}
</script> पर इस तरह के कोड में आपने देखा है कि हमें HTML में ही onclick एट्रीब्यूट जोड़ना पड़ता है. इससे कुछ मात्रा में जावास्क्रिप्ट HTML Markup में भी चली जाती है. आप ऐसा कर सकते हैं पर ऐसा करना "गुड प्रैक्टिस” नही माना जाता है. हमेशा प्रयास यही होना चाहिये कि स्टाइल शीट्स, मार्कअप और जावास्क्रिप्ट कोडिंग एक दूसरे से एकदम अलग अलग हों. इसीलिये jQuery से ऐसा करना आसान हो जाता है.
$("p") - सभी <p> elements को select करता है ।
$("p.intro") - class="intro" वाले सभी <p> elements को select करता है ।
$("p#demo") id="demo" वाले <p> elements को select करता है ।
$("[href]") - href attribute वाले सभी elements को select करता है।
$("[href='#']") - href attribute वाले सभी elements को select करता है जिनकी value "#" के समान हो।
$("[href!='#']") - href attribute वाले सभी elements को select करता है जिनकी value "#" के समान न हो।
$("[href$='.jpg']") - href attribute वाले सभी elements को select करता है जिनका अंत ".jpg" के साथ होता है।
निम्न उदाहरण में सभी p elements का background-color पीले (yellow) में बदला जा रहा है:
jQuery आपके पेज में से किसी चीज को ढूढ़ने के लिये "CSS Selectors" का उपयोग करता है. अगर आप CSS का ज्ञान रखते हैं तो इसे आप बड़ी ही आसानी से समझ सकते हैं.
उदाहरण के लिये अगर हमारे पेज में निम्नलिखित कोड दिया है:
<div id=”box1”></div>
<div class=”google”></div>
<span class=”google”></span> तो अगर box1 नाम के आई डी वाले टैग को चुनना है तो इसे कुछ ऐसे लिखेंगे.
$("#box1")
अगर google क्लास वाले टैगों को चुनना है तो इसे ऐसे लिखेंगे
$(“.google”)
अगर सभी "Div” टैगों को चुनना है तो इसे ऐसे लिखेंगे
$(“div”)
सेलेक्टर्स jQuery का बहुत ही महत्वपूर्ण हिस्सा हैं. अत: इन्हे जरूर समझ लें. मैंने केवल तीन सेलेक्टर ऊपर बताये हैं पर jQuery, CSS में इस्तेमाल होने वाले सभी सेलेक्टरों को स्वीकार करता है.
Hello Word
Hello World के बिना भी कोई प्रोग्रामिंग सीखना शुरू करता है क्या? वैसे ये एक परंपरा बन गई है कि जब प्रोग्रामिंग सीखने का श्रीगणेश करना हो तो उसे Hello World से शुरू करते हैं.हम एक छोटा सा प्रोग्राम बनाने जा रहे हैं जिसमें एक बटन होगी और उसमें क्लिक करने पर Hello World एक एलर्ट बाक्स में दिखाई देगा.
तो शुरू करते हैं.
१.सबसे पहले अपने पेज में एक इनपुट बटन बनायेंगे:
<input type=”button” id=”btn_clickme” value=”Click Me”/>
२. अब jQuery की कोडिंग शुरू करेंगे निम्नलिखित कोड को अपने पेज की बाडी टैग के भीतर कापी पेस्ट कर दीजिये.
<script type=”text/javascript”>
$(document).ready(function(){
$(“#btn_clickme”).click(function(){
alert(“Hello World”);
});
});
</script>
पूरा कोड कुछ इस प्रकार दिखाई देगा.
<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(){
alert("Hello World");
});
});
</script>
</body>
</html>
अब अपने पेज को ब्राउजर में देखिये.
आपको क्लिक मी के नाम का एक बटन दिखाई देगा जिसमें क्लिक करने पर एक बाक्स खुलेगा जिसमें "Hello World” लिखा मिलेगा.
तो आखिर इस कोड से क्या और कैसे हुआ?
$(document).ready(function(){ वाली बात तो आपको पहले ही बता चुका हूं उसके आगे एक लाइन लिखी है:f$("#btn_clickme").click(function(){ इसमें सबसे पहले "selector” लिखा गया है जो कि #btn_clickme है. यानि कि हम एक ऐसे Element को खोज रहे हैं जिसका ID “btn_clickme” को.
फ़िर एक बिंदी के बाद click लिखा है. इसका मतलब इवेंट से है. यानि कि #btn_clickme में जब क्लिक किया जाये.
अब आगे function(){ लिखा है. यानि कि #btn_clickme में जब क्लिक किया जाये तो क्या हो.
अब इसके आगे एक Alert फ़ंग्शन है जिसकी वजह से ये बाक्स दिखता है.
इस पूरे कोड का मतलब है कि जब #btn_clickme नाम के ID वाले Element में Clickकिया जाये तो Alert बाक्स वाला कोड रन किया जाये.
jQuery में और भी इवेंट उपलब्ध हैं जैसे dblclick , keydown , focus आदि.
आपने जो ऊपर उदाहरण देखा है उसे नीचे लिखे दो तरीकों से भी किया जा सकता है जैसे:
<input type="button" id="btn_clickme" value="Click Me" onclick=”alert('Hello World');” /> तथा
<input type="button" id="btn_clickme" value="Click Me" onclick=”doit();” />
<script type=”text/javascript”>
function doit(){
alert(“Hello World”);
}
</script> पर इस तरह के कोड में आपने देखा है कि हमें HTML में ही onclick एट्रीब्यूट जोड़ना पड़ता है. इससे कुछ मात्रा में जावास्क्रिप्ट HTML Markup में भी चली जाती है. आप ऐसा कर सकते हैं पर ऐसा करना "गुड प्रैक्टिस” नही माना जाता है. हमेशा प्रयास यही होना चाहिये कि स्टाइल शीट्स, मार्कअप और जावास्क्रिप्ट कोडिंग एक दूसरे से एकदम अलग अलग हों. इसीलिये jQuery से ऐसा करना आसान हो जाता है.
jQuery Selectors
jQuery selectors आपको HTML elements (या elements के groups) को element के name, attribute name या content के अनुसार select करने की सुविधा देते हैं।| HTML DOM के शब्दों (terms) में : Selectors आपको DOM elements को एक group या एक एकल (single) node के रुप में manipulate करने की सुविधा देते हैं। |
jQuery Element Selectors
jQuery मे HTML elements को select करने के लिए CSS selectors का प्रयोग भी लिया जा सकता है।$("p") - सभी <p> elements को select करता है ।
$("p.intro") - class="intro" वाले सभी <p> elements को select करता है ।
$("p#demo") id="demo" वाले <p> elements को select करता है ।
jQuery Attribute Selectors
jQuery elements को उनमें दिये गये attributes के साथ select करने के लिए XPath expressions का प्रयोग करता है।$("[href]") - href attribute वाले सभी elements को select करता है।
$("[href='#']") - href attribute वाले सभी elements को select करता है जिनकी value "#" के समान हो।
$("[href!='#']") - href attribute वाले सभी elements को select करता है जिनकी value "#" के समान न हो।
$("[href$='.jpg']") - href attribute वाले सभी elements को select करता है जिनका अंत ".jpg" के साथ होता है।
jQuery CSS Selectors
HTML elements के लिए CSS properties को बदलने के लिए भी jQuery CSS selectors का प्रयोग किया जा सकता है।निम्न उदाहरण में सभी p elements का background-color पीले (yellow) में बदला जा रहा है:
Example
Try it yourself » |
Some More Examples
| Syntax | Description |
|---|---|
| $(this) | मौजुदा HTML element |
| $("p") | सभी <p> elements |
| $("p.intro") | class="intro" वाले सभी <p> elements " |
| $(".intro") | class="intro" वाले सभी elements " |
| $("#intro") | id="intro" वाला पहला element |
| $("ul li:first") | हर <ul> का पहला <li> element |
| $("[href$='.jpg']") | href attribute वाले सभी elements है जिनका अंत ".jpg" के साथ होता है |
| $("div#intro .head") | id="intro" वाले <div> element के अंदर class="head" वाले सभी elements |
0 comments:
Post a Comment