Form Filter Selectors
$("input:enabled")
$("input:disabled")
$("input:checked")
$("option:selected")Checked Inputs
':checked' किसी भी checkbox या radio input को match करता है जिसकी checked property इस समय true है, आपको selected options सीधे ढूँढने देते हुए। यह user के form के साथ interact करने पर live update होता है, सिर्फ page load पर नहीं।
उदाहरण: Checked Inputs
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="checkbox" checked><input type="checkbox">
<script>
console.log($(":checked").length);
</script>
</body>
</html>Selected Options
':selected' किसी <select> के अंदर उन <option> elements को target करता है जो इस समय user द्वारा चुने गए हैं, जो dropdown menus के लिए :checked के बराबर है। यह filter सिर्फ किसी select element के अंदर ही मतलब रखता है, क्योंकि plain inputs में selected option का कोई concept नहीं है।
उदाहरण: Selected Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<select><option>A</option><option selected>B</option></select>
<script>
console.log($(":selected").text());
</script>
</body>
</html>Enabled Controls
':enabled' उन form controls को match करता है जो इस समय user input accept कर सकते हैं, disabled attribute set वाले किसी भी element को exclude करते हुए। यह अक्सर दोनों states को अलग तरीके से style या handle करने के लिए :disabled के साथ जोड़ा जाता है।
उदाहरण: Enabled Controls
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input><input disabled>
<script>
console.log($(":enabled").length);
</script>
</body>
</html>Disabled Controls
':disabled' :enabled का mirror है -- यह उन controls को match करता है जिनके साथ user इस समय interact नहीं कर सकता, अक्सर script के ज़रिए उन्हें visually अलग दिखाने या फिर से enable करने के लिए इस्तेमाल होता है। Disabled form controls को focus भी नहीं मिल सकता या form submit होने पर शामिल नहीं किए जा सकते, यह filter आपके scripts में इसे account में लेने में मदद करता है।
उदाहरण: Disabled Controls
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input><input disabled>
<script>
console.log($(":disabled").length);
</script>
</body>
</html>Focus Filter
':focus' उस single element को match करता है जिसके पास इस समय keyboard focus है, exactly उस field से जुड़ी styles या logic लागू करने के लिए उपयोगी जिसमें user actively type कर रहा है। यह आमतौर पर manually focus track किए बिना उस field को validate या highlight करने के लिए इस्तेमाल होता है जिसे user इस समय भर रहा है।
उदाहरण: Focus Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="a"><input id="b">
<script>
$("#a").focus();
console.log($(":focus").attr("id"));
</script>
</body>
</html>- checked checkboxes ढूँढने के लिए
:selectedइस्तेमाल करना, जबकि यह<option>elements पर काम करता है और:checkedcheckboxes व radios के लिए है। - एक बार
:checkedselect करना और result के update होने की उम्मीद करना, जबकि एक jQuery object एक snapshot है और user के कुछ बदलने के बाद selector को फिर से चलाना ज़रूरी है। :disabledकोreadonlyattribute के साथ confuse करना, क्योंकि एक readonly input फिर भी:enabledहोता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: