Introduction of Jquery
Web Development में jQuery एक Powerful और Lightweight JavaScript Library के रूप में Use की जाती है, जो HTML Document को Handle करने, Animation बनाने, Event Handling और Asynchronous Request करने की Process को Simple बनाती है।
jQuery एक Fast, Small और Feature-Rich, JavaScript Library है। यह DOM Manipulation, Event Handling और Animation जैसे Complex Task को Simple बनाता है, जिससे Web Development अधिक Efficient और Less Error-Prone हो जाता है।
Why we use jQuery
- Cross-browser Compatibility: jQuery, Cross Browser Compatibility Ensure करते हुए Browser के बीच Abstracts को दूर करता है।
- Simplified Syntax: jQuery सामान्य Task के लिए Detailed Syntax Provide करता है, जिससे आवश्यक Code की मात्रा कम हो जाती है।
- AJAX Support: jQuery, User Experience को बढ़ाते हुए Asynchronous Request करने की Process को Simple बनाता है।
Adding jQuery to Your Web Page
-
Downloading jQuery
Official jQuery Website पर जाएँ और jQuery का Latest Version Download करें। आप अपनी Development आवश्यकताओं के आधार पर Compressed और Uncompressed Version के बीच चयन कर सकते हैं।
-
Hosting jQuery
आप Direct Content Delivery Network (CDN) से jQuery Include कर सकते हैं। Example के लिए आप Google CDN से jQuery को Include करने के लिए अपने HTML में निम्नलिखित Script Tag जोड़ सकते हैं-
Example:
-
Local Integration
यदि आपने jQuery को Locally रूप से Download किया है, तो इसे निम्नलिखित Script Tag का use करके अपनी HTML File में Include कर सकते है| सुनिश्चित करें कि Path आपकी jQuery File के सही Location को Indicate करता है।
Example:
- jQuery in Action
एक बार jQuery Integrated हो जाने पर आप इसके Features का Advantage उठाना शुरू कर सकते हैं।
Example: To Fade the HTML Element
jQuery Selectors
jQuery Selectors ऐसे Pattern हैं, जिनका उपयोग HTML Element को Select और उनमें Manipulation करने के लिए किया जाता है। ये CSS Selector के समान Principles को Follow करते हैं, जिससे CSS से Familiar Developer के लिए jQuery में Transition करना आसान हो जाता है।
Basic Syntax
jQuery Selector CSS Selector के Familiar Syntax को Follow करते हैं, जिससे Web Styling से Familiar Developers के लिए उन्हें समझना आसान हो जाता है।
Example:
यहां, Selector Target किए जाने वाले HTML Element को Specify करता है, और action() Execute किए जाने वाले Operation को दर्शाता है।
Types of Selectors
-
Element Selector
HTML Element को उनके Tag Name के Base पर Target कर सकते है।
Example:
-
ID Selector
ID Selector एक Specific ID वाले Element को Select करता है।
Example:
-
Class Selector
Class Selector एक Specific Class वाले Element को Target करता है।
Example:
-
Attribute Selector
Attribute Selector, Element को Select उनकी Attribute के Base पर करता है।
Example:
Advanced Selectors
-
Descendant Selector
Descendant Selector उन सभी Element को Select करता है, जो किसी दिए गए Element के Descendants हैं।
Example:
-
Child Selector
Child Selector किसी दिए गए Element के सभी Direct Children को Select करता है।
Example:
-
:first and :last Selectors
यह Selector, Selection में क्रमशः First और Last Element को Target करता है।
Example:
Filtering and Traversing:
Filtering
-
:even and :odd Selectors:
यह Filtering Selector किसी Collection में Even या Odd Element को Select करता है।
Example:
Traversing
-
.find() Method:
यह Traversing Selector किसी Selected Element के भीतर Descendant Element Find करता है।
Example: