Basic Selectors
In this page:
$("tagname")
$("#id")
$(".classname")
$("selector1, selector2")
$("*")ID से Select करना
एक ID selector page पर exactly एक matching element select करने के लिए एक hash symbol के बाद element के id attribute का इस्तेमाल करता है। क्योंकि ids को unique होना चाहिए, यह किसी specific element को target करने का सबसे direct और सबसे तेज़ तरीका है।
उदाहरण: Select by ID
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h1 id="title">Page Title</h1>
<script>
console.log($("#title").length);
</script>
</body>
</html>Class से Select करना
एक class selector एक dot के बाद class name इस्तेमाल करता है, और क्योंकि कई elements एक class share कर सकते हैं, यह हर match को wrap करने वाला एक jQuery object return करता है -- एक पूरे group को एक साथ style या update करने के लिए ideal।
उदाहरण: Select by Class
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="highlight">A</p><p class="highlight">B</p>
<script>
console.log($(".highlight").length);
</script>
</body>
</html>Element से Select करना
एक element (tag) selector, जैसे $(p), page पर उस tag name वाले हर element को match करता है, जो broad, page-wide changes के लिए उपयोगी है लेकिन गलती से आपकी उम्मीद से ज़्यादा elements पकड़ सकता है।
उदाहरण: Select by Element
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>One</p><p>Two</p>
<script>
console.log($("p").length);
</script>
</body>
</html>Selectors को Combine करना
selectors को comma से अलग करना, जैसे $('h1, .highlight'), आपको कई अलग separate statements लिखने के बजाय एक ही call में elements के कई unrelated groups को target करने देता है।
उदाहरण: Combine Selectors
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h1>Title</h1>
<p class="highlight">Text</p>
<script>
console.log($("h1, .highlight").length);
</script>
</body>
</html>एक Selector Variable इस्तेमाल करना
किसी selector string को $() में pass करने से पहले एक variable में store करना जब आपको कई जगहों पर उसी target को reuse करना हो तो आपके code को DRY रखता है, और बाद में selector को एक जगह update करना आसान बनाता है।
उदाहरण: Use a Selector Variable
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="item">Item</p>
<script>
var sel = ".item";
console.log($(sel).length);
$(sel).css("color", "teal");
</script>
</body>
</html>- जब element का
id="title"हो तब$("title")लिखना, जो element के बजाय<title>tag select करता है; एक ID को$("#title")चाहिए। - यह उम्मीद करना कि
$("#title")element को खुद return करेगा; यह एक jQuery object return करता है, इसलिए raw DOM node के लिए$("#title")[0]या.get(0)इस्तेमाल करें। - कई elements पर एक ही
idreuse करना, इसलिए$("#item")सबके बजाय सिर्फ पहले वाले को match करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: