jQuery चा परिचय. jquery मूलभूत. jQuery लायब्ररीचे वर्णन

03/05/17 1.2K परिचय

JQuery HTML ही "कमी लिहा आणि जास्त करा" यासाठी डिझाइन केलेली लायब्ररी आहे. ही प्रोग्रामिंग भाषा नाही, परंतु अंमलबजावणी सुलभ करण्यासाठी वापरली जाणारी एक साधन आहे सामान्य कार्ये JavaScript.

jQuery आहे अतिरिक्त फायदा- क्रॉस-ब्राउझर सुसंगतता. कोणत्याही आधुनिक ब्राउझरमध्ये तुमच्या कोडचा अर्थ लावला जाईल याची तुम्ही खात्री बाळगू शकता.

एक साधा कार्यक्रम लिहिण्याची तुलना “हॅलो, वर्ल्ड! "सोबत JavaScript वापरूनआणि jQuery, तुम्ही त्यांच्यातील फरक पाहू शकता.

JavaScript

document.getElementById("demo").innerHTML = "हॅलो, वर्ल्ड!";

JQuery

$("#डेमो").html("हॅलो, वर्ल्ड!");

या लहान उदाहरण jQuery वापरून तुम्ही मानक JavaScript वापरण्यासारखे परिणाम कसे मिळवू शकता हे स्पष्ट करते, परंतु अधिक संक्षिप्तपणे.

गोल

हे ट्यूटोरियल jQuery चे कोणतेही मूलभूत ज्ञान गृहीत धरत नाही, परंतु खालील विषयांचा समावेश करते:

• वेब प्रोजेक्टमध्ये jQuery कसे स्थापित करावे;
• API, DOM आणि CDN सारख्या महत्त्वाच्या वेब विकास संकल्पना परिभाषित करा;
• सामान्य jQuery निवडक, कार्यक्रम आणि प्रभाव;
• या लेखात शिकलेल्या संकल्पनांची चाचणी घेण्यासाठी उदाहरणे.

jQuery सेटअप

JQuery ही JavaScript फाइल आहे जी तुम्ही तुमच्या दस्तऐवजात लिंक कराल. JQuery ला HTML ला कसे जोडायचे:

• स्थानिक प्रत डाउनलोड करा;
• सामग्री वितरण नेटवर्क (CDN) द्वारे फाइलमध्ये लिंक जोडा.

नोंद. सामग्री वितरण नेटवर्क (CDN) ही एकाधिक सर्व्हरची एक प्रणाली आहे जी वापरकर्त्याला त्यांच्या भौगोलिक स्थानावर आधारित वेब सामग्री प्रदान करते. तुम्ही लिंक जोडता तेव्हा jQuery फाइल CDN द्वारे, ते वापरकर्त्याला त्याच्या स्वतःच्या सर्व्हरवर होस्ट केले असल्यास त्यापेक्षा जलद आणि अधिक कार्यक्षमतेने प्रदान केले जाईल.

आमच्या उदाहरणांमध्ये आम्ही CDN द्वारे jQuery लिंक वापरू. नवीनतम आवृत्ती jQuery Google वर आढळू शकते. त्याऐवजी तुम्हाला लायब्ररी डाउनलोड करायची असल्यास, तुम्ही अधिकृत वेबसाइटवरून jQuery ची प्रत मिळवू शकता.

चला एक छोटा वेब प्रोजेक्ट बनवू. यात style.css फाइल, scripts.js आणि मुख्य index.html फाइल असेल.

मूलभूत HTML मार्कअप सेट करा आणि index.html मध्ये सेव्ह करा.

Index.html

jQuery डेमो

Index.html

jQuery डेमो

JavaScript स्क्रिप्ट (scripts.js) खालील दस्तऐवजात समाविष्ट केली पाहिजे jQuery लायब्ररीकिंवा ते कार्य करणार नाही.

नोंद. तुम्ही jQuery ची स्थानिक प्रत डाउनलोड केली असल्यास, ती js/ फोल्डरमध्ये सेव्ह करा आणि js/jquery.min.js लिंकद्वारे कनेक्ट करा.

jQuery लायब्ररी एचटीएमएलमध्ये जोडली आहे आणि आमच्याकडे आहे पूर्ण प्रवेश jQuery API वर.

jQuery वापरणे

jQuery चा वापर ब्राउझरमधील HTML घटकांशी DOM द्वारे कनेक्ट करण्यासाठी केला जातो.

डॉक्युमेंट ऑब्जेक्ट मॉडेल (DOM) ही एक पद्धत आहे ज्याद्वारे JavaScript (आणि jQuery) ब्राउझरमध्ये HTML शी संवाद साधते. DOM काय आहे हे पाहण्यासाठी, तुमच्या ब्राउझरमध्ये, क्लिक करा राईट क्लिकवर्तमान वेब पृष्ठावर माऊस करा आणि "कोड पहा" निवडा. हे "डेव्हलपर टूल्स" पॅनेल उघडेल. तुम्हाला त्यात दिसणारा HTML कोड हा DOM आहे.

प्रत्येक HTML घटक DOM नोड मानला जातो—एक ऑब्जेक्ट ज्यामध्ये JavaScript द्वारे प्रवेश केला जाऊ शकतो. या वस्तूंची झाडाची रचना असते, ज्यात मूलद्रव्ये मुळाच्या सर्वात जवळ असतात आणि प्रत्येक घटक झाडाची शाखा असतो. JavaScript यापैकी कोणतेही घटक जोडू, काढू आणि सुधारू शकते.

आपण पुन्हा उजवे-क्लिक केल्यास आणि पहा निवडा स्रोत", तुम्हाला रॉ एचटीएमएल दिसेल. सुरुवातीला तुम्ही DOM आणि HTML सोर्स कोडबद्दल गोंधळात असाल, परंतु त्या वेगळ्या गोष्टी आहेत. पृष्ठाचा स्त्रोत कोड HTML फाईलमध्ये लिहिलेल्या गोष्टीशी जुळतो. हे स्थिर आणि अपरिवर्तित आहे आणि JavaScript द्वारे प्रभावित होत नाही. यामधून, DOM डायनॅमिक आहे आणि बदलू शकते.

बाह्य DOM स्तर, जो संपूर्ण नोडला गुंडाळतो, तो दस्तऐवज ऑब्जेक्ट आहे. वर वापरण्यासाठी jQuery पृष्ठ, तुम्हाला दस्तऐवज "तयार" असल्याची खात्री करणे आवश्यक आहे.

js/ फोल्डरमध्ये scripts.js फाइल तयार करा आणि त्यात खालील कोड जोडा:

js/scripts.js

HTML मध्ये घातलेले सर्व jQuery कोड वरील कोडमध्ये गुंडाळले जातील. जावास्क्रिप्ट कोड कार्यान्वित करण्यासाठी DOM तयार झाल्यावरच ते कार्य करेल. जरी काही प्रकरणांमध्ये घटक रेंडर होईपर्यंत JavaScript लोड होणार नाही, या ब्लॉकसह सर्वोत्तम सराव मानला जातो.

“हॅलो, वर्ल्ड!” स्क्रिप्ट चालवण्यासाठी आणि jQuery वापरून ब्राउझरमध्ये मजकूर प्रदर्शित करतो, आम्ही प्रथम त्यास लागू केलेल्या अभिज्ञापक डेमोसह रिक्त परिच्छेद घटक तयार करतो.

Index.html

... ...

JQuery म्हटले जाते आणि डॉलर चिन्हाने ($) सूचित केले जाते. आम्ही jQuery वापरून DOM मध्ये प्रवेश करतो CSS वाक्यरचना, आणि पद्धत वापरून क्रिया लागू करा:

$("निवडक").पद्धत();

CSS मधील आयडेंटिफायर (#) चिन्हाद्वारे दर्शविला जात असल्याने, आम्ही #demo सिलेक्टर वापरून डेमो आयडेंटिफायरमध्ये प्रवेश करतो. html() ही एक पद्धत आहे जी घटकामध्ये HTML मार्कअप बदलते.

आता आम्ही कार्यक्रम ठेवू “हॅलो, वर्ल्ड! " jQuery तयार() रॅपरच्या आत. ही ओळ तुमच्या scripts.js फाइलमधील तुमच्या विद्यमान फंक्शनमध्ये जोडा:

js/scripts.js

$(document).ready(function() ( $("#demo").html("हॅलो, वर्ल्ड!"); ));

तुमचे बदल सेव्ह केल्यानंतर, तुम्ही index.html फाइल तुमच्या ब्राउझरमध्ये उघडू शकता. सर्वकाही योग्यरित्या कार्य करत असल्यास, तुम्हाला "हॅलो, वर्ल्ड! »

“हॅलो, वर्ल्ड!” वर उजवे-क्लिक करा. " आणि " कोड पहा " निवडा. आता DOM दाखवतो

नमस्कार, जग!

. तुम्ही पेजचा सोर्स कोड पाहिल्यास, तुम्हाला फक्त आम्ही लिहिलेला मूळ HTML कोड दिसेल.

निवडकर्ते

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

निवडक ऍक्सेस करण्यासाठी, कंस () नंतर $ चिन्ह वापरा.

$("निवडक")

दुहेरी कोट केलेल्या स्ट्रिंगला प्राधान्य दिले जाते (jQuery मॅन्युअलनुसार). जरी एकल अवतरणांसह स्ट्रिंग बहुतेकदा वापरल्या जातात.

खाली आहे लहान पुनरावलोकनवारंवार वापरलेले निवडक.

• $(«*») — वाइल्डकार्ड: पृष्ठावरील प्रत्येक घटक निवडतो;
• $(this) - current : मध्ये फेरफार केला जात असलेला वर्तमान घटक निवडतो हा क्षणफंक्शनच्या आत;
• $("p") - टॅग: टॅगची सर्व उदाहरणे निवडतो

  ;

• $(".example") - वर्ग: सर्व घटक निवडतो ज्यावर उदाहरण वर्ग लागू केला जातो;
• $("#example") - आयडेंटिफायर: यासह एक प्रसंग निवडतो अद्वितीय ओळखकर्ताउदाहरण
• $("") - विशेषता: सर्व घटक निवडते ज्यांचे प्रकार गुणधर्म मजकूरावर सेट केले आहेत;
• $("p:first-of-type") - स्यूडो-एलिमेंट: पहिला घटक निवडतो

  .

JQuery ला HTML शी कनेक्ट करताना, तुम्ही वर्ग आणि आयडी हाताळाल. जेव्हा तुम्हाला एकापेक्षा जास्त घटक निवडण्याची आवश्यकता असते तेव्हा वर्ग वापरले जातात आणि जेव्हा तुम्हाला फक्त एक निवडण्याची आवश्यकता असते तेव्हा अभिज्ञापक.

jQuery कार्यक्रम

उदाहरणामध्ये “हॅलो, वर्ल्ड! "पृष्ठ लोड झाल्यावर आणि दस्तऐवज तयार असताना कोड रन झाला, त्यामुळे त्याला कोणत्याही वापरकर्त्याच्या हस्तक्षेपाची आवश्यकता नाही. या प्रकरणात, आम्ही jQuery शिवाय थेट HTML मध्ये मजकूर लिहू शकतो. परंतु माऊस क्लिक केल्यानंतर पेजवर मजकूर दिसावा असे वाटत असल्यास आम्हाला jQuery वापरावे लागेल.

तुमच्या index.html फाईलवर परत जा आणि त्यात एक घटक जोडा. क्लिक इव्हेंटचा मागोवा घेण्यासाठी आम्ही हे बटण वापरू.

index.html

...मला क्लिक करा

आम्ही “हॅलो, वर्ल्ड! "

js/scripts.js

$(document).ready(function() ( $("#trigger").क्लिक(); ));

घटक आयडी ट्रिगर आहे, आम्ही तो $("#trigger") वापरून निवडतो. click() जोडून आम्ही क्लिक इव्हेंट ऐकतो. पुढे आपण एका फंक्शनला कॉल करतो ज्यामध्ये click() पद्धतीमध्ये आपला कोड असतो.

फंक्शन() ( $("#डेमो").html("हॅलो, वर्ल्ड!");)

येथे पूर्ण कोड jQuery HTML घटक.

js/scripts.js

$(document).ready(function() ( $("#trigger").क्लिक(function() ( $("#demo").html("हॅलो, वर्ल्ड!"); )); ));

scripts.js फाईल सेव्ह करा आणि index.html तुमच्या ब्राउझरमध्ये अपडेट करा. आता, जेव्हा तुम्ही बटणावर क्लिक कराल तेव्हा "हॅलो, वर्ल्ड!" असा मजकूर दिसेल. "

इव्हेंट म्हणजे माउस किंवा कीबोर्ड वापरून ब्राउझरशी कोणताही वापरकर्ता संवाद. आम्ही नुकतेच तयार केलेले उदाहरण क्लिक इव्हेंट वापरते. अधिकारी मध्ये jQuery दस्तऐवजीकरणतुम्ही jQuery इव्हेंट पद्धतींची संपूर्ण यादी शोधू शकता. खाली सामान्यतः वापरल्या जाणाऱ्या इव्हेंटची सूची आहे.

• click() - क्लिक: एकाच माऊस क्लिकने होते;
• hover() - hover: जेव्हा माउस पॉइंटर एखाद्या घटकावर फिरतो तेव्हा उद्भवते;
• सबमिट () - सबमिट करा: जेव्हा फॉर्म डेटा सबमिट केला जातो तेव्हा उद्भवते;
• scroll() - स्क्रोलिंग: पृष्ठ किंवा घटक स्क्रोल करताना उद्भवते;
• keydown() - की दाबा: जेव्हा तुम्ही कीबोर्डवरील की दाबता तेव्हा उद्भवते.

वापरकर्ता पृष्ठ स्क्रोल करत असताना घटक ॲनिमेट करण्यासाठी किंवा लपवण्यासाठी, scroll() पद्धत वापरा.

वापरून मेनूमधून बाहेर पडण्यासाठी ESC की, keydown() पद्धत वापरली जाते. ड्रॉपडाउन मेनू तयार करण्यासाठी किंवा JQuery वापरून div मध्ये HTML जोडण्यासाठी, click() पद्धत वापरली जाते.

jQuery प्रभाव

jQuery प्रभाव तुम्हाला ॲनिमेशन जोडू देतात आणि पेजवर घटक हाताळू शकतात.

IN खालील उदाहरणआम्ही एक पॉपअप तयार करू आणि विंडो लपवू. आम्ही दोन अभिज्ञापक वापरू शकतो, एक विंडो उघडण्यासाठी आणि एक ती बंद करण्यासाठी, परंतु आम्ही समान कार्य वापरून विंडो उघडण्यासाठी आणि बंद करण्यासाठी वर्ग वापरू.

विद्यमान टॅग काढा आणि

index.html फाईलमधून आणि खालील कोड जोडा:

index.html

चालू बंद

style.css फाईलमध्ये, आम्ही डिस्प्लेसह आच्छादन लपवण्यासाठी कमीतकमी CSS वापरू: काहीही नाही आणि स्क्रीनवर मध्यभागी ठेवू.

css/style.css

आच्छादन (प्रदर्शन: काहीही; स्थिती: निश्चित; शीर्ष: 50%; डावीकडे: 50%; रूपांतर: भाषांतर (-50%, -50%); उंची: 200px; रुंदी: 200px; पार्श्वभूमी: राखाडी;)

scripts.js फाईलमध्ये आम्ही toggle() पद्धत वापरतो जी मूल्ये टॉगल करेल CSS गुणधर्मनन टू ब्लॉक टू डिस्प्ले आणि त्याउलट, माऊस क्लिक केल्यावर विंडो लपवणे आणि दाखवणे.

js/scripts.js

$(document).ready(function() ( $(".trigger").क्लिक(function() ( $(".overlay").toggle(); )); ));

नंतर JQuery कनेक्शन HTML वर, index.html फाइल अपडेट करा. तुम्ही आता माऊस बटणावर क्लिक करून पॉपअप विंडोची दृश्यमानता टॉगल करू शकता. इतर अंगभूत jQuery प्रभाव सेट करण्यासाठी तुम्ही fadeToggle() किंवा slideToggle() सह टॉगल() पद्धत बदलू शकता.

खाली सामान्यतः वापरल्या जाणाऱ्या प्रभावांची यादी आहे:

• toggle() - टॉगल: घटक किंवा घटकांची दृश्यमानता टॉगल करते. show() आणि hide() - समान प्रकारचे प्रभाव सेट करा;
• fadeToggle() - फेड टॉगल: दृश्यमानता टॉगल करते आणि घटक किंवा घटकांचे अपारदर्शक ॲनिमेशन सेट करते. fadeIn() आणि fadeOut() हे एकतर्फी प्रभाव संबंधित आहेत;
• slideToggle() - स्लाइडशो प्रभावासह घटक किंवा घटकांची दृश्यमानता टॉगल करते. slideDown() आणि slideUp() - समान प्रकारचे प्रभाव सेट करा;
• animate() - घटकाच्या CSS मालमत्तेवर सानुकूल ॲनिमेशन प्रभाव पार पाडते.

आम्ही वापरतो jQuery कार्यक्रमकीबोर्डवरील कीस्ट्रोक सारख्या वापरकर्त्याच्या परस्परसंवादाचा मागोवा घेण्यासाठी आणि जेव्हा ते परस्परसंवाद घडतात तेव्हा घटकांवर पुढील प्रक्रिया करण्यासाठी आम्ही jQuery प्रभाव वापरतो.

निष्कर्ष

या मार्गदर्शकामध्ये तुम्ही कसे निवडायचे ते शिकलात jQuery घटक HTML आणि त्यांना हाताळा आणि वापरकर्त्यासाठी परस्परसंवादी वेब अनुभव तयार करण्यासाठी इव्हेंट आणि प्रभाव कसे कार्य करतात.

हे प्रकाशन मैत्रीपूर्ण प्रोजेक्ट टीमने तयार केलेल्या “An Introduction to jQuery” या लेखाचे भाषांतर आहे

चांगले वाईट

शेवटचे अपडेट: 11/1/2015

jQuery काय आहे

जावास्क्रिप्टच्या वापराशिवाय आधुनिक वेब प्रोग्रामिंग आणि वेबसाइट निर्मितीची कल्पनाही करता येणार नाही. तथापि, आजकाल, "नग्न" जावास्क्रिप्ट कोड वाढत्या प्रमाणात वापरला जात नाही तर जावास्क्रिप्ट फ्रेमवर्क आणि लायब्ररी. या ग्रंथालयांपैकी एक, आणि कदाचित आज सर्वात लोकप्रिय, jQuery आहे. काही अंदाजानुसार, इंटरनेटवरील सर्वात मोठ्या साइट्सपैकी किमान अर्ध्या साइट या लायब्ररीचा वापर करतात.

जरी आपण jQuery ला लायब्ररी म्हणू शकतो, तरीही त्यात मूळ लायब्ररीच्या आसपास तयार केलेली लायब्ररींची संपूर्ण इकोसिस्टम समाविष्ट आहे: jquery.ui, व्हिज्युअल इंटरफेस तयार करण्यासाठी डिझाइन केलेली लायब्ररी आणि jqyery.mobile, मोबाइल साइट विकसित करण्यासाठी वापरली जाते आणि इ.

jQuery वापरण्याचे फायदे काय आहेत?

कोडसह कार्य करण्याचे सरलीकरण. वेब पृष्ठावरील घटक हाताळण्यासाठी jQuery एक सोपी, मोहक वाक्यरचना देते.

विस्तारक्षमता. सर्व jQuery कोड पाहण्यासाठी आणि सुधारण्यासाठी खुले आहेत आणि जर लायब्ररीतील काही तुम्हाला अनुकूल नसेल तर ते सुधारित केले जाऊ शकते. तुम्ही jQuery प्लगइन देखील तयार करू शकता.

क्रॉस-ब्राउझर सुसंगतता. jQuery ला सर्वाधिक समर्थन आहे प्रसिद्ध ब्राउझरयासह. IE 7.8 प्रमाणे. (जरी IE 6-8 ब्राउझर हळूहळू इतिहास बनत आहेत आणि लायब्ररीचा आकार कमी करण्यासाठी, नवीनतम आवृत्तीमध्ये IE 6-8 चे समर्थन बंद केले गेले आहे).

jQuery लायब्ररी कनेक्ट करत आहे

या लायब्ररीसह काम सुरू करण्यासाठी, आम्हाला प्रथम ते डाउनलोड करावे लागेल. हे विकसकाच्या अधिकृत वेबसाइटवर आढळू शकते https://jquery.com/download/. आपण डाउनलोड पृष्ठावरच jQuery च्या अनेक आवृत्त्या शोधू शकता. हा धडा लिहिताना, नवीनतम आवृत्ती 2.0.3 उपलब्ध आहे. जरी आवृत्त्या एकमेकांपासून थोड्या वेगळ्या असल्या तरी, हे फरक सहसा इतके लक्षणीय नसतात आणि बेस रॉड आणि सर्वसामान्य तत्त्वेबहुतेक आवृत्त्या मूलत: समान आहेत.

लायब्ररी दोन आवृत्त्यांमध्ये सादर केली जाते - संकुचित किंवा मोनिफाइड (कमीतकमी) आणि अनकम्प्रेस्ड (नियमित). मिनिफाइड आवृत्त्या नियमित आवृत्त्यांप्रमाणेच कार्यक्षमता प्रदान करतात, परंतु त्यामध्ये फरक आहे की त्यामध्ये रिक्त स्थान, टिप्पण्या इत्यादीसारखे कोणतेही पर्यायी वर्ण नसतात आणि म्हणून त्यांच्या नावात किमान प्रत्यय असतो, उदाहरणार्थ, jquery-1.10.1.min.js. त्यांच्या लहान व्हॉल्यूममुळे ते अधिक उत्पादनक्षम असल्याने, वास्तविक उत्पादनात वापरण्यासाठी त्यांची शिफारस केली जाते. त्याच वेळी, जर तुम्हाला jQuery कोडचे तर्क समजून घ्यायचे असतील, तर या प्रकरणात तुम्ही संदर्भ घेऊ शकता नियमित आवृत्तीलायब्ररी

jquery लायब्ररी इतर जावास्क्रिप्ट फाइल्स प्रमाणेच समाविष्ट आहे. उदाहरणार्थ:

jQuery जग

IN या प्रकरणातमी jquery लायब्ररीची एक लहान आवृत्ती वापरली - jquery-1.10.1.min.js. आता jquery वापरून काही साधे वेब पेज बनवू.

jQuery चे जग jQuery jQuery JavaScript $(function())( $("#btn1").click(function())($(this).css("background-color", "red") च्या जगात आपले स्वागत आहे. अलर्ट ("jQuery world"));

हे वेब पृष्ठ, एकीकडे, jquery कोड वापरते, तर दुसरीकडे, मानक जावास्क्रिप्ट कोड वापरण्यातील फरक देखील दर्शवते.

आमच्याकडे पृष्ठावर दोन बटणे परिभाषित आहेत. एका बटणावर बटण मार्कअपमध्येच एक ऑनक्लिक हँडलर परिभाषित केला जातो: onclick="alert("JavaScript World"); " .

दुसरे बटण जवळजवळ समान गोष्ट करते, परंतु केवळ jquery सह. या बटणावर आयडी आहे (id="btn1"), ज्याद्वारे jquery कार्येआम्ही ते व्यवस्थापित करू.

पृष्ठाच्या अगदी तळाशी आम्ही jquery फंक्शन परिभाषित करू:

$(function())( $("#btn1").क्लिक(function())( $(this).css("पार्श्वभूमी-रंग", "लाल"); इशारा("jQuery वर्ल्ड"); )) ; ) );

अभिव्यक्ती $(कार्य()()); - तेच आहे लहान व्याख्या jquery कार्ये. हे कार्य सहसा दस्तऐवजाच्या शेवटी ठेवले जाते, जसे की या प्रकरणात, बंद होण्यापूर्वी शरीर टॅग. या फंक्शनमध्ये सर्व जावास्क्रिप्ट कोड समाविष्ट आहेत जे पृष्ठ लोड झाल्यावर कार्यान्वित केले जातील.

वापरलेल्या कोडचा अर्थ असा आहे की आपल्याला $("#btn1") या अभिव्यक्तीमध्ये बटण घटक मिळतो आणि नंतर त्यावर क्लिक हँडलर संलग्न करतो. खरं तर, अभिव्यक्ती $("#btn1").क्लिक वापरण्यासारखीच असेल ऑनक्लिक हँडलरबटण मार्कअपच्या मुख्य भागामध्ये. त्याच वेळी, आम्हाला बटणाचा मार्कअप कोणत्याही प्रकारे बदलण्याची किंवा तेथे काहीही जोडण्याची आवश्यकता नाही. सर्व काही jquery फंक्शनमध्ये केले जाते.

आमच्या बाबतीत त्यात काय समाविष्ट आहे? प्रथम, आम्ही बटणाचा रंग सेट करतो: $(this).css("background-color", "red"); . आणि मग आम्ही फक्त स्क्रीनवर संदेश प्रदर्शित करतो.

CDN वापरणे

मागील उदाहरणामध्ये, मी थेट स्थानिक डिस्कवरून jquery लायब्ररी समाविष्ट केली आहे, तथापि, आम्हाला लायब्ररी डाउनलोड करून त्यावर ठेवण्याची गरज नाही. स्थानिक डिस्कइतर फाइल्सच्या पुढे. त्याऐवजी, आम्ही CDN (सामग्री वितरण नेटवर्क) वापरू शकतो. या प्रकरणात, लायब्ररी स्वतःच काही CDN नेटवर्कमध्ये स्थित असेल आणि आम्ही त्याची लिंक देऊ शकतो.

उदाहरणार्थ, jQuery CDN मध्ये स्थित jquery लायब्ररी कनेक्ट करू:

jQuery जग

लायब्ररीच्या या विशिष्ट आवृत्तीला जोडणे आवश्यक नाही;

आम्ही इतर CDN देखील वापरू शकतो. उदाहरणार्थ:

Google CDN: प्रदान केले Google द्वारे. सर्व उपलब्ध आवृत्त्या https://developers.google.com/speed/libraries/devguide?hl=ru#jquery येथे आढळू शकते.

मायक्रोसॉफ्ट सीडीएन: प्रदान केले मायक्रोसॉफ्ट द्वारे. सर्व उपलब्ध आवृत्त्या https://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0 वर आढळू शकतात.

कनेक्शनचे स्वरूप खालीलप्रमाणे असेल:

Yandex CDN: प्रदान केले रशियन कंपनीयांडेक्स. सर्व उपलब्ध आवृत्त्या येथे आढळू शकतात

फ्रंट-एंड डेव्हलपरसाठी jQuery त्वरीत एक आवश्यक कौशल्य बनत आहे. या पुस्तकाचा उद्देश jQuery JavaScript लायब्ररीचे विहंगावलोकन प्रदान करणे आहे. एकदा तुम्ही वाचन पूर्ण केल्यावर, तुम्ही jQuery वापरून मूलभूत समस्या सोडवण्यास सक्षम असाल आणि शिकत राहण्यासाठी भक्कम पाया असावा. हे पुस्तक वापरलेले साहित्य म्हणून अभिप्रेत होते वर्ग, परंतु तुम्हाला ते स्वयं-अभ्यासासाठी देखील उपयुक्त वाटू शकते.

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

कोड प्राप्त करत आहे

आम्ही या पुस्तकात वापरणार कोड GitHub भांडारात स्थित आहे. तुम्ही .zip किंवा .tar फाइल डाउनलोड करू शकता, नंतर ती तुमच्या सर्व्हरवर वापरण्यासाठी काढू शकता. तुम्ही गिट मॅनिक असल्यास, तुम्ही नेहमी रेपॉजिटरी क्लोन किंवा फोर्क करू शकता.

कार्यक्रम

बहुतेक ट्यूटोरियल पूर्ण करण्यासाठी तुम्हाला खालील साधनांची आवश्यकता असेल:

• फायरफॉक्स ब्राउझर
• फायरफॉक्ससाठी फायरबग विस्तार
• साधा मजकूर संपादक
• Ajax साठी: स्थानिक सर्व्हर(जसे की MAMP किंवा WAMP) किंवा FTP क्लायंटकिंवा रिमोट सर्व्हरमध्ये प्रवेश करण्यासाठी SSH.

पृष्ठावर JavaScript जोडणे

JavaScript थेट दस्तऐवजात किंवा म्हणून जोडले जाऊ शकते बाह्य फाइलटॅगद्वारे. ऑर्डर करा JavaScript जोडत आहेमहत्वाचे आहे: अवलंबित्व त्यांच्याशी संबंधित असलेल्या स्क्रिप्टच्या आधी समाविष्ट करणे आवश्यक आहे.

कार्यप्रदर्शनाच्या फायद्यासाठी, JavaScript शक्य तितक्या आपल्या HTML च्या शेवटी जोडले जावे. काही JavaScript फाइल्सउत्पादन साइटवर एकत्र करणे आवश्यक आहे.

उदाहरण 1.1. एम्बेडेड JavaScript

console.log("हॅलो");

उदाहरण 1.2. बाह्य JavaScript

JavaScript डीबग करणे

JavaScript डेव्हलपमेंटमध्ये डीबगिंग टूल आवश्यक आहे. फायरफॉक्ससाठी लोकप्रिय डीबगर आहे फायरबग विस्तार; सफारी आणि क्रोम अंगभूत कन्सोल प्रदान करतात.

प्रत्येक कन्सोल ऑफर करतो:

• JavaScript सह प्रयोग करण्यासाठी सिंगल- आणि मल्टी-लाइन संपादक;
• व्युत्पन्न पृष्ठ स्त्रोत कोड पाहण्यासाठी निरीक्षक;
• नेटवर्क विनंत्या एक्सप्लोर करण्यासाठी नेटवर्क आणि संसाधने टॅब.

तुम्ही JavaScript कोड लिहिता तेव्हा, तुम्ही वापरू शकता खालील पद्धतीकन्सोलवर संदेश पाठवण्यासाठी:

• console.log() साठी सामान्य संदेश;
• ब्राउझर ऑब्जेक्ट्ससाठी console.dir();
• console.warn() चेतावणीसाठी;
• console.error() त्रुटींसाठी.

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

व्यायाम

या पुस्तकातील बहुतेक प्रकरणांमध्ये एक किंवा अधिक व्यायाम आहेत. काही व्यायामांसाठी तुम्ही थेट फायरबगमध्ये काम करू शकाल, इतरांसाठी तुम्हाला वैयक्तिक व्यायामांमध्ये नमूद केल्यानुसार jQuery स्क्रिप्ट समाविष्ट करणे आवश्यक आहे.

काही प्रकरणांमध्ये, व्यायाम पूर्ण करण्यासाठी तुम्हाला jQuery दस्तऐवजीकरणाचा सल्ला घ्यावा लागेल कारण पुस्तकात सर्व संबंधित माहिती सादर केलेली नाही. jQuery लायब्ररी मोठी आहे आणि कागदपत्रांमध्ये उत्तरे शोधणे आहे महत्वाचा भागशिकण्याची प्रक्रिया.

अशा समस्यांचे निराकरण करण्यासाठी येथे काही टिपा आहेत:

• प्रथम, तुम्हाला ज्या समस्येचे निराकरण करण्यास सांगितले जात आहे ते तुम्हाला पूर्णपणे समजले आहे याची खात्री करा.
• पुढे, समस्येचे निराकरण करण्यासाठी तुम्हाला कोणते घटक आवश्यक आहेत ते शोधा आणि ते घटक कसे मिळवाल ते ठरवा. घटक प्राप्त झाले आहेत हे सत्यापित करण्यासाठी फायरबग वापरा.
• शेवटी समस्येचे निराकरण करण्यासाठी आपल्याला या आयटमसह काय करण्याची आवश्यकता आहे ते शोधा. कोड लिहिण्यापूर्वी तुम्ही काय करणार आहात हे स्पष्ट करणाऱ्या टिप्पण्या जोडण्यासाठी हे उपयुक्त ठरू शकते.

चुका करण्यास घाबरू नका! प्रथमच कोड परिपूर्ण करण्याचा प्रयत्न करू नका! चुका करणे आणि उपायांसह प्रयोग करणे हा लायब्ररी शिकण्याचा भाग आहे आणि तुम्ही बनू शकाल सर्वोत्तम विकसक. या व्यायामांसाठीचे उदाहरण उपाय /solutions फोल्डरमध्ये आहेत.

संदर्भ साहित्य

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

तुम्ही jQuery शिकत असताना तपासण्यासाठी येथे काही उत्तम संसाधने आहेत. यातील सर्वात महत्त्वाची jQuery साइट आहे: त्यात लायब्ररीचे संपूर्ण दस्तऐवजीकरण कोड स्वरूपात असते. हा ब्लॅक बॉक्स नाही - जर तुम्ही लायब्ररीला वारंवार भेट देऊन वेळ घालवला तर तुमची लायब्ररीबद्दलची समज झपाट्याने वाढेल. आणि मी तुमच्या ब्राउझर बुकमार्कमध्ये साइट जोडण्याची आणि त्यात नियमितपणे प्रवेश करण्याची शिफारस करतो.

या लेखात मी jQuery ची मूलभूत माहिती देण्याचा प्रयत्न करेन. लेख, मला आशा आहे विस्तारेल

$() फंक्शन व्हॅल्यू

1. $() हे फंक्शन परत येईल विशेष वस्तूउत्तीर्ण सिलेक्टरने निवडलेल्या घटकांचा ॲरे असलेली Javascript. दुसऱ्या शब्दांत, ते "रॅपर" परत करेल.

1.1 आम्ही घटकांची निवड (उदाहरणार्थ, p) एका ब्लॉकवर मर्यादित करतो (उदाहरणार्थ, id kukarach सह).

$("p","div#kukaracha")

$("span,h1") बांधणीत गोंधळून जाऊ नये, ते स्पॅन आणि शीर्षक दोन्ही निवडेल.

2 यासह आपण एक घटक तयार केला आहे.

$("परम-ताराराम")

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

(फंक्शन($)( // तुमचे हेल्पर फंक्शन))(jQuery);

DOM झाडाची तयारी

$(function() ( DOM आधीच लोड केलेले आहे, तुम्ही कोड करू शकता));

$(दस्तऐवज).तयार(फंक्शन())( $("div.number_one").hide(); ));
jQuery(document).ready(function())($("div.number_two").hide(); ));

प्लगइन तयार करत आहे

$.fn.doit

आम्ही doit पद्धत वापरून $ wrapper वाढवतो. किंवा, दुसऱ्या शब्दांत, आम्ही $.fn ऑब्जेक्टचा विस्तार करतो. प्लगइन मध्ये कीवर्डहे jQuery ऑब्जेक्ट आहे जिथून प्लगइन कॉल केले होते. दुसऱ्या शब्दांत, संदर्भ (हा) गुंडाळलेल्या संचाला संदर्भित करतो, याचा अर्थ हे आधीच $(this) सारखे आहे.

कनेक्ट केलेली बाह्य jQuery लायब्ररी

डायरेक्ट चाइल्ड सिलेक्टर $("span > a")

फक्त थेट वंशज निवडतील (कुठेतरी नेस्ट केलेले वंशज निवडले जाणार नाहीत)

jQuery मध्ये स्पर्धा

जावास्क्रिप्टमध्ये, हे (फंक्शन संदर्भ) एक ऑब्जेक्ट आहे ज्याच्या गुणधर्मांमध्ये फंक्शन कॉल करण्यासाठी संदर्भ असतो. (हा ऑब्जेक्टच्या वर्तमान उदाहरणाचा संदर्भ आहे)

वर करंबा = tuk.doit();

संदर्भ (कन्स्ट्रक्टरमध्ये) हा तुक ऑब्जेक्टचा एक उदाहरण असेल. किंवा: याऐवजी, कॉल केलेल्या घटकाचे नाव बदला हे कार्य. एखाद्या विशेषतामध्ये (उदाहरणार्थ, ऑनक्लिक), हा HTML घटकाचा दुवा आहे जो फायर झाला आहे ऑनक्लिक इव्हेंट.

प्लगइनच्या आत या शब्दाचा दुवा आहे jQuery ऑब्जेक्ट(म्हणजे फंक्शन संदर्भ गुंडाळण्याची गरज नाही: $(हा) कारण हे $($("#el")) मध्ये रूपांतरित केले जाईल;). परंतु, जेव्हा प्लगइन कोडमध्ये कॉलबॅक फंक्शन वापरले जाते, तेव्हा हा मूळ DOM घटकाचा दुवा असतो (आणि त्याच्यासह कार्य करण्यासाठी आपल्याला हे करणे आवश्यक आहे: $(हे);).

बेसिक jQuery फिल्टर

$("td:eq(6)").css("बॉर्डर","2px सॉलिड #fff");

4.2 उदाहरणार्थ, तुम्हाला 7 व्या परिच्छेदाचे अनुसरण करणारे सर्व परिच्छेद शोधण्याची आवश्यकता आहे.

$("p:gt(6)").css("बॉर्डर","2px सॉलिड #fff");

$("p:lt(6)").css("बॉर्डर","2px सॉलिड #fff");

$("p:not(:eq(6))").css("बॉर्डर","2px सॉलिड #fff");

$("p:animated").css("बॉर्डर","2px सॉलिड #fff");

बाह्य शैली पत्रक आणि jquery कोड

एक बाह्य शैली पत्रक आधी समाविष्ट केले पाहिजे javascript कोड- अनेक जावास्क्रिप्ट प्रोग्राम कडून घटक माहिती मिळवून कार्य करतात बाह्य सारण्याशैली हे विशेषतः लागू होते jQuery प्लगइन. म्हणून, मी या सोप्या नियमाचे पालन करण्याची जोरदार शिफारस करतो.

लेख लिहिण्याच्या प्रक्रियेत आहे.

लायब्ररी कशी उपयोगी पडू शकते?

वेबसाइट तयार करताना, तीन भाषा वापरल्या जातात - HTML, CSS, Javascript. पहिला पृष्ठ लेआउटसाठी वापरला जातो, दुसरा शैलीसाठी आवश्यक आहे आणि तिसरा स्त्रोतामध्ये परस्परसंवाद जोडतो. पृष्ठे स्क्रोल करताना किंवा बटणावर क्लिक करताना, ॲनिमेशन किंवा Javascript वापरून निर्दिष्ट केलेल्या इतर क्रिया प्ले केल्या जाऊ शकतात.

Jquery म्हणजे काय? हे JS साठी तृतीय-पक्ष लायब्ररी आहे जे आवश्यक कोडचे प्रमाण कमी करण्यास मदत करते आणि त्याच वेळी भाषेची कार्यक्षमता वाढवते. लायब्ररी क्रॉस-ब्राउझर आहे, त्यामुळे कोड कोणत्याही आधुनिक ब्राउझरमध्ये योग्यरित्या प्रदर्शित केला जाईल.

Jquery आवश्यक कोडचे प्रमाण किती कमी करते हे पाहण्यासाठी, हे साधे उदाहरण पहा:

#Javascript document.getElementById("someBlock").innerHTML = "हॅलो, वर्ल्ड!"; #Jquery $("#someBlock").html("हॅलो, वर्ल्ड!");

फरक लक्षणीय आहे. या लेखात आम्ही तुम्हाला प्रोजेक्टमध्ये Jquery कसे इंस्टॉल करायचे ते सांगू आणि लायब्ररी वापरण्याची उदाहरणे देखील दर्शवू. याव्यतिरिक्त, आपण निवडक, कार्यक्रम, प्रभाव याबद्दल जाणून घ्याल. API, DOM, CDN सोबत कसे काम करायचे ते आम्ही तुम्हाला शिकवू.

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

JQuery कसे स्थापित आणि कॉन्फिगर करावे?

त्याच्या तत्त्वानुसार, लायब्ररी एक JS फाइल आहे. आपल्या HTML पृष्ठावरील टॅग वापरून ते कनेक्ट करणे आवश्यक आहे. हे दोन प्रकारे केले जाऊ शकते:

• अधिकृत वेबसाइटवरून स्क्रिप्ट डाउनलोड करा आणि प्रोजेक्ट फोल्डरमध्ये जोडा;
• CDN वरून फाईलची लिंक वापरा. हे स्क्रिप्ट कनेक्शन स्थानिक कनेक्शनपेक्षा जलद कार्य करेल.

प्रथम, आपल्याला प्रकल्पासाठी एक फोल्डर तयार करण्याची आवश्यकता आहे. आत आम्ही HTML मार्कअप फाइल index.html ठेवतो. यासाठी आम्हाला सीएसएस डिरेक्टरी देखील आवश्यक असेल शैली फाइल style.css, तसेच js - script.js साठी. प्रोजेक्ट फोल्डरची रचना अशी असेल:

HTML पृष्ठ चिन्हांकित करणे आवश्यक आहे. वेबसाइटसाठी सर्वात सोपी फ्रेमवर्क असे दिसते:

JQuery डेमो

क्लोजिंग टॅग करण्यापूर्वी, तुम्ही CDN ला लिंक असलेला टॅग, तसेच तुमच्या JS फाइलसह दुसरा टॅग घालावा. तुमची फाईल आता यासारखी दिसेल:

JQuery डेमो

कृपया लक्षात घ्या की वापरकर्ता स्क्रिप्ट लायब्ररीनंतर समाविष्ट केली आहे, अन्यथा ते कार्य करणार नाही. तुम्ही डाउनलोड केलेली Jquery स्क्रिप्ट वापरत असल्यास, jquery.min.js फाइल js फोल्डरमध्ये ठेवा. यानंतर तुम्हाला लायब्ररी API मध्ये पूर्ण प्रवेश मिळेल.

Jquery कसे वापरावे?

लायब्ररी HTML पृष्ठ टॅगसह संवाद साधण्यासाठी DOM दस्तऐवज ऑब्जेक्ट मॉडेल वापरते. ब्राउझरमध्ये डीबगर वापरून DOM रचना पाहिली जाऊ शकते. ते F12 की वापरून उघडता येते. तुम्हाला HTML मार्कअपचे एक झाड दिसेल - हे DOM आहे. प्रत्येक टॅग एक ऑब्जेक्ट आहे ज्याशी JS संवाद साधू शकते. सर्व वस्तू झाडाच्या रचनेत मांडलेल्या आहेत. प्रत्येक नेस्टेड घटक किंवा मूल ही रूट टॅगची शाखा आहे. वापरून जावास्क्रिप्ट भाषातुम्ही मार्कअपमध्ये बदल करू शकता.

पृष्ठ कोड उजवे-क्लिक करून देखील पाहिले जाऊ शकते. पृष्ठ कोड पहा निवडा. कोड डीबगरने दाखवलेल्या सारखाच दिसेल, पण तसे नाही. व्ह्यू पेज कोडद्वारे, तुम्हाला एचटीएमएल फाइलमध्ये मार्कअप लिहिलेला दिसतो आणि डीबगर ते डीओएम स्ट्रक्चर म्हणून दाखवतो. हे डायनॅमिक आहे कारण जेएस ते बदलू शकते. परंतु स्क्रिप्ट मार्कअपमध्ये बदल करू शकत नाही.

टॅग हा DOM संरचनेतील बाह्य नोड आहे, म्हणून तो एक दस्तऐवज ऑब्जेक्ट आहे. कडून पृष्ठ सामग्री व्यवस्थापित करण्यासाठी Jquery वापरून, आपण संपर्क करणे आवश्यक आहे ही वस्तू. scripts.js फाईलमध्ये खालील कोड लिहा:

