jQuery सिलेक्टर CSS सिलेक्टर्ससारखे असतात जे तुम्हाला DOM ट्री मधून एखादा घटक शोधण्याची किंवा निवडण्याची परवानगी देतात. जेव्हा ब्राउझरमध्ये लोड केलेली HTML पृष्ठे अशी दिसतात: क्रोम:, फायरफॉक्स, किंवा: इंटरनेट एक्सप्लोरर:, ब्राउझर एक झाड सारखी रचना तयार करते: दस्तऐवज ऑब्जेक्ट मॉडेल किंवा: न्यायालय:, JavaScript և jQuery तुम्हाला या DOM सह खेळू देते, म्हणजेच DOM मधून आयटम निवडा, DOM मधून जा, एका आयटमवरून दुसऱ्या आयटमवर स्विच करा, DOM मधून आयटमची सूची निवडा, DOM मधून आयटम जोडा किंवा काढून टाका և इ.
JQuery ऑब्जेक्टमध्ये बहुतेक jQuery फंक्शन्स वापरण्यासाठी, तुम्ही आधी HTML घटक किंवा टॅग निवडणे आवश्यक आहे ज्यावर तुम्हाला ती फंक्शन्स लागू करायची आहेत, jQuery सिलेक्टर तुम्हाला ते घटक निवडण्याची परवानगी देते.


असे अनेक JQuery निवडक आहेत
आयडी निवडकर्ता, क्लास सिलेक्टर किंवा आयटम सिलेक्टर जो तुम्हाला फक्त तुम्हाला आवश्यक असलेल्या आयटम निवडू देतो. या JQuery ट्यूटोरियल मध्ये आम्ही या jQuery सिलेक्टर्सकडे पाहू – ते कसे वापरावे हे जाणून घेण्यासाठी सोपी उदाहरणे.

मी आधी म्हटल्याप्रमाणे, jQuery एक अतिशय शक्तिशाली և क्लायंट-फ्रेंडली स्क्रिप्टिंग लायब्ररी आहे जी जावा सारख्या पद्धतींमध्ये जावास्क्रिप्ट वापरणे सोपे करते. JQuery केवळ पासवर्ड कमी करत नाही, तर ब्राउझरची विसंगती दूर करण्यास देखील मदत करते.


आपण नुकतेच प्रारंभ करत असल्यास, मी त्यांना तपासण्याची शिफारस करतो ऑनलाइन jQuery नवशिक्या अभ्यासक्रम, jQuery जलद शिकण्यासाठी सर्वोत्तम संसाधनांपैकी एक आहे.

jQuery निवडक उदाहरणे:

येथे काही लोकप्रिय JQuery निवडकर्त्यांची यादी आहे. JQuery निवडकांना शिकवण्याचा सर्वोत्तम मार्ग म्हणजे त्यांना वापरून पहा. आम्ही भिन्न JQuery निवडकर्ते कसे कार्य करतात हे दाखवण्यासाठी HTML कोड स्निपेटवर परत जाऊ.


HTML दस्तऐवज.

हे आमचे HTML पृष्ठ आहे जे आम्ही या उदाहरणात वापरू. यात काही सामान्य टॅग आहेत, जसे की सूची आयटम, h1, h2 և p, jQuery सिलेक्टरचा वापर करून, आम्हाला यापैकी एखादी वस्तू किंवा वस्तूंची यादी मिळू शकते.

मिंग प्रोग्रामिंग शिकण्यात तुम्ही अपयशी ठरता का?

प्रोग्रामिंग प्रोग्रामिंग भाषा

आपल्या मित्रांना आवडेल असे निवडा

<उल: id =:“भाषा”>:

  • जावा:
  • <उल: id =:“वेब”>:

  • जावास्क्रिप्ट:
  • <पूर्ण: धडा =:“कार्यात्मक”>:ओठ:



    1. आयडी सिलेक्टर

    त्याची सुरुवात #number सह होते the ज्या घटकांची id विशेषता जुळते ते घटक निवडते. उदाहरण: $ {“# भाषा”} एचटीएमएल टॅग निवडेल ज्याची आयडी भाषा आहे, जी एक अनियंत्रित सूची आहे (<उल: id =:“भाषा”>:) हा निवडक फक्त एकच आयटम परत करेल – तो jQuery टूलबॉक्समध्ये उपलब्ध असलेला सर्वात वेगवान निवडकर्ता आहे.

    2. वर्ग निवडक

    हे एका बिंदूपासून सुरू होते (.) : हा धडा लागू केलेल्या आयटमची सूची निवडा. उदाहरण: $ (“कार्यात्मक”) गुणधर्मांसह सर्व HTML घटक निवडतील वर्ग = “कार्यात्मक”, जे सूची आयटम आहे <पूर्ण: धडा =:“कार्यात्मक”>:ओठ:




    वर्ग किती घटक वापरतो यावर अवलंबून हा निवडक एकतर फक्त एक घटक किंवा एकापेक्षा जास्त घटक परत करू शकतो. हे सहसा निवडीसाठी वापरले जाते समान श्रेणीचे घटक, म्हणजे एकापेक्षा जास्त घटक.

    3. एलिमेंट सिलेक्टर किंवा लेबल सिलेक्टर

    हा jQuery सिलेक्टर DOM मधून सर्व निर्दिष्ट आयटम निवडतो, उदाहरणार्थ $ {“h2”} प्रत्येकाची निवड करेल

    घटक: कारण हा JQuery सिलेक्टर HTML टॅग नावाची निवड करतो, त्याला टॅग सिलेक्टर म्हणूनही ओळखले जाते. हा निवडक सहसा विशिष्ट लेबल घटक गोळा करण्यासाठी वापरला जातो, नंतर त्यावर विशिष्ट वर्ग लागू करा किंवा त्यांना हाताळा.

    4. वंशज मतदार

    हा JQuery निवडकर्ता अधिक विशिष्ट आहे, तो आपल्याला HTML घटकांचे वंशज निवडण्याची परवानगी देतो. उदाहरण: $ (“# चित्रपट: मध्ये} सूचीतील सर्व आयटम निवडेल (वेळ) ज्या HTML घटकाची आयडी आहे त्याची पिढी आहे चित्रपटया उदाहरणात $ (“# भाषा: मध्ये} अनियमित सूचीमधून सूचीतील सर्व आयटम निवडेल (<उल: id =:“भाषा”>:): jQuery मध्ये सिंगल मोड सिलेक्टर आहे जो वंशज सिलेक्टरसारखा दिसतो, परंतु त्यांच्यामध्ये थोडा फरक आहे, जे आम्ही पुढील भागात कव्हर करू.

    5. बाल निवडक

    मूल मतदार वंशज मतदारापेक्षा अधिक विशिष्ट आहे. जर वस्तूला मुले և नातवंडे असतील तर वापरणे वारस मतदार निवडेल सर्व वारस, ज्यात तत्काळ मुले և नातवंडे यांचा समावेश आहे. तुम्ही JQuery चाईल्ड सिलेक्टर वापरत असल्यास, ते फक्त घटकांमधून थेट मुलांना निवडेल. बाल निवडकर्ता मोठ्या अक्षराने (>) चिन्हांकित आहे


    उदाहरणार्थ, जेव्हा आपण HTML रचनेकडे परत जातो, जर आपल्याला ते सर्व आवश्यक असेल

  • ज्याचे तत्काळ मूल आहे (<उल: id =:“भाषा”>:, नंतर आपल्याला JQuery चा बाल निवडक वापरण्याची आवश्यकता आहे. आम्ही वापरल्यास: वारस मतदार कसे $ {“मध्ये भाषा”}; , ते आतील भाग देखील निवडेल
  • जावास्क्रिप्ट, जर आपण बाल निवडकर्ता म्हणून वापरतो: $ {“languages> li”}, ते फक्त थेट मुलांची निवड करेल (<उल id =:“भाषा”>:, ज्यात समाविष्ट नाही:
  • जावास्क्रिप्ट:
  • ,

    6. अनेक मतदार

    हा jQuery निवडकर्ता तुम्हाला एकाच शॉटमध्ये एकापेक्षा जास्त आयटम निवडण्याची परवानगी देतो. एकाधिक निवडक वापरून, आपण प्रत्यक्षात एका कॉलमध्ये दोन पर्याय एकत्र करत आहात. उदाहरणार्थ, जर तुम्हाला CSS वर्गात एखादा घटक निवडायचा असेल कार्यात्मक:, तसेच सूची आयटम परत id = “वेब”, आपण jQuery एकाधिक निवडक वापरू शकता: $ {“कार्यात्मक, #वेब »): फक्त दोन युक्तिवादांमध्ये स्वल्पविराम ठेवण्याचे लक्षात ठेवा.

    jQury निवडकर्ता उदाहरण - ID, वर्ग, घटक, वंशज, मूल, मुलिपल आणि छद्म निवडक उदाहरण

    7. खोटा धडा

    ही jQuery आपल्याला बनावट CSS सारखे वर्ग वापरण्याची परवानगी देते, उदाहरणार्थ $ (‘li: even’) अगदी आयटम निवडा $ (‘li: only’) विचित्र गोष्टी निवडा : पहिला: पहिला आयटम निवडा, : शेवटचे: सूचीतील शेवटचा आयटम निवडण्यासाठी.


    हे आपल्याला हवी असलेली सर्वात विशिष्ट वस्तू निवडण्यासाठी बरीच शक्ती देते. येथे jQuery बनावट वर्ग निवडकर्त्याचे उदाहरण आहे $ (“# भाषा लि: प्रथम”) अनियमित सूचीमधून सूचीतील पहिला आयटम परत करेल

      , जावा भाषांमध्ये आयडी

    • जावा:
    • ,

    हे सर्व जोडलेले आहे JQuery निवडकर्त्यांची उदाहरणे:, आम्ही मोठ्या लोकांची उदाहरणे पाहिली आहेत jQuery निवडकर्ता, ID निवडकर्त्यासह, बाल निवडक, टॅग निवडक, वंशज निवडक, एकाधिक निवडक և खोटे वर्ग निवडक.

    जसे आपण पाहू शकता, JQuery निवडकर्ते CSS निवडकांद्वारे प्रेरित आहेत. म्हणून जर तुम्ही CSS सिलेक्टर्समध्ये चांगले असाल तर तुम्हाला पटकन jQuery सिलेक्टर्स मिळतील. दुसरीकडे, जर तुम्ही CSS निवडकर्त्यांशी अपरिचित असाल, तर हे तुम्हाला ते शिकण्याची परवानगी देते.

    पुढील वाचनासाठी शिफारस केलेली jQuery पुस्तके

    जर तुम्हाला JQuery बद्दल जाणून घेण्यात आणि या आश्चर्यकारक जावास्क्रिप्ट लायब्ररीच्या सामर्थ्याबद्दल अधिक जाणून घेण्यास स्वारस्य असेल तर तुम्ही खालील गोष्टी पाहू शकता jQuery पुस्तके: आणि jQuery अभ्यासक्रम:, हेड फर्स्ट jQuery हे माझे आवडते आहे, परंतु इतर दोन चांगली सोबती पुस्तके आहेत.

    रायन बेनेडेट्टी आणि रोनन क्रॅन्ले यांची पहिली jQuery हेड करा:

    jQuery in Action, Second Edition

    jQuery कुकबुक: उपाय j jQuery विकासकांसाठी उदाहरणे