Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. jQuery
Code

jQuery के असामान्य (uncommon) selectors

by
Difficulty:BeginnerLength:MediumLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

selectors का बहुत ही महत्व होता है.  jQuery के अधिकतर methods को किसी न किसी प्रकार के element को चुनने की जरूरत होती है, ताकि इनका प्रयोग किया जा सके. उदाहरण के लिए, बटन के साथ click इवेंट को जोड़ने के लिए हमें पहले बटन को सेलेक्ट करना पड़ता है.

क्योँकि सामान्ये jQuery सेलेक्टर्स CSS के मौजूदा सेलेक्टर्स पर ही आधारित है, इसलिए ये आपको अच्छी तरह से पता होने चाहिए. फिर भी, कुछ सेलेक्टर्स है जिनका प्रयोग बहुत अधिक नहीं होता. इस tutorial में, मैं इन कम परिचित पर महत्व्पूर्ण सेलेक्टर्स पर फोकस करूँगा.

सब कुछ सेलेक्ट करने वाला सिलेक्टर (*)

यह सिलेक्टर यूनिवर्सल सिलेक्टर कहलाता है जो की उचित भी है, क्योँकि यह डॉक्यूमेंट के सभी एलिमेंट को सेलेक्ट कर लेता है जिसमे <head>, <body>, <script> या <link> tags भी शामिल है. यह demo मेरे पॉइंट को स्पष्ट करेगा.

यदि यह सिलेक्टर दूसरे एलिमेंट्स के साथ जोड़ कर प्रयोग किया जाये तो यह बहुत ही धीमा होगा. हांलांकि, यह इस बात पर निर्भर करता है कि इस सिलेक्टर का प्रयोग कैसे कर रहे हैं और किस browser में यह  execute हो रहा है.  Firefox में $("#selector > *").find("li"), $("#select > ul").find("li") से धीमा होता है. दिलचस्प बात यह है कि, Chrome $("#selector > *").find("li") को थोड़ा तेज execute करता है. सभी browsers $("#selector *").find("li") को $("#selector ul").find("li") के मुकाबले कुछ धीमा execute करते है. मैं आपको सुझाव दूंगा की आप इस सिलेक्टर का प्रयोग करने से पहले performance की तुलना कर लें.

यह एक demo है जो की सभी सेलेक्टर्स की execution स्पीड की तुलना करेगा.

एनिमेटेड सिलेक्टर (:animated)

आप :animated सिलेक्टर का प्रयोग उन सभी elements को सेलेक्ट करने के लिए कर सकते है जिनका एनीमेशन इस सिलेक्टर को रन करते समय प्रगति में है. केवल एक मुद्दा है की यह उन्ही elements को सेलेक्ट करेगा जो की jQuery का प्रयोग करके animate हुए. यह सिलेक्टर jQuery का extension है और native querySelectoAll() के मुकाबले performance को बढ़ाने में लाभ नहीं देता.

और साथ ही साथ, आप CSS के animations का भी jQuery से पता नहीं लगा सकते. फिर भी आप animationend इवेंट से यह पता लगा सकते है की एनीमेशन कब ख़त्म होता है.

आगे दिए गए demo को देखियें

ऊपर दिए गए demo में  $(":animated").css("background","#6F9"); execute होने से पहले सिर्फ विषम div एलिमेंट्स एनिमेट हुए. परिणाम स्वरुप, सिर्फ वही div elements हरे रंग के हो गए. इसके एकदम बाद, हमने बचे हुए div एलिमेंट्स पर एनिमेट फंक्शन को कॉल किया. यदि अब आप बटन पर क्लिक करेंगे तो, सभी div elements हरे रंग के हो जायेंगे.

Attribute Not Equal Selector ([attr!="value"])

सामान्ये attribute सिलेक्टर आमतौर पर पता लगते है कि दिए गए नाम या उसकी वैल्यू मौजूद है कि नहीं. दूसरी तरफ, [attr!="value"] सिलेक्टर उन सभी एलिमेंट्स को सेलेक्ट करता है जिसमे दिया गया एट्रिब्यूट न हो या जिसमे एट्रिब्यूट तो हो पर वह दी गए वैल्यू के बराबर न हो. यह :not([attr="value"]) के समान ही है. [attr="value"] से अलग [attr!="value"] CSS स्पेसिफिकेशन का हिस्सा नहीं है.  परिणाम स्वरुप, $("css-selector").not("[attr='value']") का प्रयोग आधुनिक browsers में प्रदर्शन को सुधार सकता है.

नीचे दिए गए छोटे से प्रोग्राम से हम उन सभी li एलिमेंट में mismatch क्लास लगा देंगे जिनकी data-category एट्रिब्यूट की वैल्यू css के बराबर नहीं है. यह कोड्स को दोषमुक्त करने के दौरान अथवा JavaScript के प्रयोग से सही एट्रिब्यूट की वैल्यू को सेट करने में सहायक हो सकता है.

Demo में, मैंने दो lists का प्रयोग किया और एलिमेंट्स के category एट्रिब्यूट की वैल्यू को सही किया.

Contains Selector (:contains(text))

यह सिलेक्टर का प्रयोग उन सभी एलिमेंट्स को सेलेक्ट करने मैं किया जाता है जिसमे दी गयी स्ट्रिंग वैल्यू हो. मैच की गयी स्ट्रिंग सीधे सम्बंधित एलिमेंट के अंदर हो सकती है या उसके वंशज (descendant) के अंदर हो सकती है.

नीचे दिया गया उदाहरण आपको इस सिलेक्टर को अच्छे से समझने मैं मदद करेगा. हम Lorem Ipsum वाक्ये की सभी उपस्थितियों (occurrences) में पीले रंग का बैकग्राउंड लगाएंगे.

आईये मार्कअप (markup) से शुरू करें:

ध्यान से देखें की Lorem Ipsum का वाक्ये सात अलग अलग जगहों में लिखा गया है. मैने जानबूझकर इनमे से एक इंस्टैंस (instance) में स्माल कैप्स (small caps) का प्रयोग किया है ताकि आप को दिखा सकूं की मैचिंग केस सेंसेटिव (case sensitive) होती है.

यह JavaScript के सभी मैचेस (matches) को हाईलाइट (highlight) करने का कोड है:

स्ट्रिंग के दोनों तरफ quote वैकल्पिक (optional) है. इसका तात्पर्य है की ऊपर दिए गए दोनों स्निपट्स (snippets) $("section:contains('Lorem Ipsum')") और $("section:contains(Lorem Ipsum)") वैध (valid) है. मैं सिर्फ section एलिमेंट को लक्ष्य (target) में रख रहा हूँ, ताकि list एलिमेंट्स में मौजूद Lorem Ipsum टेक्स्ट अपरिवर्तित (unchanged) रहे. इसके आलावा, non-matching केस होने के कारण, दूसरे section एलिमेंट में मौजूद टेक्स्ट भी हाईलाइट नहीं होगा. जैसा की आप इस demo में देख सकते है कि वाकई में क्या होगा

Has Selector (:has(selector))

यह सिलेक्टर उन सभी एलिमेंट्स को सेलेक्ट कर लेगा जिसमे कम से कम एक ऐसा एलिमेंट हो जो की दिए गए सिलेक्टर से मैच करता हो. वो सिलेक्टर जिसे की मैच किया जाना है उसका डायरेक्ट चाइल्ड होना जरूरी नहीं है. :has() CSS स्पेसिफिकेशन (specification) का हिस्सा नहीं है. आज कल के ब्राउर्स (browsers) में, आपको परफॉरमेंस (performance) बढ़ाने के लिए $("pure-css-selector:has(selector)") की जगह $("pure-css-selector").has(selector) का प्रयोग करना चाहिए.

इस सिलेक्टर का एक संभव प्रयोग है कि उस एलिमेंट में परिवर्तन करना जिसके अंदर बताया गया एलिमेंट मौजूद हो. हमारे उदाहरण में, मैं उन सभी लिस्ट एलिमेंट्स (list elements) का रंग बदल दूंगा जिनके अंदर लिंक मौजूद हो.

यह demo के लिए मार्कअप है.

यह JavaScript के कोड हैं जो लिस्ट एलिमेंट्स (list elements) के रंग को बदलेगा:

इस कोड (code) के पीछे लॉजिक (logic) एकदम स्पष्ट हैं. मैं उन सभी लिस्ट एलिमेंट्स (list elements) में से लूप (loop) के जरिये गुजरूँगा जिनके अंदर लिंक (link) हैं और उनके रंग को crimson करूँगा. आप लिस्ट एलिमेंट्स (list elements) के अंदर मौजूद टेक्स्ट (text) को भी परिवर्तित (manipulate) कर सकते हैं या उन्हें DOM से हटा भी सकते हैं. मैं पूरी तरह से आश्वस्त हूँ कि इस सिलेक्टर को और भी कई स्थितियों में प्रयोग किया जा सकता है. इस कोड के सीधे संस्करण (live version) को CodePen में देखें.

Index-Based Selectors

CSS सेलेक्टर्स जैसे कि :nth-child() के अलावा, jQuery के पास भी index-based सेलेक्टर्स का अपना खुद का सेट है. ये सेलेक्टर्स हैं :eq(index):lt(index), और :gt(index). CSS सेलेक्टर्स के विपरीत, ये सेलेक्टर्स जीरो-बेस्ड इंडेक्सिंग (zero-based indexing) का प्रयोग करते हैं. इसका तात्पर्य है की :nth-child(1) पहले चाइल्ड एलिमेंट (child element) को सेलेक्ट करेगा जबकि :eq(1) दूसरे चाइल्ड एलिमेंट को सेलेक्ट करेगा. पहले चाइल्ड एलिमेंट को सेलेक्ट करने के लिए आपको :eq(0) का प्रयोग करना पड़ेगा.

ये सेलेक्टर्स ऋणात्मक संख्याओं (negative values) को भी स्वीकार कर सकते है. जब ऋणात्मक संख्या दी जाती है, तो गिनती आखरी एलिमेंट से उलटी गिनी जाती है.

