jQuery
चयनकर्ताओं

परिचय

वाक्य - विन्यास

• टैग: कोई मार्कर नहीं, सीधे टैग का उपयोग करें
• Id: #id
• वर्ग: .className
• विशेषता: [attributeName]
• मूल्य के साथ गुण: [attributeName ='value']
• गुण मान से शुरू होता है ^= : [attributeName ^= 'value']
• गुण का मूल्य $= साथ समाप्त होता है $= : [attributeName $='value']
• गुण में मूल्य *= : [attributeName *= 'value']
• छद्म चयनकर्ता :pseudo-selector
• कोई भी वंशज: चयनकर्ताओं के बीच का स्थान
• प्रत्यक्ष बच्चे: > चयनकर्ताओं के बीच
• पहले के बाद आसन्न भाई: +
• पहले के बाद गैर-आसन्न सहोदर: ~
• या: , (अल्पविराम) चयनकर्ता के बीच

टिप्पणियों

<span id="temp.foobar"><span>

$('#temp\\.foobar')

चयनकर्ताओं के प्रकार

JQuery में आप तत्व के कई विभिन्न गुणों का उपयोग करके पृष्ठ में तत्वों का चयन कर सकते हैं, जिनमें शामिल हैं:

• प्रकार
• कक्षा
• आईडी
• गुण की प्राप्ति
• मान बताइए
• अनुक्रमित चयनकर्ता
• छद्म राज्य

यदि आप CSS चयनकर्ताओं को जानते हैं तो आप देखेंगे कि jQuery में चयनकर्ता समान हैं (मामूली अपवादों के साथ)।

उदाहरण के लिए निम्न HTML लें:

<a href="index.html"></a>                  <!-- 1 -->
<a id="second-link"></a>                   <!-- 2 -->
<a class="example"></a>                    <!-- 3 -->
<a class="example" href="about.html"></a>  <!-- 4 -->
<span class="example"></span>              <!-- 5 -->

प्रकार द्वारा चयन:

निम्नलिखित jQuery का चयनकर्ता 1, 2, 3 और 4 सहित सभी <a> तत्वों का चयन करेगा।

$("a")

कक्षा द्वारा चयन करना

निम्नलिखित jQuery के चयनकर्ता वर्ग example सभी तत्वों (गैर-एक तत्वों सहित) का चयन करेंगे, जो 3, 4 और 5 हैं।

$(".example")

आईडी द्वारा चयन करना

निम्नलिखित jQuery के चयनकर्ता दिए गए आईडी के साथ तत्व का चयन करेंगे, जो कि 2 है।

$("#second-link")

गुण के गुण द्वारा चयन करना

निम्नलिखित jQuery के चयनकर्ता 1 और 4 सहित, परिभाषित href विशेषता वाले सभी तत्वों का चयन करेंगे।

$("[href]")

गुण मान द्वारा चयन करना

निम्नलिखित jQuery का चयनकर्ता उन सभी तत्वों का चयन करेगा जहां href विशेषता index.html मान के साथ मौजूद है, जो कि सिर्फ 1 है।

$("[href='index.html']")

अनुक्रमित स्थिति ( अनुक्रमित चयनकर्ता ) द्वारा चयन

निम्नलिखित jQuery का चयनकर्ता केवल 1 का चयन करेगा, दूसरा < <a> अर्थात। second-link क्योंकि आपूर्ति की गई eq(1) 1 जैसा eq(1) (ध्यान दें कि सूचकांक 0 से शुरू होता है इसलिए दूसरा यहां चुना गया है!)।

$("a:eq(1)")

अनुक्रमित बहिष्करण के साथ चयन करना

किसी तत्व को उसके सूचकांक के उपयोग से बाहर करने के लिए :not(:eq())

निम्न वर्ग को छोड़कर, example , <a> तत्वों का चयन करता है, जो 1 है

$("a").not(":eq(0)")

अपवर्जन के साथ चयन

चयन से किसी तत्व को बाहर करने के लिए, उपयोग करें :not()

निम्न वर्ग के example अलावा, निम्नलिखित <a> तत्वों का चयन करता है, जो 1 और 2 हैं।

$("a:not(.example)")

छद्म राज्य द्वारा चयन

आप छद्म-अवस्थाओं का उपयोग करके jQuery में भी चयन कर सकते हैं, जिनमें शामिल हैं :first-child , :last-child :first-of-type :last-of-type , आदि।

निम्नलिखित jQuery का चयनकर्ता केवल पहले <a> तत्व: नंबर 1 का चयन करेगा।

$("a:first-of-type")

JQuery के चयनकर्ताओं का मेल

आप कई jQuery के चयनकर्ताओं को मिलाकर अपनी विशिष्टता बढ़ा सकते हैं; आप उनमें से किसी भी संख्या को जोड़ सकते हैं या उन सभी को जोड़ सकते हैं। आप एक ही समय में कई वर्गों, विशेषताओं और राज्यों का भी चयन कर सकते हैं।

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-child")

