What is jQuery?
jQuery is a lightweight, "write less, do more", JavaScript library. It greatly simplifies JavaScript programming.
jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto - "Write less, do more". jQuery simplifies HTML document traversing, event handling, animating & Ajax interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code & it is easy to learn.
There are lots of other JavaScript libraries out there, but jQuery is probably the most popular, and also the most extendable.
Here is the list of important core features supported by jQuery.
1. DOM manipulation − The jQuery made it easy to select DOM elements, negotiate them and modifying their content by using cross-browser open source selector engine called Sizzle.
2. Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
3. Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.
4. AJAX Support − The jQuery helps you a lot to develop a responsive and featurerich site using AJAX technology.
5. Lightweight − The jQuery is very lightweight library - about 19KB in size (Minified and gzipped).
6. Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
7. Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.
Before you start studying jQuery, you should have a basic knowledge of:
HTML
CSS
JavaScript
How to use jQuery?
There are two ways to use jQuery.
1. Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (the <script> tag should be inside the <head> section):
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>
Note: Place the downloaded file in the same directory as the pages where you wish to use it.
2. CDN Link − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).
If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).
Google is an example of someone who host jQuery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
One big advantage of using the hosted jQuery from Google:
Many users already have downloaded jQuery from Google when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
The jQuery syntax is made for selecting HTML elements and performing some action on the HTML element(s). Basic syntax is:
$(selector).action()
- $ sign to define/access jQuery
- (selector) to "query OR find" the HTML element(s)
- jQuery action() to be performed on the element(s)
Examples:
$("p").hide() - hides all <p> elements.
$(this).hide() - hides the current element.
$(".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...
});
NOTE: It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.
Here are some examples of actions that can fail if methods are run before the document is fully loaded:
1. Trying to hide an element that is not created yet.
2. Trying to get the size of an image that is not loaded yet.
jQuery Selectors:
jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" or "select" HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. All selectors in jQuery start with the dollar sign and parentheses: $().
1. The element Selector:
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this: $("p")
2. The #id Selector:
The jQuery '#id' selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML element: $("#test")
3. The .class Selector:
The jQuery '.class' selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the class: $(".test")
Conclusion:
So, its really well said that this library is a "write less, do more" JavaScript library.
Its really important for a JavaScript developer to be familiar with jQuery. So start learning this JavaScript library for faster web development & also for making web applications.
Happy Learning !
No comments:
Post a Comment
Comments