web

Concept of JQuery, Adding JQuery to Web Page, JQuery Selectors

by
with no comment
Contents hide
1 Introduction of Jquery
1.1 Why we use jQuery
2 Adding jQuery to Your Web Page
2.1 Downloading jQuery
2.2 Hosting jQuery
2.3 Local Integration
3 jQuery Selectors
3.1 Element Selector
3.2 ID Selector
3.3 Class Selector
3.4 Attribute Selector
3.5 Descendant Selector
3.6 Child Selector
3.7 :first and :last Selectors
3.8 Filtering and Traversing:
3.8.1 :even and :odd Selectors:
3.8.2 .find() Method:

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:



<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js”></script>

  • Local Integration

यदि आपने jQuery को Locally रूप से Download किया है, तो इसे निम्नलिखित Script Tag का use करके अपनी HTML File में Include कर सकते है| सुनिश्चित करें कि Path आपकी jQuery File के सही Location को Indicate करता है।

Example:



<script src=”path/to/jquery.min.js”></script>
  • jQuery in Action

एक बार jQuery Integrated हो जाने पर आप इसके Features का Advantage उठाना शुरू कर सकते हैं।

Example: To Fade the HTML Element



<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>jQuery Example</title>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js”></script>

<script>

// jQuery code

$(document).ready(function(){

// Fade out the element with ID “myElement” over 2 seconds

$(“#myElement”).fadeOut(2000);

});

</script>

</head>

<body>


<div id=”myElement”>

<p>This is a sample element.</p>

</div>


</body>

</html>

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).action();

यहां, Selector Target किए जाने वाले HTML Element को Specify करता है, और action() Execute किए जाने वाले Operation को दर्शाता है।

Types of Selectors

  • Element Selector

HTML Element को उनके Tag Name के Base पर Target कर सकते है।

Example:



$(“p”).hide(); // Hides all <p> elements

  • ID Selector

ID Selector एक Specific ID वाले Element को Select करता है।

Example:



$(“#myElement”).fadeIn(); // Fades in the element with ID “myElement”

  • Class Selector

Class Selector एक Specific Class वाले Element को Target करता है।

Example:



$(“.myElement”).fadeIn();

  • Attribute Selector

Attribute Selector, Element को Select उनकी Attribute के Base पर करता है।

Example:



$(“myElement.attribute”).fadeIn();

Advanced Selectors

  • Descendant Selector

Descendant Selector उन सभी Element को Select करता है, जो किसी दिए गए Element के Descendants हैं।

Example:



$(“div p”).css(“color”, “red”); // Sets the text color of all <p> elements inside <div> elements

  • Child Selector

Child Selector किसी दिए गए Element के सभी Direct Children को Select करता है।

Example:



$(“ul > li”).addClass(“highlight”); // Adds a class to all <li> elements that are direct children of <ul>

  • :first and :last Selectors

यह Selector, Selection में क्रमशः First और Last Element को Target करता है।

Example:



$(“tr:first”).css(“background-color”, “yellow”); // Sets the background color of the first <tr> element

Filtering and Traversing:

Filtering

  • :even and :odd Selectors:

यह Filtering Selector किसी Collection में Even या Odd Element को Select करता है।

Example:



$(“li:even”).addClass(“even”); // Adds a class to all even <li> elements

Traversing

  • .find() Method:

यह Traversing Selector किसी Selected Element के भीतर Descendant Element Find करता है।

Example:



$(“div”).find(“p”).css(“font-weight”, “bold”); // Sets the font weight of all <p> elements inside <div>
Post Views: 232
Tags: No tags

Add a Comment

Your email address will not be published. Required fields are marked *