jQuery Academy · पाठ

उन्नत एट्रिब्यूट सिलेक्टर

एट्रिब्यूट की मौजूदगी, मान या आंशिक मिलान के आधार पर एलिमेंट चुनने के लिए जटिल एट्रिब्यूट सिलेक्टर का अन्वेषण करें और अपनी चयन-सटीकता बढ़ाएँ।

पाठ 1, कुल 3 में से11 चरण

उन्नत एट्रिब्यूट सिलेक्टर, CoddyKit पर jQuery Academy का एक निःशुल्क पाठ है। यह 3 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह jQuery Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। jQuery Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

नमस्कार, एट्रिब्यूट चयनकर्ताओं!

jQuery में एलिमेंट चुनने के एक शक्तिशाली तरीके में आपका स्वागत है! हम एट्रिब्यूट चयनकर्ताओं को विस्तार से समझेंगे, जो आपको उनके HTML एट्रिब्यूट के आधार पर एलिमेंट चुनने देते हैं।

एट्रिब्यूट को HTML टैग से जुड़े अतिरिक्त डेटा की तरह समझें, जैसे id, class, href, data-* आदि।

एट्रिब्यूट की मौजूदगी के आधार पर चयन

सबसे सरल एट्रिब्यूट चयनकर्ता उन एलिमेंट को ढूँढता है जिनमें किसी विशेष एट्रिब्यूट की मौजूदगी हो, चाहे उसका मान कुछ भी हो। इसे [attributeName] के रूप में लिखा जाता है।

यह तब बहुत उपयोगी है जब आपको केवल यह जानना हो कि किसी एलिमेंट में एट्रिब्यूट मौजूद है या नहीं। उदाहरण के लिए, $('[title]') उन सभी एलिमेंट को ढूँढेगा जिनमें title एट्रिब्यूट है।

इसे आज़माएँ: एट्रिब्यूट की मौजूदगी

आइए, मौजूदगी वाले चयनकर्ता का उपयोग करके title एट्रिब्यूट वाले सभी एलिमेंट ढूँढें और उनके टैग नाम दिखाएँ।

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

सटीक एट्रिब्यूट मानों का मिलान

ऐसे एलिमेंट चुनने के लिए जिनके एट्रिब्यूट का मान बिल्कुल समान हो, [attributeName="value"] का उपयोग करें।

यह चयनकर्ता बहुत सटीक है! यह तभी मेल खाएगा जब एट्रिब्यूट का मान आपके बताए मान के बिल्कुल समान हो, जिसमें अक्षरों का केस भी शामिल है (jQuery में एट्रिब्यूट मान का मिलान केस-संवेदी होता है)।

सटीक मिलान का प्रयोग

ऐसे एलिमेंट ढूँढें जिनमें data-type एट्रिब्यूट का मान बिल्कुल "primary" हो।

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

इनसे शुरू होने वाले एट्रिब्यूट मान...

[attributeName^="value"] चयनकर्ता उन एलिमेंट को ढूँढता है जिनके एट्रिब्यूट का मान किसी विशेष स्ट्रिंग से शुरू होता है।

यह समान नामकरण परंपरा वाले एलिमेंट को समूहित करने के लिए उपयोगी है।
लिंक को फ़िल्टर करने के लिए बहुत अच्छा है (जैसे /products से शुरू होने वाले सभी लिंक)।

इनसे समाप्त और इनमें शामिल मान

ये चयनकर्ता आंशिक मिलान के लिए अधिक लचीलापन देते हैं:

[attributeName$="value"]: यदि एट्रिब्यूट का मान दी गई स्ट्रिंग पर समाप्त होता है, तो मिलान करता है।
[attributeName*="value"]: यदि एट्रिब्यूट के मान में कहीं भी दी गई स्ट्रिंग शामिल होती है, तो मिलान करता है।

लाइव प्रदर्शन: आंशिक मिलान

ध्यान दें कि href एट्रिब्यूट में मौजूद आंशिक मानों के आधार पर ^=, $= और *= अलग-अलग एलिमेंट को कैसे चुनते हैं।

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

शब्द और हाइफ़न चयनकर्ता

दो और विशेष चयनकर्ता:

[attributeName~="value"]: यदि एट्रिब्यूट के मान में रिक्त स्थानों से अलग किया गया कोई विशेष शब्द शामिल हो, तो मिलान करता है। इसका उपयोग अक्सर class एट्रिब्यूट के साथ किया जाता है।
[attributeName|="value"]: यदि एट्रिब्यूट का मान बिल्कुल "value" हो या "value-" से शुरू होता हो (जिसके बाद हाइफ़न हो), तो मिलान करता है। इसका उपयोग आमतौर पर lang="en-US" जैसे भाषा कोड के लिए किया जाता है।

त्वरित जाँच: चयनकर्ता

नीचे दिए गए <div> एलिमेंट की सही पहचान करने के लिए कौन-सा jQuery चयनकर्ता या चयनकर्ता-समूह उपयोग किया जा सकता है?

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: एट्रिब्यूट चयनकर्ता

बहुत अच्छा! आपने उन्नत एट्रिब्यूट चयनकर्ताओं में दक्षता हासिल कर ली है:

[attr]: एट्रिब्यूट की मौजूदगी जाँचता है।
[attr="val"]: बिल्कुल समान मानों का मिलान करता है।
[attr^="val"]: इनसे शुरू होने वाले मानों का मिलान करता है।
[attr$="val"]: इन पर समाप्त होने वाले मानों का मिलान करता है।
[attr*="val"]: इनमें शामिल मानों का मिलान करता है।
[attr~="val"]: रिक्त स्थान से अलग किए गए शब्द वाले मानों का मिलान करता है।
[attr|="val"]: बिल्कुल समान या 'val-' से शुरू होने वाले मानों का मिलान करता है।

jQuery का अत्यंत सटीक और प्रभावी कोड लिखने के लिए इनका उपयोग करें!

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 22
पाठ: 48

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “उन्नत एट्रिब्यूट सिलेक्टर” पाठ निःशुल्क है?

हाँ — jQuery Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “उन्नत एट्रिब्यूट सिलेक्टर” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। jQuery Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

“उन्नत एट्रिब्यूट सिलेक्टर” में मैं क्या सीखूँगा?

एट्रिब्यूट की मौजूदगी, मान या आंशिक मिलान के आधार पर एलिमेंट चुनने के लिए जटिल एट्रिब्यूट सिलेक्टर का अन्वेषण करें और अपनी चयन-सटीकता बढ़ाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ jQuery Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या jQuery Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर jQuery Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 1वाँ पाठ है।

“उन्नत एट्रिब्यूट सिलेक्टर” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस jQuery Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर jQuery Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← jQuery Academy पर वापस जाएँ