What is jQuery
- jQuery is a JavaScript Library
- jQuery means "write less do more".
Benefits of using jQuery
- Lightweight
- Ease of use
- Big and Focused Library
- Extensibility
- Browser Compatibility
- Ajax Support
How to use jQuery in web application
The jQuery library is a JS file that a web devloper use for programming in jQuery for developing a web applicatin
There are two ways to use the file
- Download the library file from jQuey.com and refer it in HTML code.Save the downloaded file in the directory of webpages.
- Include the library into the code by referring to a CDN
Code Example
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
Understanding the jQuery Syntax
$(selector).action()
where$: Is the sign that indicate the use of jQuery and is the jQuery identifier.
Selector: Is used to find and select the HTML element or elements.
action(): Is an action that jQuery can performon the selected element or elements.
Following are the samples that indicate how to syntaxis used
- $(this).hide() - hides the current element.
- $("p").hide() - hides all <p> elements.
- $(".test").hide() - hides all elements with class="test".
- $("#test").hide() - hides the element with id="test".
The Document Ready Event
$(document).ready(function(){
// jQuery methods go here...
});
where
- $: Is the jQuery identifier
- document: Refers to the DOM of the HTML page.
- ready: Is the event that is raised when the fully loaded DOM is ready for manipulation through javascript.
- function:Refers to an anonymous function,as it has no name and it contains an action to be taken.
<head>
<title> jQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</script>
</body>
</html>