Introduction to jQuery
jQuery is a fast, lightweight, and feature-rich JavaScript library that is based on the principle “write less, do more”. Its easy-to-use APIs make the things like HTML document traversal and manipulation, event handling, adding animation effects to a web page much simpler that works seamlessly across all the major browsers like Chrome, Firefox, Safari, Internet Explorer, etc.
Advantages of Using jQuery
There are several advantages why one should opt for jQuery:
- Save lots of time — You can save lots of time and effort by using the inbuilt effects and selectors and concentrate on other development work.
- Simplify common JavaScript tasks — It considerably simplifies the common JavaScript tasks. Now you can easily create feature-rich and interactive web pages with fewer lines of code, a typical example is implementing Ajax to update the content of a page without refreshing it.
- Easy to use — It is very easy to use. Anybody with a basic working knowledge of HTML, CSS, and JavaScript can start development with jQuery.
- Compatible with browsers — It is created with modern browsers in mind and it is compatible with all major modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.
- Absolutely Free — And the best part is, it is completely free to download and use.
Once you’ve downloaded the jQuery file you can see it has .js extension because jQuery is just a JavaScript library, therefore you can include the jQuery file in your HTML document with the <script> element just like you include normal JavaScript files.
Standard jQuery Syntax
A statement typically starts with the dollar sign ($) and ends with a semicolon (;).
Her, the dollar sign ($) is just an alias for jQuery. Let’s consider the following example code which demonstrates the most basic statement.
Explanation of code
- The <script> element — Since jQuery is just a JavaScript library, so the code can be placed inside the <script> element. However, if you want to place it in an external JavaScript file, which is preferred, you just remove this part.
- The $(document).ready(handler) — This statement is typically known as a ready event. Where the handler is basically a function that is passed to
the ready() method to be executed safely as soon as the document is ready to be manipulated i.e. when the DOM hierarchy has been fully constructed.
Selecting Elements by ID
You can use the ID selector to select a single element with the unique ID on the page.
For example, the following jQuery code will select and highlight an element having the ID attribute id=”mark”, when the document is ready to be manipulated.
Selecting Elements by Class Name
The class selector can be used to select the elements with a specific class.
For example, the following code will select and highlight the elements having the class attribute class=”mark”, when the document is ready.
If you liked our content Introduction to jQuery, then you will like JavaScript Form Validation
Leave a Reply