jQuery Selectors in Hindi
html webpage में कोई भी method लगाने के लिए या कोई भी काम करने से पेहले html element को select करना पड़ता है | jQuery में कुछ ऐसे ही selectors define किये गए हैं जिससे html element को select किया जाता है और फिर जरुरी functions लगाया जाता है |
html element को कई तरीके से select किया जा सकता है जैसे id, class या tag name से | तो चलिए जानते हैं jquery selectors कितने प्रकार के हैं |
Types of Selectors in jQuery
जरुरत के हिसाब से jQuery Selectors को कई प्रकार में बाटां गया है और वो है:
jQuery Element Selector
jQuery Element Selector, DOM element को element name या tag name के जरिये select करता है |
Syntax: $(“tagname“)
उदाहरण: $(“div”) के जरिये सारे div tags को select किया जा सकता है वैसे ही $(“p”) के जरिये सारे paragragh को select कर सकतें हैं |
<html>
<head>
<title>jQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").css("color", "blue");
});
</script>
</head>
<body>
<h1>Jquery Selectors Example</h1>
<p>this is first paragraph</p>
<div>
<p>this is the first paragraph in div</p>
<p>this is the second paragraph in div</p>
</div>
</body>
</html>उदाहरण में देखिए html page के सारे paragraph tags को select करके उसे css style दीया गया है |
output:
jQuery Id Selector
html element को उसके id के हिसाब से select करने के लिए Id Selector का उपयोग होता है | किसी भी webpage में हर element एक unique id दी जाती है | इसीलिए id selector से सिर्फ एक ही element select होता है |
Syntax: $(“#id“)
id selector को लिखने के लिए #(hash) symbol का उपयोग होता है | जिस id को select करना है उसे $(“”) के अंदर #symbol के साथ लिखी जाती है | जैसे $(“#text1”), $(“#div1”), $(“#p1”) |
उदाहरण:
<html>
<head>
<title>jQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").css("color", "red");
});
</script>
</head>
<body>
<h1>Jquery Selectors Example</h1>
<p>this is first paragraph</p>
<div>
<p id="p1">this is the paragraph in div</p>
</div>
</body>
</html>उदाहरण में उस paragraph tag को select किया गया है जिसकी id p1 है और उसकी font color को red किया गया है |
output:
Class Selector
jquery Class Selector html element को उसके class name से select करता है | और ये class name html element की class attribute से मिलती है |
Syntax: $(“.classname“)
class selector को लिखने के लिए .(dot) symbol का उपयोग होता है | जिस class को select करना है उसे $(“”) के अंदर .(dot) symbol के साथ लिखी जाती है | जैसे $(“#class1”), $(“header”) |
उदाहरण:
<html>
<head>
<title>jQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".blueBorder").css("border", "2px solid blue");
$(".redBorder").css("border", "2px solid red");
});
</script>
</head>
<body>
<h1>Jquery Selectors Example</h1>
<p class="blueBorder">this is first paragraph</p>
<p class="blueBorder">this is second paragraph</p>
<p class="redBorder">this is third paragraph</p>
</body>
</html>उदाहरण में दो paragraph ली गयी है और दोनों को class attribute से target करके css style लगायी गयी है |
output:
Universal Selector
html webpage में सारे elements को एक साथ select करने के लिए universal selector का उपयोग होता है | और इस selector को *(asterik) symbol से दर्शाया जाता है |
Syntax: $(“*”)
Multiple Selectors
multiple selectors को group selectors भी कही जाती है | जब एक से ज्यादा अलग तरह के elements पे एके जैसा काम करना है तब multiple selector के जरिये उन elements को select किया जा सकता है |
और इसमें सभी selectors को ,(comma) से अलग करके लिखी जा सकती है |
Syntax: $(“selector1, selector2,selector”)
उदाहरण:
$(“h1, p”)
$(“#text1, #text2”)
$(“.class1, .class”)
<html>
<head>
<title>jQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#text1, #text2").css("border", "2px solid blue");
$("h1, p").css("color", "red");
});
</script>
</head>
<body>
<h1>Jquery Selectors Example</h1>
<p class="blueBorder">this is first paragraph</p>
<div>
First name:<input type="text" id="text1"></input>
<br><br>
Last name:<input type="text" id="text2"></input>
</div>
</body>
</html>उदाहरण में हमने 2 textbox लिया है | और दोनों textbox id को एक साथ select करके एक जैसा style दीया है |
वैसे ही <h1> और <p>tag को एक साथ select करके एक जैसा style दीया है | multiple selectors के जरिये एक साथ कई element को एक साथ लेकर, एक जैसी functionality दी जा सकती है |
output:
jQuery Attribute Selectors
jQuery में element को उनके attribute name से भी select की जा सकती है | attribute और उसकी खास value के साथ भी हम element को select कर सकतें हैं |
Syntax: $(“[attribute]”)
$(“[attribute = value]”)
उदाहरण:
<html>
<head>
<title>jQuery Tutorial</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("[href]").css("border","2px solid red");
});
</script>
</head>
<body>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="https://in.search.yahoo.com/">Yahoo</a>
</body>
</html>output:
अन्य Selectors के उदाहरण
- $(“div.class1”) -> ये selectors उस div elements को select करेगा जिसमें class1 नाम की css class लगी होगी |
- $(“li:first-of-type”) -> इसमें वो सारे li tags select होंगे जो parent container में पहली occurance में आएंगे |
- $(“div:gt(3)”) -> ये वो सारे div tags को return करेगा जो index position के बाद लिए गयें होंगे |
- $(“div:has(p)”) -> ये selector उस div tag को return करेगा जिसमें कम से कम एक paragraph tag होगा |
- $(“span:last-of-type”)->ये उन span elements को return करेगा जो किस भी parent container में last appearance में आएगा |