jQuery is a cross-browser lightweight JavaScript library. In simple words jQuery has been designed to make navigation to any element easier, or adding/invoking event handlers on your HTML page. Using jQuery, one can easily convert his static looking website to a powerful and dynamic website.
Before proceeding further, I would like to clarify one very important point; that jQuery is extraordinarily useful, but you should still know how JavaScript works and how to use it correctly.
A quick look at what is available in jQuery:
- Cross-browser support and detection
- AJAX functions
- CSS functions
- DOM manipulation
- DOM transversal
- Attribute manipulation
- Event detection and handling
- JavaScript animation
- Hundreds of plugins for pre-built user interfaces, advanced animations, form validation, etc.
- Expandable functionality using custom plugins.
Getting Started
- To start with jQuery you must first of all download the latest version from http://jquery.com
- Provide the reference of the downloaded file in your HTML page.
e.g. <script type="text/javascript" src="jquery.js"></script>
jQuery Core Concepts
The entire jQuery logic rotates around the magic of the $() function. $() by default, represents the jQuery object. When combined with a selector, it can represent multiple DOM Elements.
The most popular function of jQuery is:
$(document).ready(function() {
// script goes here
});
Since this is fired when the DOM is ready for programming.
jQuery Selectors
- All Selectors.
$("*") // find everything (Selectors return a pseudo-array of jQuery elements)
- Basic Selectors
1. By Tag:
$("h1") // <h1>Hello C# Corner</h1>
2. By ID:
$("#username") // <span id="username">Pete</span>
3. By Class:
$(".menu") // <ul class="menu">Home</ul>
- More Precise Selector.
$("div.main") // tag and class
$("table#main") // tag and id
- Combination of Selectors.
$("#container, .f_left") // find by id + by class
$("h1, h2, h3, div.container") // multiple combination
- Hierarchy Selectors.
$("table td") // descendants
$("tr > td") // children
$("label + input") // next
$("#content ~ div") // siblings
- Selection Index Filters
$("tr:first") // first element
$("tr:last") // last element
$("tr:lt(2)") // index less than
$("tr:gt(2)") // index gr. than
$("tr:eq(2)") // index equals
- Attribute Filters
$("div[id]") // has attribute
$("div[dir='rtl']") // equals to
$("div[id^='name]") // starts with
$("div[id$='main]") // ends with
$("a[href*='corner]") // contains
- Form Selectors
$("input:checkbox") // checkboxes
$("input:radio") // radio buttons
$(":button") // buttons
$(":text") // text inputs
I have tried to cover most basic features that will help to start with jQuery.
Thanks for your reading. Please provide your inputs and suggestions for the article.