jQuery Selectors के Native DOM Alternatives
In this page:
document.querySelector(selector);
document.querySelectorAll(selector);ID से Select करना
document.getElementById() और document.querySelector() किसी jQuery ID या CSS selector के native browser equivalents हैं, और इन्हें ज़रूरत नहीं।
उदाहरण: Select by ID
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
console.log($("#text").text());
console.log(document.getElementById("text").textContent);
</script>
</body>
</html>Class से Select करना
jQuery एक CSS class selector वाले उसी $() function से class के हिसाब से elements select करता है, जैसे $('.item')। Vanilla JavaScript same result।
उदाहरण: Select by Class
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="item">One</p>
<script>
console.log($(".item").length);
console.log(document.querySelectorAll(".item").length);
</script>
</body>
</html>querySelector और querySelectorAll
querySelector() किसी दिए गए CSS selector से match करने वाला सिर्फ पहला element return करता है, जबकि querySelectorAll() हर matching element को एक NodeList।
उदाहरण: querySelector and querySelectorAll
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="item">One</p><p class="item">Two</p>
<script>
console.log(document.querySelector(".item").textContent);
console.log(document.querySelectorAll(".item").length);
</script>
</body>
</html>Selector Comparison
jQuery selectors concise हैं और jQuery objects के साथ automatically attached convenient built-in methods का एक बड़ा set आता है। Native selectors उसे हटा देते हैं।
उदाहरण: Selector Comparison
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="item">Text</p>
<script>
$(".item").css("color", "red");
document.querySelectorAll(".item").forEach(function(el) { el.style.color = "red"; });
</script>
</body>
</html>एक छोटा Selector Project
दोनों में चुनना अक्सर इस बात पर depend करता है कि project का बाकी हिस्सा पहले से क्या इस्तेमाल करता है: native selectors हर modern browser में सीधे built होते हैं।
उदाहरण: Small Selector Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
console.log($("#text").text() === document.getElementById("text").textContent);
</script>
</body>
</html>document.querySelector(".item")इस्तेमाल करना और$(".item")जैसे सभी matches की उम्मीद करना, जबकि यह सिर्फ पहला return करता है;querySelectorAllइस्तेमाल करें।- एक
querySelectorAll()result को jQuery object की तरह treat करना और उस पर.hide()call करना, जबकि यह एक NodeList है जिसे loop चाहिए। #के साथdocument.getElementById("#text")लिखना, जबकिgetElementByIdसिर्फ id लेता है:"text"।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: