Jquery घटक निवड. jQuery निवडक. jQuery मध्ये निवडक

एक कार्य जे बर्याचदा नवशिक्यांना सामोरे जाते जावास्क्रिप्ट विकसकहे वेब पृष्ठावरील घटकाची आयडी विशेषतानुसार निवड आहे.

समजा आमच्याकडे पृष्ठावर कोड आहे.

सामग्री अवरोधित करा.

तुम्ही id="elem" सह घटक कसे निवडू शकता आणि त्यासह क्रियांची मालिका कशी करू शकता?

समस्येचे निराकरण करण्यासाठी अनेक पर्याय आहेत. आता त्यांच्याकडे पाहू.

पर्याय 1. वापरा जावास्क्रिप्ट पद्धत getElementById.

“शुद्ध” वापरून त्याच्या आयडीद्वारे घटकात प्रवेश करण्याचा एक मार्ग आहे javascript कोड, कोणतीही तृतीय-पक्ष लायब्ररी न वापरता. ही पद्धत ggetElementById(“element_id”) पद्धत वापरणे आहे. अशा प्रकारे, आम्ही आवश्यक घटक त्याच्या आयडीद्वारे प्रवेश करतो.

एका साध्या उदाहरणाने हे कसे कार्य करते ते पाहू.

सामग्री अवरोधित करा. सूचना(document.getElementById("elem").innerHTML);

कृपया लक्षात घ्या की कोडच्या या ओळी (स्क्रिप्ट) घटकाच्या खाली स्थित आहेत. या आवश्यक स्थितीया स्क्रिप्टचे काम, कारण पृष्ठ लोड होताना Javascript कोड कार्यान्वित केला जातो. आम्ही वरील कोड ठेवल्यास, आम्ही पृष्ठावरील घटकामध्ये प्रवेश करू जो अद्याप लोड झाला नाही, म्हणजे. स्क्रिप्ट कार्यान्वित होताना ते अद्याप कोडमध्ये नसेल. हे टाळण्याचे मार्ग आहेत, परंतु ते या लेखाच्या व्याप्तीच्या पलीकडे आहे.

परिणामी, सर्वकाही योग्यरित्या कार्य करत असल्यास, आम्हाला एक पॉप-अप विंडो मिळेल. ही विंडो div ब्लॉकमध्ये असलेला मजकूर प्रदर्शित करेल.

आता आपण ही समस्या दुसऱ्या मार्गाने कशी सोडवू शकतो ते पाहू.

पर्याय 2. वापरणे Jquery लायब्ररी.

त्याच्या आयडीनुसार घटक निवडण्याचा दुसरा पर्याय म्हणजे Jquery लायब्ररी वापरणे. सराव मध्ये, आधुनिक लिपींमध्ये, ही पद्धत बहुतेकदा वापरली जाते. हे लक्षात ठेवणे अधिक सोयीस्कर आणि सोपे आहे.

एखाद्या घटकाचा त्याच्या आयडीद्वारे संदर्भ देण्यासाठी, तुम्हाला खालील बांधकाम वापरण्याची आवश्यकता आहे:

$("#elem")

येथे elem हे id विशेषता मध्ये असलेले नाव आहे.

कारण आम्ही Jquery नावाची तृतीय-पक्ष Javascript लायब्ररी वापरू, नंतर ही लायब्ररी प्रथम समाविष्ट करणे आवश्यक आहे.

हे विभागात जोडले आहे, हे केले जाऊ शकते एक मार्ग जोडणे आहे पुढील ओळकोड:

लायब्ररी लोड होण्यासाठी, इंटरनेट कनेक्शन असणे आवश्यक आहे.

सामग्री अवरोधित करा. इशारा($("#elem").html());

स्क्रिप्ट स्वतः, मागील उदाहरणाप्रमाणे, आपण ज्या घटकाशी संवाद साधू इच्छिता त्याच्या कोडच्या खाली स्थित असावी.

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

JavaScript, CSS प्रमाणे, कार्यक्षमता आहे जी तुम्हाला पृष्ठ सामग्री बदलण्यासाठी HTML घटकांमध्ये प्रवेश करण्यास अनुमती देते. CSS मध्ये, निवडक लिहून हे साध्य केले जाते. JavaScript मध्ये गोष्टी व्यवस्थित करण्याचे अनेक मार्ग आहेत. ही कार्यक्षमता, आणि त्यापैकी एक येथे आहे:

Var primeHeadings = document.getElementsByTagName("h1");

हा कोड सर्व h1 शीर्षलेख काढतो आणि, साधारणपणे, प्राथमिक हेडिंग व्हेरिएबलमध्ये ठेवतो. जर पृष्ठावर अनेक शीर्षके असतील, तर ती सर्व ॲरेमध्ये ठेवली जातील.

Var ou812 = document.getElementById("एडी");

हा कोड आयडी = "एडी" सह घटक निवडतो.

वर गिटार = document.getElementsByClassName("axes");

आपण घटक त्यांच्या वर्गांच्या नावाने देखील निवडू शकतो.

चला थोडी Sizzle जोडू

विविध प्रकारचे JavaScript फ्रेमवर्क प्रदान करतात स्वतःच्या क्षमतासंकलित निवडक. सर्वात यशस्वी सिझल होते, जे नंतर jQuery बनले. त्याच्या वंशजांच्या विपरीत, सिझल केवळ DOM सह कार्य करू शकते आणि हाताळू शकते. तुम्हाला इतर सर्व jQuery कार्यक्षमतेची आवश्यकता नसल्यास, तुम्ही आजही स्वतंत्र लायब्ररी म्हणून Sizzle डाउनलोड करू शकता.

या ग्रंथालयांच्या विकासासह, निवडकर्त्यांचे लेखन लक्षणीयरीत्या कमी झाले आहे आणि बदलले आहे:

$("#dave").css()

हा कोड अर्क करतो html घटक id=”dave” सह आणि तुम्हाला त्याच्या css शैलीसह कार्य करण्यास अनुमती देते.

सिझल ही एकमेव JavaScript मॅनिपुलेशन लायब्ररी नाही html कोड. इतर पर्याय देखील आहेत, उदाहरणार्थ rangy. तथापि, माझ्या मते, या लेखात तुम्हाला पुढे काय वाटेल ते आधी वरील सर्व कालबाह्य झाले आहे.

JavaScript चा पुढील स्तर

बऱ्याच विकसकांनी jQuery इतक्या वेळा वापरण्यास सुरुवात केली की त्यांना JavaScript मधील नाट्यमय बदल लक्षातही आले नाहीत.

“JavaScript Selector API” हा HTML5 तपशीलाचा अधिकृत भाग आहे आणि XHTML पृष्ठे लिहिताना देखील वापरला जाऊ शकतो. नवीन वाक्यरचना अतिशय सोपी आहे:

Document.querySelector("#eddie")

हा कोड पूर्णपणे document.getElementById("eddie") च्या समतुल्य आहे. प्रभावी नाही? याबद्दल काय:

Document.querySelector("#eddie h1 + p")

नवीन कार्यक्षमता तुम्हाला जटिल CSS अभिव्यक्ती वापरून DOM हाताळण्याची परवानगी देते.

querySelector मेथड फक्त पहिला घटक मिळवते ज्याचा सामना होतो. सर्व पुनर्प्राप्त करण्यासाठी, तुम्हाला querySelectorAll वापरण्याची आवश्यकता आहे:

Var hiFrets = document.querySelectorAll("table#frets tr:nth-child(3)")

हा कोड टेबलमधून प्रत्येक तिसरी पंक्ती id="frets" सह पुनर्प्राप्त करतो.

काही अतिशय महत्वाचे मुद्दे

तुम्ही querySelector / All पद्धत वापरत असल्यास अनेक मर्यादा आहेत ज्यांची तुम्हाला जाणीव असायला हवी:

सर्व ब्राउझर सपोर्ट करत नाहीत नवीन कार्यक्षमता. जर तुमच्यासाठी कोड IE6-7 वर कार्य करत असेल, तर लायब्ररी वापरणे चांगले आहे जे DOM: Sizzle किंवा jQuery मध्ये हाताळू शकतात.

निवडक अतिशय काळजीपूर्वक लिहिणे आवश्यक आहे, अन्यथा ब्राउझर त्यांना समजणार नाहीत आणि वरील पद्धती शून्य परत येतील. सर्वसाधारणपणे, अत्यंत सावधगिरी बाळगा, विशेषत: CSS3 निवडक वापरताना.

getElementsByTagName च्या विपरीत, querySelectorAll पद्धत पुनर्प्राप्त केलेल्या घटकांची स्थिर यादी देते जसे ते पृष्ठावर दिसतात. हा क्षणवेळ याचा अर्थ असा आहे की कोणतेही बनवताना डायनॅमिक बदलकोडमध्ये (जावास्क्रिप्टद्वारे घटक जोडणे, काढून टाकणे), तुम्हाला querySelectorAll पद्धत पुन्हा वापरावी लागेल.

विविध प्रकारच्या लायब्ररी डाउनलोड करण्याच्या गरजेपासून मुक्त होण्यासाठी नवीन कार्यक्षमता वापरून पहा.

या धड्यात, आपण फॉर्म एलिमेंट सिलेक्टर्सबद्दल शिकू, ज्याचा वापर आपण घटक निवडण्यासाठी jQuery("selector") फंक्शनचा युक्तिवाद म्हणून करू.

फॉर्म घटक निवडकांचा उद्देश

फॉर्म घटक निवडक हे यावर अवलंबून घटक निवडण्यासाठी डिझाइन केलेले आहेत:

• त्यांचे प्रकार (प्रकार विशेषता मूल्ये) आहेत :बटण, :चेकबॉक्स, :फाइल, :इमेज, :पासवर्ड, :रेडिओ, :रीसेट, :सबमिट, :टेक्स्ट.
• त्यांचा टॅग इनपुट , टेक्स्टेरिया , सिलेक्ट किंवा बटण - :इनपुट असो .
• घटकाकडे फोकस आहे की नाही - :फोकस.
• घटक सक्रिय स्थितीत आहेत (:सक्षम) किंवा निष्क्रिय स्थितीत (:अक्षम).
• पर्याय घटक निवडलेल्या स्थितीत आहेत की नाही - :निवडलेले .
• चेकबॉक्स , सिलेक्ट आणि रेडिओ घटक निवडलेल्या स्थितीत आहेत की नाही - :तपासणी केली आहे.

फॉर्म घटक निवडक

:button - type="button" सह सर्व बटण घटक आणि घटक निवडते. $(":बटण") निवडकर्ता $("बटण, इनपुट") च्या समतुल्य आहे.

निवडकर्ता:बटण भाग नाही CSS चष्मा, हे केवळ jQuery मध्ये लागू केले आहे. त्यामुळे जेव्हा तुम्ही घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. मध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी आधुनिक ब्राउझर, खालील बांधकाम वापरा: $("निवडक").फिल्टर(":बटण");

उदाहरणार्थ, फॉर्ममध्ये स्थित सर्व बटण घटक किंवा type="button" असलेले घटक निवडा:

डेटा अपडेट करा $("फॉर्म:बटण"); //किंवा फिल्टर पद्धत वापरून $("फॉर्म *").फिल्टर(":बटण");



:checkbox - type="checkbox" सह सर्व घटक निवडते. $(":चेकबॉक्स") निवडकर्ता $("") च्या समतुल्य आहे.

चेकबॉक्स सिलेक्टरच्या आधी, तसेच स्यूडो-क्लास सिलेक्टरच्या आधी (म्हणजे ":") चिन्हाने टॅग किंवा दुसरा सिलेक्टर (उदाहरणार्थ, वर्गाचे नाव) निर्दिष्ट करण्याची शिफारस केली जाते. जर तुम्ही " : " चिन्हापूर्वी काहीही निर्दिष्ट केले नाही, तर चा वापर करा सार्वत्रिक निवडकर्ता(*). दुसऱ्या शब्दांत, $(":चेकबॉक्स") हे $("*:चेकबॉक्स") च्या समतुल्य आहे. परंतु या प्रकरणात *: $("इनपुट:चेकबॉक्स") ऐवजी इनपुट टॅग वापरणे अधिक योग्य आहे.

चेकबॉक्स सिलेक्टर हा CSS स्पेसिफिकेशनचा भाग नाही, तो केवळ jQuery मध्ये लागू केला जातो. त्यामुळे जेव्हा तुम्ही घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. आधुनिक ब्राउझरमध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी, खालील बांधकाम वापरा: $("इनपुट");

उदाहरणार्थ, सर्व निवडा इनपुट घटक, ज्यात type="checkbox" विशेषता आहे, उदा. चेकबॉक्सेस आहेत:

$("इनपुट:चेकबॉक्स"); //किंवा विशेषता निवडक वापरून $("इनपुट");



:चेक केलेले - चेक केलेले किंवा निवडलेल्या स्थितीसह सर्व घटक निवडते. चेकबॉक्स, सिलेक्ट एलिमेंट्स आणि रेडिओ बटणांसाठी चेक केलेला सिलेक्टर आहे.

लिनक्स विंडोज क्रोम फायरफॉक्स मूल्य 1 मूल्य 2 मूल्य 3



: disabled - अक्षम केलेले सर्व घटक निवडते.

:डिसेबल सिलेक्टरच्या आधी, तसेच स्यूडो-क्लास सिलेक्टरच्या आधी (म्हणजे " : " ने सुरू होणारे), टॅग किंवा दुसरा सिलेक्टर (उदाहरणार्थ, वर्गाचे नाव) नमूद करण्याची शिफारस केली जाते. जर तुम्ही " : " चिन्हापूर्वी काहीही निर्दिष्ट केले नाही, तर युनिव्हर्सल सिलेक्टरचा वापर (" * ") निहित आहे. दुसऱ्या शब्दांत, $(":disabled") $("*:disabled") च्या समतुल्य आहे. परंतु या प्रकरणात, " * ": $("input:disabled") ऐवजी इनपुट टॅग वापरणे अधिक योग्य आहे.

ॲट्रीब्युट सिलेक्टरपेक्षा:डिसेबल सिलेक्टर वेगळे आहे. निवडकर्ता: अक्षम तपासा बुलियन मूल्य(सत्य/असत्य) घटकाच्या अक्षम केलेल्या गुणधर्माचे गुणधर्म, तर विशेषता निवडकर्ता फक्त घटकाच्या अक्षम केलेल्या गुणधर्माची तपासणी करतो.

हे:अक्षम निवडकर्ता केवळ समर्थन देणारे HTML घटक निवडण्यासाठी वापरले जाऊ शकते अक्षम विशेषता: , , , , आणि .

$("इनपुट:अक्षम");



:enabled - सक्षम केलेले सर्व घटक निवडते.

:सक्षम सिलेक्टरच्या आधी, तसेच स्यूडो-क्लास सिलेक्टरच्या आधी (म्हणजे ": " ने सुरू होणारे), टॅग किंवा दुसरा सिलेक्टर (उदाहरणार्थ, वर्गाचे नाव) निर्दिष्ट करण्याची शिफारस केली जाते. जर तुम्ही " : " चिन्हापूर्वी काहीही निर्दिष्ट केले नाही, तर युनिव्हर्सल सिलेक्टर (" * ") चा वापर निहित आहे. दुसऱ्या शब्दांत, $(":enabled") $("*:enabled") च्या समतुल्य आहे. परंतु या प्रकरणात " * ": $("input:enabled") ऐवजी इनपुट टॅग वापरणे अधिक योग्य आहे.

:सक्षम निवडकर्ता:not() पेक्षा वेगळा आहे. अक्षम केलेले बुलियन गुणधर्म असत्य वर सेट केलेले घटक निवडणारा:सक्षम निवडक निवडतो. जेव्हा :not() असे घटक निवडते ज्यामध्ये अक्षम केलेले गुणधर्म सेट नाहीत.

:सक्षम निवडकर्ता केवळ HTML घटक निवडण्यासाठी वापरला जाऊ शकतो जे अक्षम केलेल्या गुणधर्मांना समर्थन देतात: , , , , , आणि .

$("इनपुट:सक्षम");



:file - type="file" सह सर्व घटक निवडते. फाइल सिलेक्टर च्या समतुल्य आहे.

फाइल सिलेक्टरच्या आधी, तसेच स्यूडो-क्लास सिलेक्टरच्या आधी (म्हणजे " : " ने सुरू होणारे), टॅग किंवा दुसरा सिलेक्टर (उदाहरणार्थ, वर्गाचे नाव) निर्दिष्ट करण्याची शिफारस केली जाते. जर तुम्ही " : " चिन्हापूर्वी काहीही निर्दिष्ट केले नाही, तर युनिव्हर्सल सिलेक्टर (" * ") चा वापर निहित आहे. दुसऱ्या शब्दांत, $(":file") $("*:file") च्या समतुल्य आहे. परंतु अशा प्रकरणांमध्ये " * ": $("input:file") ऐवजी इनपुट टॅग वापरणे अधिक योग्य आहे.

फाइल सिलेक्टर हा CSS स्पेसिफिकेशनचा भाग नाही, तो केवळ jQuery मध्ये लागू केला जातो. त्यामुळे जेव्हा तुम्ही घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. आधुनिक ब्राउझरमध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी, विशेषता निवडक वापरा.

$("इनपुट:फाइल"); // $("इनपुट");



:focus - फोकस असलेला घटक निवडतो.

फोकस सिलेक्टरच्या आधी, तसेच स्यूडो-क्लास सिलेक्टरच्या आधी (म्हणजे " : " ने सुरू होणारे), टॅग किंवा दुसरा सिलेक्टर (उदाहरणार्थ, वर्गाचे नाव) निर्दिष्ट करण्याची शिफारस केली जाते. जर तुम्ही " : " चिन्हापूर्वी काहीही निर्दिष्ट केले नाही, तर युनिव्हर्सल सिलेक्टरचा वापर (" * ") निहित आहे. दुसऱ्या शब्दांत, $(":focus") $("*:focus") च्या समतुल्य आहे. जर तुम्हाला फोकस असलेला वर्तमान घटक मिळवायचा असेल तर वापरा खालील कोडसह: $(document.activeElement) . ही पद्धत DOM ट्रीमध्ये न शोधता घटक मिळतो.

:image - type="image" सह सर्व घटक निवडते. द:इमेज सिलेक्टर च्या समतुल्य आहे.

द:इमेज सिलेक्टर हा CSS स्पेसिफिकेशनचा भाग नाही, तो केवळ jQuery मध्ये लागू केला जातो. त्यामुळे जेव्हा तुम्ही घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. आधुनिक ब्राउझरमध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी, वापरा.

$("इनपुट:इमेज"); // $("इनपुट");



:input - दस्तऐवजातील सर्व इनपुट, टेक्स्टेरिया, सिलेक्ट आणि बटण घटक निवडते. त्या. ते सर्व फॉर्म नियंत्रणे निवडते.

इनपुट सिलेक्टर हा CSS स्पेसिफिकेशनचा भाग नाही, तो केवळ jQuery मध्ये लागू केला जातो. त्यामुळे जेव्हा तुम्ही घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. आधुनिक ब्राउझरमध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी, खालील बांधकाम वापरा: $("निवडक").फिल्टर(":इनपुट");

पॅरामीटर 1 पॅरामीटर 2 $("*:इनपुट"); // $("फॉर्म *).फिल्टर(":इनपुट");



:password - type="password" सह सर्व घटक निवडते. निवडकर्ता:पासवर्ड" च्या समतुल्य आहे.

पासवर्ड सिलेक्टरच्या आधी, तसेच स्यूडो-क्लास सिलेक्टरच्या आधी (म्हणजे " : " ने सुरू होणारे), टॅग किंवा दुसरा सिलेक्टर (उदाहरणार्थ, वर्गाचे नाव) निर्दिष्ट करण्याची शिफारस केली जाते. जर तुम्ही " : " चिन्हापूर्वी काहीही निर्दिष्ट केले नाही, तर युनिव्हर्सल सिलेक्टर (" * ") चा वापर निहित आहे. दुसऱ्या शब्दांत, $(":पासवर्ड") $("*:पासवर्ड") च्या समतुल्य आहे. परंतु अशा प्रकरणांमध्ये " * ": $("input:password") ऐवजी इनपुट टॅग वापरणे अधिक योग्य आहे.

द:पासवर्ड सिलेक्टर हा CSS स्पेसिफिकेशनचा भाग नाही. हे केवळ jQuery मध्ये लागू केले आहे. त्यामुळे जेव्हा तुम्ही घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. आधुनिक ब्राउझरमध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी, वापरा.

$("*:पासवर्ड"); // $("");



:radio - type="radio" सह सर्व घटक निवडते. निवडकर्ता:रेडिओ समतुल्य आहे.

रेडिओ सिलेक्टरच्या आधी, तसेच स्यूडो-क्लास सिलेक्टरच्या आधी (म्हणजे " : " ने सुरू होणारे), टॅग किंवा दुसरा सिलेक्टर (उदाहरणार्थ, वर्गाचे नाव) निर्दिष्ट करण्याची शिफारस केली जाते. जर तुम्ही " : " चिन्हापूर्वी काहीही निर्दिष्ट केले नाही, तर युनिव्हर्सल सिलेक्टर (" * ") चा वापर निहित आहे. दुसऱ्या शब्दांत, $(":radio") $("*:radio") च्या समतुल्य आहे. परंतु या प्रकरणात " * ": $("input:radio") ऐवजी इनपुट टॅग वापरणे अधिक योग्य आहे.

रेडिओ सिलेक्टर हा CSS स्पेसिफिकेशनचा भाग नाही, तो केवळ jQuery मध्ये लागू केला जातो. त्यामुळे जेव्हा तुम्ही घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. आधुनिक ब्राउझरमध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी, वापरा.

$(":रेडिओ"); // $("");



:reset - type="reset" सह सर्व घटक निवडते. निवडकर्ता:रीसेट समतुल्य आहे.

रिसेट सिलेक्टर हा CSS स्पेसिफिकेशनचा भाग नाही, तो केवळ jQuery मध्ये लागू केला जातो. त्यामुळे जेव्हा तुम्ही घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. आधुनिक ब्राउझरमध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी, वापरा.

$(":रीसेट"); // $("");



:selected - निवडलेल्या स्थितीत असलेले सर्व घटक निवडते. निवडलेला निवडकर्ता फक्त पर्याय घटकांवर कार्य करतो आणि चेकबॉक्स आणि रेडिओ घटकांवर कार्य करत नाही. नंतरचे सह कार्य करण्यासाठी, निवडकर्ता:चेक केलेले वापरा.

द:सिलेक्टेड सिलेक्टर हा CSS स्पेसिफिकेशनचा भाग नाही, तो केवळ jQuery मध्ये लागू केला जातो. म्हणून जेव्हा तुम्ही ते घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. आधुनिक ब्राउझरमध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी, खालील बांधकाम वापरा: $("निवडक").फिल्टर(":निवडलेले");