:lt(index) उन सभी एलिमेंट्स को सेलेक्ट करता है जिनका इंडेक्स (index) दी गयी संख्या से काम होता है. पहले 3 एलिमेंट्स को सेलेक्ट करने के लिए आप :lt(3) का प्रयोग कर सकते है. इस इसलिए है क्योंकि पहले तीन एलिमेंट्स के इंडेक्स क्रमशा 0, 1 और 2 होंगे. नकारात्मक इंडेक्स (negative index) का प्रयोग करके हम उन सभी values को सेलेक्ट कर लेंगे जो की उलटी गिनती करके पहुंचे एलिमेंट से पहले है. इसी प्रकार से, :gt(index) उन सभी एलिमेंट्स को सेलेक्ट कर लेगा जिनका इंडेक्स दी गयी value से अधिक है.

इंडेक्स सिलेक्टर को बेहतर समझने के लिए demo में अलग अलग बटन को क्लिक करके देखें 

Form Selectors

jQuery में फॉर्म एलिमेंट्स को आसानी से सेलेक्ट करने की लिए बहुत सारे सेलेक्टर्स परिभाषित (define) किये गए हैं. उदाहरण के लिए, :button सिलेक्टर सभी बटन एलिमेंट्स को साथ ही साथ उन एलिमेंट्स को जिनका टाइप बटन हो को सेलेक्ट कर लेगा. इसी प्रकार से, :checkbox उन सभी एलिमेंट्स को सेलेक्ट कर लेगा जिनका टाइप checkbox हो. लगभग सभी इनपुट एलिमेंट्स के लिए सेलेक्टर्स परिभाषित किये गए हैं. नीचे दिए गए फॉर्म पर ध्यान दें:

यहाँ मैंने दो टेक्स्ट एलिमेंट्स (text elements) और चार checkboxes बनाये हैं. यह फॉर्म काफी बुनयादी है, पर यह आप को एक आईडिया देगा की फॉर्म सेलेक्टर्स कैसे काम करते हैं. हम :text सिलेक्टर से टेक्स्ट एलिमेंट्स की संख्या का पता लगाएंगे और साथ ही साथ पहली टेक्स्ट इनपुट के टेक्स्ट को अपडेट करेंगे.

मैंने सभी टेक्स्ट इनपुट्स को सेलेक्ट करने के लिए :text का प्रयोग किया और उनके संख्या का पता लगाने के लिए length method का प्रयोग किया. तीसरी स्टेटमेंट में, मैंने पहले ही चर्चा किये :eq() सिलेक्टर  का प्रयोग पहले एलिमेंट को सेलेक्ट करने के लिए और बाद में इसकी वैल्यू को सेट करने के लिए किया.

याद रखें की jQuery 1.5.2 से, :text उन एलिमेंट्स जिनका की टाइप एट्रिब्यूट (attribute) उल्लेखित नहीं किया गया में true return करेगा.

Demo को एक नज़र देखें.

Header Selector (:header)

यदि आप कभी भी वेबपेज के सभी हैडिंग एलिमेंट्स (heading elements) को सेलेक्ट करना चाहते हो तो, आप लंबे चौड़े $("h1 h2 h3 h4 h5 h6") सिलेक्टर की बजाये छोटे version $(":header") का प्रयोग कर सकते हैं. यह सिलेक्टर CSS स्पेसिफिकेशन का हिस्सा नहीं है. परिणाम स्वरुप, अच्छे प्रदर्शन के लिए पहले शुद्ध CSS सिलेक्टर का प्रयोग करें और फिर .filter(":header") का प्रयोग करें.

उदाहरण के लिए, मान लो वेब पेज पर एक article एलिमेंट है और इसके तीन अलग अलग headings है. अब, संक्षिप्तता (brevity) के लिए आप $("article h1, article h2, article h3") की बजाये $("article :header") का प्रयोग कर सकते हैं. इसको और अधिक तेज बनाने के लिए आप  $("article").filter(":header") का प्रयोग भी कर सकते हैं. इस तरह से आप के पास होगा सबसे बेहतरीन तरीका.

सभी हैडिंग एलिमेंट्स को नंबर देने की लिए, आप नीचे दिए गए कोड का प्रयोग कर सकते हैं.

साथ में दिए गए इस demo को try करें.

अंतिम विचार

इस टुटोरिअल में, मैंने असामान्य सेलेक्टर्स (uncommon selectors) की चर्चा की जिनका सामना आपको jQuery का प्रयोग करते हुए करना पड़ता है. हांलांकि इनमें से अधिकतर सेलेक्टर्स के विकल्प हैं जिनका प्रयोग आप कर सकते हैं, पर फिर भी इन सेलेक्टर्स की मौजूदगी का पता होना अच्छा है.

मुझे उम्मीद है की आपने इस टुटोरिअल में कुछ नया सीखा. यदि आप के कुछ प्रश्न या सुझाव हैं तो प्लीज कमेंट (comment) कीजिये.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.