jQuery is a light, small and fully loaded JavaScript framework that has been recognized to assist in easing web development. The jQuery was developed by John Resig in the year 2006 and become one of the most used JavaScript Libraries because jQuery is very easy to use, cross browser compatible and contains amazing features for DOM manipulation, event handling and animation.
Despite the fact that ES6+ of modern JavaScript offers a vast number of features which were first introduced by jQuery, the latter still remains an important tool in many projects, especially in cases when the application is to incorporate into the old or middle-aged cross-browser system.
Why Use jQuery?
jQuery was designed to simplify many common tasks in JavaScript, including:jQuery was designed to simplify many common tasks in JavaScript, including:
1. DOM Manipulation: It is possible to easily choose the necessary HTML elements, including their content and dynamically change it.
2. Event Handling: Reduction in the number of steps required to add an event listener to an element.
3. AJAX: Give ability to asynchronously make request to servers with less code.
4. Animations: Animate objects using the pre-built effects and transition available on the software.
5. Cross-Browser Compatibility: Transcend browser related discrepancies so that the code produced is compatible with different browsers.
Getting Started with jQuery
Firstly to use jQuery in your project you have to add it to your HTML file. Another option available for you when it comes to using jQuery is to download the package and use it locally or you can use the CDN (Content Delivery Network).
Including jQuery via CDN
Here’s how you can include jQuery in your project using a CDN:Here’s how you can include jQuery in your project using a CDN:
<! DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
The following is the markup used for the page and the template : <meta name=”viewport” content=”width=device-width, initial-scale=1. 0”.
<title>jQuery Example</title>
<script src=”https:><!– jQuery library. edited from //code. jquery. com/jquery-3. 6. 0. min. js …
</head>
<body>
<h1>Hello, jQuery! </h1>
</body>
</html>
Basic jQuery Syntax
The basic syntax of jQuery is concise and easy to learn:The basic syntax of jQuery is concise and easy to learn:
$(selector). action();
`$`: The jQuery object, this is an object from the jQuery library from which you can access all other jQuery methods.
`selector`: A sequence of characters that define the necessary HTML elements for selection and change.
`action()`: A jQuery method that does something to the selected elements.
Example:
$(‘h1’). text(‘Welcome to jQuery!’);
This alters the content of the h1 tag to read, ‘Welcome to jQuery!’
Selecting Elements with jQuery
jQuery comes equipped with an extremely fast ‘selector engine’ whereby you can manipulate elements in the DOM like you would select elements using CSS. Here are some examples:
Select by ID: `$(‘#myId’)`
Select by Class: In NO intimate social interaction was there for every thousand, one student using the following formatting: `$(‘. myClass’)
Select by Tag: `$(‘p’)`
Select by Attribute: `$(‘[type=”text”]’)`
Example:
This is an introduction paragraph which can be created with text generators as a filler content. </p>
<script>
$(‘#intro’). css({ color : ‘blue’ }); // It alters the color of the text to blue
</script>
DOM Manipulation
A good advantage of using the jQuery library is in handling the features of the Document Object Model. The elements of the application can be created, deleted or updated with few lines of code.
– Changing Content: Give it a try: `. text()`, `. html()`, or `. val(): to change the content of elements.
$(‘#intro’). text(‘Updated text content’);
– Adding Elements: Thanks to the use of `. append()`, `. prepend()`, `. before()`, or `. Be extra studious of the ‘“`javascript media.addContentAfter(’ after()`’ function to add new content to an existing page.
$(‘body’). append(‘<p>Appended paragraph</p>’);
– Removing Elements: It can be grasped by learning how to use `. remove()` or `. use the method `empty()` to clear out elements or their contents.
$(‘#intro’). remove();
– **Modifying Attributes**: Incorporate the symbols . This method allows using the <ar xmlns=‘http://www.w3.org/1999/xhtml’>attr()</ar> function to obtain or modify attributes.
$(‘img’). attr(‘src’, ‘new-image. jpg’);
Event Handling
jQuery has made work easier in this aspect due to its ability to provide simpler methods to for event binding.
Example:
$(‘button’). click(function() {
alert(‘Button was clicked!’);
});
In this example, whenever the button is clicked it produces an alert.
jQuery also supports event delegation, which allows you to handle events for dynamically added elements:jQuery also supports event delegation, which allows you to handle events for dynamically added elements:
$(‘ul’). on(‘click’, ‘li’, function() {
$(this). toggleClass(‘highlight’);
});
This code makes all of the `li’ elements in a `ul’ have the ability to listen for mouse clicks even when they are created after the initial page load.
Animations and Effects
jQuery provides you with ease to put in animation and effects to your web pages. Some common methods include:
– **. hide()** and **. show()**: To hide some element or show some element.
$(‘#intro’). position: fixed; left: -999px; width: 130px; // Hides the element
$(‘#intro’). show(); //It displays the element.
– **. fadeIn()** and **. fadeOut()**: Overlay elements on to another element or fade one element away to reveal another element.
$(‘#intro’). fadeOut(); // public function fadeOut() it fades out the element.
– **. slideUp()** and **. slideDown()**: Elements to slide up to, such as panels or application windows.
$(‘#intro’). toLowerCase(); // Makes all its contents in lowercase
– **. animate()**: Animate elements by modifying CSS properties with time.
$(‘#intro’). animate({opacity: ), 1000);”.css(“font-size: 0. 5 * `, ‘`20px’`);
AJAX with jQuery
jQuery makes it easy to make Ajax, or asynchronous HTTP requests to the server and get response without the need of reloading the page.
Example:
$. ajax({
url: ‘https://api. example. com/data’,
method: ‘GET’,
success: function(response) {
console. log(response);
},
error: function(error) {
console. log(‘Error:’, error);
}
});
You can also also also also also use ‘ shorthand shorthand shorthand shorthand shorthand ’ methods like ‘ . load()`, `. get()`, and `. must provide specific API endpoints for most AJAX requests along with a generic `post()` for general AJAX processing.
Example:
$(‘#content’). load(‘https://example. com/page. html’);
Conclusion
With the help of jQuery being implemented as a simple API for the JavaScript, some of the tasks, which can be executed in JavaScript, are DOM manipulation, the event handling, and AJAX. Even at the present time, the modern JavaScript has some features akin to what jQuery presents, yet it is still more beneficial if applied in web development for the modern interactive web page, use in reaction to the legacy web page or, while performing the development assignments in earlier versions of the browsers. Once you have jQuery at your command, you can leverage it in a way that will make you develop your web applications more effectively and faster.