यह एक <a> तत्व का चयन करेगा जो:

• निम्न वर्ग हैं: class1, class2, and class3
• निम्नलिखित आईडी है: someID
• निम्नलिखित गुण है: attr1
• निम्नलिखित गुण और मूल्य हैं: attr2 something मूल्य के साथ, attr3 something मूल्य के साथ
• निम्नलिखित अवस्थाएँ हैं: first-child और first-of-type

आप अलग-अलग चयनकर्ताओं को अल्पविराम से भी अलग कर सकते हैं:

$("a, .class1, #someID")  

यह चयन करेगा:

• सभी < <a> तत्व
• वर्ग है कि सभी तत्वों class1
• आईडी के साथ एक तत्व #someID

बाल और सिबलिंग चयन

jQuery के चयनकर्ता आमतौर पर CSS के समान सम्मेलनों के अनुरूप होते हैं, जो आपको उसी तरह से बच्चों और भाई-बहनों का चयन करने की अनुमति देता है।

• एक गैर-प्रत्यक्ष बच्चे का चयन करने के लिए, एक स्थान का उपयोग करें
• प्रत्यक्ष बच्चे का चयन करने के लिए, > उपयोग करें
• पहले के बाद एक आसन्न भाई का चयन करने के लिए, + उपयोग करें
• पहले के बाद एक गैर-आसन्न भाई का चयन करने के लिए, ~ उपयोग करें

वाइल्डकार्ड चयन

ऐसे मामले हो सकते हैं जब हम सभी तत्वों का चयन करना चाहते हैं, लेकिन (वर्ग, विशेषता आदि) का चयन करने के लिए एक सामान्य संपत्ति नहीं है। उस मामले में हम * चयनकर्ता का उपयोग कर सकते हैं जो बस सभी तत्वों का चयन करता है:

$('#wrapper *')    // Select all elements inside #wrapper element

चयनकर्ताओं का मेल

DOM स्ट्रक्चर्स पर विचार करें

<ul class="parentUl">
    <li> Level 1
        <ul class="childUl">
            <li>Level 1-1 <span> Item - 1 </span></li>
            <li>Level 1-1 <span> Item - 2 </span></li>
        </ul>
    </li>
    <li> Level 2
        <ul class="childUl">
            <li>Level 2-1 <span> Item - 1 </span></li>
            <li>Level 2-1 <span> Item - 1 </span></li>
        </ul>
    </li>
</ul>

वंशज और बाल चयनकर्ता

माता-पिता <ul> को देखते हुए - parentUl अपने वंशज ( <li> ) को parentUl हैं,

1. सरल $('parent child')

   >> $('ul.parentUl li')

   यह निर्दिष्ट पूर्वजों के सभी स्तरों के सभी मिलान वंशों को नीचे ले आता है ।

2. > - $('parent > child')

   >> $('ul.parentUl > li')

   यह सभी मिलान वाले बच्चों ( केवल 1 स्तर नीचे ) पाता है।

3. प्रसंग आधारित चयनकर्ता - $('child','parent')

   >> $('li','ul.parentUl')

   यह 1 के रूप में ऊपर काम करता है।

4. find() - $('parent').find('child')

   >> $('ul.parentUl').find('li')

   यह 1 के रूप में ऊपर काम करता है।

5. children() - $('parent').find('child')

   >> $('ul.parentUl').children('li')

   यह 2 के रूप में ही काम करता है। ऊपर।

अन्य संयोजन

समूह चयनकर्ता: ","

सभी <ul> तत्व और सभी <li> तत्व और सभी <span> तत्व चुनें:

$('ul, li, span')

गुणक चयनकर्ता: "" (कोई वर्ण नहीं)

वर्ग parentUl साथ सभी <ul> तत्वों का चयन करें:

$('ul.parentUl')

आसन्न सिबलिंग चयनकर्ता: "+"

उन सभी <li> तत्वों का चयन करें, जिन्हें किसी अन्य <li> तत्व के तुरंत बाद रखा गया है:

$('li + li')

सामान्य सहोदर चयनकर्ता: "~"

उन सभी <li> तत्वों का चयन करें जो अन्य <li> तत्वों के भाई बहन हैं:

$('li ~ li')

अवलोकन

JQuery के चयनकर्ताओं का उपयोग करके तत्वों को jQuery द्वारा चुना जा सकता है। फ़ंक्शन तत्व या तत्वों की एक सूची देता है।

मूल चयनकर्ता

$("*")                       // All elements
$("div")                     // All <div> elements
$(".blue")                   // All elements with class=blue
$(".blue.red")               // All elements with class=blue AND class=red
$(".blue,.red")              // All elements with class=blue OR class=red
$("#headline")               // The (first) element with id=headline
$("[href]")                  // All elements with an href attribute
$("[href='example.com']")    // All elements with href=example.com

संबंधपरक संकारक

$("div span")          // All <span>s that are descendants of a <div>
$("div > span")        // All <span>s that are a direct child of a <div>
$("a ~ span")          // All <span>s that are siblings following an <a>
$("a + span")          // All <span>s that are immediately after an <a>

कैशिंग चयनकर्ताओं

हर बार जब आप jQuery में चयनकर्ता का उपयोग करते हैं तो DOM आपकी क्वेरी से मेल खाने वाले तत्वों के लिए खोजा जाता है। ऐसा अक्सर या बार-बार करने से प्रदर्शन में कमी आएगी। यदि आप किसी विशिष्ट चयनकर्ता को एक से अधिक बार संदर्भित करते हैं, तो आपको इसे एक चर में निर्दिष्ट करके कैश में जोड़ना चाहिए:

var nav = $('#navigation');
nav.show();

यह प्रतिस्थापित करेगा:

$('#navigation').show();

यदि आपकी वेबसाइट को इस तत्व को अक्सर दिखाना / छिपाना पड़ता है, तो इस चयनकर्ता को कैशिंग मददगार साबित हो सकता है। यदि एक ही चयनकर्ता के साथ कई तत्व हैं, तो चर इन तत्वों की एक सरणी बन जाएगा:

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

<script>
    var children = $('.child');
    var firstChildText = children[0].text();
    console.log(firstChildText); 
    
    // output: "Child 1"
</script>

नोट: तत्व को एक चर के लिए असाइनमेंट के समय DOM में मौजूद होना चाहिए। अगर DOM में कोई तत्व नहीं है जिसे एक child कहा जाता है तो आप उस वेरिएबल में एक खाली एरे स्टोर कर रहे होंगे।

<div class="parent"></div>

<script>
    var parent   = $('.parent');
    var children = $('.child');
    console.log(children);

    // output: []

    parent.append('<div class="child">Child 1</div>');
    children = $('.child');
    console.log(children[0].text());

    // output: "Child 1"
</script>

उस चयनकर्ता के साथ DOM में तत्वों को जोड़ने / हटाने के बाद चयनकर्ता को चर पर फिर से असाइन करना याद रखें।

नोट : जब चयनकर्ता कैशिंग करते हैं, तो कई डेवलपर यह दर्शाने के लिए एक $ साथ चर नाम शुरू करेंगे कि चर एक jQuery ऑब्जेक्ट है:

var $nav = $('#navigation');
$nav.show();

डोम तत्वों को चयनकर्ताओं के रूप में

jQuery के विभिन्न प्रकार के मापदंडों को स्वीकार करता है, और उनमें से एक वास्तविक DOM तत्व है। एक डोमेन को jQuery में पास करने से उस तत्व को रखने के लिए jQuery ऑब्जेक्ट की अंतर्निहित सरणी जैसी संरचना का कारण होगा।

jQuery यह पता लगाएगा कि तर्क अपने नोड टाइप का निरीक्षण करके एक DOM तत्व है।

DOM तत्व का सबसे आम उपयोग कॉलबैक में होता है, जहाँ jQuery API तक पहुँच प्राप्त करने के लिए वर्तमान तत्व jQuery कन्स्ट्रक्टर को पास किया जाता है।

जैसे कि each कॉलबैक में (नोट: प्रत्येक एक पुनरावृत्त कार्य है)।

$(".elements").each(function(){
    //the current element is bound to `this` internally by jQuery when using each
    var currentElement = this;

    //at this point, currentElement (or this) has access to the Native API
    
    //construct a jQuery object with the currentElement(this)
    var $currentElement = $(this);

    //now $currentElement has access to the jQuery API
});

HTML चयनकर्ताओं के रूप में तार

jQuery "चयनकर्ता" के रूप में कई प्रकार के मापदंडों को स्वीकार करता है, और उनमें से एक HTML स्ट्रिंग है। JQuery के लिए एक HTML स्ट्रिंग पास करने से परिणामी HTML बनाने के लिए jQuery ऑब्जेक्ट की अंतर्निहित सरणी जैसी संरचना का कारण होगा।

jQuery यह निर्धारित करने के लिए regex का उपयोग करता है कि क्या स्ट्रिंग को कंस्ट्रक्टर को पास किया जा रहा है, एक HTMLstring है, और यह भी कि यह < साथ शुरू होना चाहिए । उस regex को rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ में परिभाषित किया गया है) )।

चयनकर्ता के रूप में HTML स्ट्रिंग का सबसे आम उपयोग तब होता है जब DOM तत्वों के सेट को केवल कोड में बनाने की आवश्यकता होती है, अक्सर इसका उपयोग पुस्तकालयों द्वारा Modal popouts जैसी चीजों के लिए किया जाता है।

उदाहरण के लिए, एक फ़ंक्शन जो एक टेम्पलेट में एक div में लिपटे एक लंगर टैग लौटाता है

function template(href,text){
    return $("<div><a href='" + href + "'>" + text + "</a></div>");
}

एक jQuery ऑब्जेक्ट होल्डिंग को वापस करेगा

<div>
    <a href="google.com">Google</a>
</div>

अगर template("google.com","Google") रूप में कहा जाता है।