$(दस्तऐवज).तयार(फंक्शन() ( //फंक्शन बॉडी ));

तुम्ही फंक्शन बॉडीमध्ये लायब्ररी कोड लिहू शकता. Jquery ते तपासेल, कारण DOM स्क्रिप्ट लोड करू शकत असेल तरच ते कार्यान्वित केले जाईल. काहीवेळा मार्कअप आणि शैली लोड होईपर्यंत ते कार्यान्वित होऊ शकत नाहीत.

Hello, World हे सुप्रसिद्ध वाक्यांश आउटपुट करण्याचे उदाहरण वापरून Jquery वापरण्याचा सराव करूया! हे काही टॅगमध्ये प्रदर्शित करणे आवश्यक आहे, जे आम्ही index.html फाईलमध्ये तयार करू:

... ...

Jquery ला कॉल करणे $ चिन्ह वापरून केले जाते. लायब्ररीची क्रिया सहसा एका पद्धतीद्वारे परिभाषित केली जाते. Jquery CSS सिंटॅक्सद्वारे DOM दस्तऐवज ऑब्जेक्ट मॉडेलमध्ये प्रवेश करते. लायब्ररी कॉल यासारखे दिसेल:

$("निवडक").पद्धत();

आमच्या बाबतीत, डेमो आयडेंटिफायर निवडकर्ता म्हणून काम करेल. तुम्ही #demo द्वारे त्याच्याशी संपर्क साधू शकता. पेज लेआउटमध्ये बदल करण्यासाठी आम्ही .html() पद्धत वापरू: उदाहरणार्थ, इच्छित मजकूर घाला. स्क्रिप्टमध्ये लिहा:

$(document).ready(function() ( $("#demo").html("हॅलो, वर्ल्ड!"); ));

Ctrl+S दाबून फाइलमधील बदल सेव्ह करा आणि तुमच्या ब्राउझरमध्ये index.html फाइल उघडा. हॅलो, वर्ल्ड स्क्रीनवर दिसेल.

तुम्ही Ctrl+Shift+I दाबून DOM मधील बदल पाहू शकता. तुमच्या टॅगमध्ये काय आहे ते तुम्हाला दिसेल

वाक्य लिहिले होते:

नमस्कार, जग!

परंतु जर तुम्ही Ctrl+U वापरून ब्राउझरमध्ये सोर्स कोड उघडला, तर आमचा वाक्यांश मार्कअपमध्ये नसेल. तुम्हाला फॉरमॅटिंगशिवाय HTML कोड दिसेल:

मी कोणते निवडक वापरू शकतो?

ते Jquery लायब्ररीला पृष्ठावरील कोणत्या घटकांसह कार्य करायचे हे सांगण्यासाठी वापरले जातात. त्यांच्यापैकी भरपूरनिवडक काही फरकांसह CSS प्रमाणेच असतात. निवडकर्त्याला कॉल आहे:

$("निवडक")

आपण वापरू शकता दुहेरी अवतरण, लायब्ररी तपशीलांचे अनुसरण करा किंवा एकल स्थापित करा. सर्वात सामान्यतः वापरलेले निवडक आहेत:

• $(हा) किंवा वर्तमान म्हणजे वर्तमान घटकाची निवड;
• $("*") किंवा वाइल्डकार्डचा वापर पृष्ठावरील सर्व घटक निवडण्यासाठी केला जातो;
• $("#id") - युनिक आयडेंटिफायरमध्ये प्रवेश;
• $(“.वर्ग”) - अशा प्रकारे तुम्ही एकाच वर्गासह अनेक ब्लॉक्स निवडू शकता;
• $("div") चा संदर्भ देण्यासाठी वापरला जातो;
• $("li:first-child") पहिल्या घटकात प्रवेश करेल
• यादीत
  ;
  • $("") एक विशेषता प्रवेश आहे.
  Jquery मधील कार्यक्रम सादर करत आहे

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

  टॅग वापरून index.html मार्कअप फाइलमध्ये एक बटण जोडणे ही पहिली पायरी आहे.

  ...मला क्लिक करा...

  आपण ब्राउझरमध्ये पृष्ठ उघडल्यास आपल्याला हे मिळेल:

  

  क्लिक क्रिया सेट करण्यासाठी, त्याच नावाची क्लिक () पद्धत वापरली जाईल. त्याच्या मदतीने, आपण हॅलो, वर्ल्ड! शिलालेख प्रदर्शित करण्यासाठी फंक्शनला कॉल करू शकता!

  $(दस्तऐवज).तयार(फंक्शन())( $("#बटण").क्लिक(); ));

  आम्ही बटणाला आयडेंटिफायर बटण नियुक्त केले आहे, जे $("#button") निवडक वापरून ऍक्सेस केले जाऊ शकते. क्लिक() पद्धत केलेल्या क्लिकचा मागोवा घेण्यास सक्षम आहे. त्याच्या आत तुम्हाला शिलालेख प्रदर्शित करण्यासाठी फंक्शन तयार करणे आवश्यक आहे:

  फंक्शन())( $("#डेमो").html("हॅलो, वर्ल्ड!");)

  आम्हाला हा कोड स्क्रिप्ट फाइलमध्ये मिळेल:

  $(document).ready(function() ( $("#button").क्लिक(function() ( $("#demo").html("हॅलो, वर्ल्ड!"); )); ));

  
  

  इव्हेंट म्हणजे कीबोर्ड किंवा माऊस इनपुटद्वारे ब्राउझरशी कोणताही वापरकर्ता संवाद.

  कोणते कार्यक्रम बहुतेक वेळा वापरले जातात? हे:

  • कर्सर कोणत्याही घटकावर फिरतो तेव्हा hover() चा वापर क्रिया करण्यासाठी केला जातो. तुम्ही माउससाठी विशेष पद्धती देखील वापरू शकता - mousenter() आणि mouseleave(). पहिला कर्सर फिरवण्यास जबाबदार आहे, आणि दुसरा सोडण्यासाठी;
  • click() पृष्ठावरील क्लिक ट्रॅक करते. ड्रॉप-डाउन मेनू तयार करण्यासाठी इव्हेंट उपयुक्त असू शकतो;
  • स्क्रीन स्क्रोल करत असताना scroll() कार्यान्वित होते. इव्हेंट्सचा वापर केला जाऊ शकतो, उदाहरणार्थ, जेव्हा पृष्ठ स्क्रोल केले जाते तेव्हा प्रतिमा दर्शविण्यासाठी;
  • सबमिट() फॉर्म भरताना क्रिया करण्यासाठी आवश्यक आहे;
  • keydown() कीस्ट्रोक ट्रॅक करते. अशा प्रकारे तुम्ही Esc बटण दाबून डायलॉग बॉक्स बंद करू शकता.

  या इव्हेंट्सचा वापर करून, तुम्ही तुमच्या संसाधनासाठी खरोखर परस्परसंवादी सामग्री तयार करू शकता.

  आपण कोणते प्रभाव वापरू शकता?

  ते सहसा पृष्ठावर ॲनिमेशन तयार करण्यासाठी वापरले जातात. इफेक्ट्स घटनांच्या संयोगाने कार्य करू शकतात. आम्ही एक फ्लोटिंग घटक तयार करू जो उघडता आणि बंद केला जाऊ शकतो. या प्रकरणात, आम्हाला दोन वर्गांची आवश्यकता असेल - उघडणे आणि बंद करणे. मागील बटण आणि परिच्छेद टॅग index.html वरून काढले जाऊ शकतात. त्याऐवजी, हा कोड लिहा:

  ...चालू बंद...

  आता पूर्वी तयार केलेली स्टाईल फाईल style.css आमच्यासाठी उपयुक्त ठरेल. लपविलेल्या वर्गासह घटक लपवण्यासाठी, त्याची डिस्प्ले गुणधर्म शून्यावर सेट करा. स्पष्टतेसाठी आम्ही आमचा टॅग स्क्रीनच्या मध्यभागी ठेवू. style.css फाइलमध्ये लिहा:

  लपलेले (प्रदर्शन: काहीही; स्थिती: निश्चित; शीर्ष: 50%; डावीकडे: 50%; रूपांतर: भाषांतर (-50%, -50%); उंची: 200px; रुंदी: 200px; पार्श्वभूमी: #b1b1b1; )

  घटकाची दृश्यमानता none वरून ब्लॉक करण्यासाठी स्विच करण्यासाठी, आम्हाला toggle() पद्धतीची आवश्यकता आहे. आम्ही ते आमच्या scripts.js फाईलमध्ये लिहू:

  $(दस्तऐवज).रेडी(फंक्शन() ( $(.बटण").क्लिक(फंक्शन() ( $(".लपलेले ").टॉगल(); )); ));

  तुमची index.html फाइल अपडेट करायला विसरू नका. बटण क्लिक करण्यापूर्वी आम्हाला हे मिळते:

  
  

  आणि क्लिक केल्यानंतर:

  
  

  तुम्हाला toggle() पद्धत वापरण्याची गरज नाही; तुम्ही त्याऐवजी slideToggle() किंवा fadeToggle() वापरू शकता. त्यांच्या मदतीने आपण मनोरंजक प्रभाव तयार करू शकता.

  कोणते सर्वात लोकप्रिय आहेत? हे:

  • toggle() घटकांची दृश्यमानता नियंत्रित करते. पद्धत लपवू शकते () किंवा दर्शवू शकते () घटक;
  • slideToggle() स्लाइडिंग इफेक्टसह दृश्यमानता बदलते. slideUp() आणि slideDown() पद्धती त्याच्यासोबत कार्य करतात;
  • fadeToggle() पारदर्शकतेद्वारे दृश्यमानता नियंत्रित करते. ही पद्धत fadeIn() तसेच fadeOut();
  • animate() सानुकूल ॲनिमेशन प्रभाव पुनरुत्पादित करते.

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