फुले झुडपे झाडे पृथ्वी गवत $(":निवडलेले"); // $("*").फिल्टर(":निवडलेले");



:submit - type="submit" सह सर्व घटक निवडते. निवडकर्ता:सबमिट साठी आहे बटण घटककिंवा इनपुट.

द:सबमिट सिलेक्टर हा CSS स्पेसिफिकेशनचा भाग नाही, तो केवळ jQuery मध्ये लागू केला जातो. म्हणून जेव्हा तुम्ही ते घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. आधुनिक ब्राउझरमध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी, इनपुट, बटण वापरा

$(":सबमिट"); // $("इनपुट,बटण");



:text - type="text" सह सर्व घटक निवडते.

jQuery फंक्शन$(":text") आम्हाला घटक निवडण्याची परवानगी देते. टेक्स्ट सिलेक्टरच्या आधी, तसेच स्यूडो-क्लास सिलेक्टरच्या आधी (म्हणजे " : " ने सुरू होणारे), टॅग किंवा दुसरा सिलेक्टर (उदाहरणार्थ, वर्गाचे नाव) निर्दिष्ट करण्याची शिफारस केली जाते. जर तुम्ही " : " चिन्हापूर्वी काहीही निर्दिष्ट केले नाही, तर युनिव्हर्सल सिलेक्टर (" * ") चा वापर निहित आहे. दुसऱ्या शब्दांत, $(":text") $("*:text") च्या समतुल्य आहे. परंतु या प्रकरणात " * ": $("input:text") ऐवजी इनपुट टॅग वापरणे अधिक योग्य आहे.

jQuery 1.5.2 नुसार,:इनपुट निवडकर्ता इनपुट घटक देखील निवडतो ज्यामध्ये टाइप विशेषता निर्दिष्ट केलेली नाही (ज्या बाबतीत घटकाला type="text" असे गृहीत धरले जाते).

येथे $(":text") आणि $("") मधील फरक दाखवू खालील उदाहरण:

$("").is(""); // असत्य $("").is(":मजकूर"); // खरे

मजकूर निवडकर्ता हा CSS तपशीलाचा भाग नाही, तो केवळ jQuery मध्ये लागू केला जातो. त्यामुळे जेव्हा तुम्ही घटक फिल्टर करण्यासाठी सिलेक्टरमध्ये वापरता, तेव्हा तुम्हाला मूळ DOM querySelectorAll() पद्धतीद्वारे प्रदान केलेला कार्यप्रदर्शन लाभ मिळणार नाही. आधुनिक ब्राउझरमध्ये क्वेरी कार्यप्रदर्शन सुधारण्यासाठी, वापरा.

$(":मजकूर"); // $("इनपुट");

jQuery आहे जावास्क्रिप्ट लायब्ररी, जे DOM, इव्हेंट्स, CSS आणि AJAX सह कार्य करणे सोपे करते आणि तुम्हाला सहज ॲनिमेशन तयार करण्यास अनुमती देते. मुख्य वैशिष्ट्य jQuery क्रॉस-ब्राउझर सुसंगत आहे (होय, आणि इंटरनेट एक्सप्लोरर 6 सुद्धा :). हे शब्द या लायब्ररीच्या वर्णनात अगदी तंतोतंत बसतात आणि पूर्णपणे न्याय्य आहेत.

jQuery सह पहिली पायरी

प्रथम, तुम्हाला त्याच नावाची लायब्ररी डाउनलोड करावी लागेल. तुम्ही हे अधिकृत jQuery वेबसाइटवर करू शकता. यानंतर, तुम्ही jQuery ला तुमच्याशी जोडले पाहिजे HTML पृष्ठ. तुम्ही स्क्रिप्ट टॅग जोडून हे करू शकता दस्तऐवजाचे प्रमुख:

jQuery कनेक्ट करा

यानंतर तुम्ही jQuery वापरणे सुरू करू शकता.

jQuery मध्ये निवडक

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

चला एक कोड उदाहरण पाहू:

उदाहरण १

परिच्छेद १

परिच्छेद २

परिच्छेद ३

// तुमचा जावास्क्रिप्ट कोड येथे जाईल


प्रत्येक दस्तऐवज घटक मिळविण्याची उदाहरणे:

$(document.body) - शरीर घटक
$("div") - निवडकर्ता सर्व div घटक परत करतो
$("p") किंवा $("div p") - सर्व परिच्छेद p (3 तुकडे)
$("div > p") - परिच्छेद मिळवते जे div घटकाचे तात्काळ चाइल्ड नोड आहेत
$("p:प्रथम") - परिच्छेद क्रमांक 1
$("#pEl") किंवा $("p#pEl") - अभिज्ञापक (id) "pEl" सह परिच्छेद परत करेल
$("p.second") - वर्ग "सेकंड" सह परिच्छेद देईल
$("p:eq(1)") - अनुक्रमणिका 1 सह परिच्छेद परत करेल (निर्देशांक 0 पासून सुरू होतात, परिच्छेद क्रमांक 2 परत केला जाईल)
$("p:लास्ट") - शेवटचा परिच्छेद परत करतो
$("p.third#third") - परिच्छेद क्रमांक 3 परत करेल

लक्षात घ्या की आपल्याला आवश्यक असलेले घटक शोधणे किती सोपे आहे. document.getElementById("id") आणि document.getElementsByTagName("p") बद्दल विसरून जा, आम्हाला यापुढे त्यांची गरज भासणार नाही.

उदाहरण २

चला jQuery च्या काही अधिक शक्तिशाली वैशिष्ट्यांवर एक नजर टाकूया. हे करण्यासाठी, एक टेबल काढूया

शीर्षलेख 1 शीर्षलेख 2

सेल १	सेल 2
सेल 3	सेल 4
सेल 5	सेल 6
सेल 7	सेल 8

मला दाबा

या उदाहरणात, मी ":विषम" निवडक वापरला, जो सर्व विषम घटक निवडतो आणि ते सारणीच्या पंक्तींवर (tr टॅग्ज) लागू केले. ":सम" यामधून सम निवडतो (0, 2, 4, ...).
आणि म्हणून आपल्याला सारणीच्या सर्व विषम पंक्ती निवडण्याची आवश्यकता आहे, परंतु आपल्याला प्रथम पंक्ती, जे शीर्षलेख (थ घटक) आहे, तिचा रंग बदलू इच्छित नाही आणि पट्टे तिसऱ्या रांगेपासून सुरू होऊ इच्छित नाहीत. या प्रकरणात, निवडकर्ता ":not(selector)" आमच्यासाठी उपयुक्त ठरेल. हे असे वापरले जाते:

$("टेबल tr:not(:first):विषम") - पहिले वगळता सर्व सम tr घटक निवडा

येथे स्त्रोत जावास्क्रिप्ट आहे:

$("बटण").टॉगल(फंक्शन() (
$("टेबल tr:not(:first):odd").css("पार्श्वभूमी", "#eee");
// 1ले क्लिक, पार्श्वभूमी राखाडी वर सेट करा
), कार्य() (
$("टेबल tr:not(:first)").css("पार्श्वभूमी", "काहीही नाही");
// 2 रा दाबा, सर्व tr मधून पार्श्वभूमी काढा
});

उदाहरण 3 - फॉर्मसह कार्य करणे

jQuery वेबसाइटवर, निवडक विभागात, फॉर्मसह काम करण्यासाठी समर्पित एक स्वतंत्र उपविभाग आहे. निवडक चेकबॉक्सेस, बटणे, इनपुट फील्ड इत्यादीसह सोयीस्कर काम देतात. चला आकार काढूया.