Attribute Selectors
In this page:
$("[attribute]")
$("[attribute='value']")
$("[attribute^='value']")
$("[attribute$='value']")
$("[attribute*='value']")किसी Attribute का होना
किसी attribute name को square brackets में wrap करना उस attribute set वाले हर element को select करता है, उसकी value चाहे जो भी हो। यह तब उपयोगी है जब आपको सिर्फ यह matter करता है कि कोई attribute बिल्कुल मौजूद है या नहीं।
उदाहरण: Has an Attribute
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input title="tip"><input>
<script>
console.log($("[title]").length);
</script>
</body>
</html>Attribute Equals
brackets के अंदर एक equals sign और एक value जोड़ना, जैसे [type="text"], match को उन elements तक narrow कर देता है जहाँ वह attribute exactly उस value के बराबर है। यह एक strict, case-sensitive equality check है, इसलिए यह सिर्फ मिलती-जुलती value को match नहीं करेगा।
उदाहरण: Attribute Equals
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="text"><input type="checkbox">
<script>
console.log($("[type='text']").length);
</script>
</body>
</html>Attribute Starts With
equals sign से पहले एक caret, जैसे [href^="https"], उन elements को match करता है जिनकी attribute value दिए गए text से शुरू होती है -- किसी page पर सभी external links ढूँढने के लिए काम का। यह pattern हर href को manually check किए बिना किसी external HTTPS site की तरफ़ point करने वाले हर link को select करने का एक तेज़ तरीका है।
उदाहरण: Attribute Starts With
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<a href="https://example.com">Ext</a>
<a href="/local">Local</a>
<script>
console.log($("[href^='https']").length);
</script>
</body>
</html>Attribute Ends With
equals sign से पहले एक dollar sign, जैसे [src$=".png"], उन elements को match करता है जिनकी attribute value दिए गए text पर खत्म होती है, file extension से filter करने के लिए उपयोगी। एक line में किसी specific format की सभी images, जैसे किसी page पर हर PNG icon, select करने का यह एक common तरीका है।
उदाहरण: Attribute Ends With
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<img src="icon.png"><img src="photo.jpg">
<script>
console.log($("[src$='.png']").length);
</script>
</body>
</html>Attribute Contains
equals sign से पहले एक asterisk, जैसे [alt*="logo"], उन elements को match करता है जिनकी attribute value में कहीं भी दिया गया text शामिल हो, यह attribute-value matchers में सबसे permissive है।
उदाहरण: Attribute Contains
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<img alt="company logo"><img alt="banner">
<script>
console.log($("[alt*='logo']").length);
</script>
</body>
</html>- value से quotes छोड़ देना, जैसे
$("[type=text]"), जो simple values के लिए काम करता है लेकिन spaces या special characters वाली values के लिए टूट जाता है। ^=(starts with) और$=(ends with) को mix up करना, इसलिए[src$=".png"]से यह उम्मीद करना कि यह किसी path की शुरुआत में.pngfiles को match करेगा।- square brackets भूल जाना,
$("[title]")के बजाय$("title")लिखना, जो title attribute वाले elements के बजाय<title>tags select करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: