What is jQuery?
jQuery is an open source, cross-browser, CSS3 compliant JavaScript library that has made web development scripting easier. It has the capabilities to produce dynamic web pages with animations. jQuery makes it simple to play with the DOM, add effects, and more complex functions. jQuery is extremely popular among web-developers. According to Wikipedia, jQuery today powers over 55% of the 10,000 most visited websites on the internet.
jQuery Advantages
Cross-browser Compatibility – One of the biggest benefits of jQuery is that it solves most of the frustrating cross-browser inconsistencies for you. JavaScript suffers from many cross-browser inconsistencies just like CSS. The jQuery team is aware of all the cross-browser issues, and they have an excellent understanding of why these problems happen. They have transferred this knowledge into the jQuery library, so it automatically works around all the cross-borwser issues out in the wild.
CSS Selectors
Selecting elements you want to change is the center of jQuery’s power. JQuery was built to take one of the most common javascript tasks, selecting DOM elements and ‘doing stuff’, and made it simple. You select elements using a similar syntax to the one you use on regular CSS.
Widespread Adoption
The biggest companies on the web are actively using jQuery: IBM, Netflix, Google, Microsoft and many more. jQuery’s popularity has created a vast community of web developer willing to help web developers of any skill level.
Before we jump into jQuery
Take a look at our registration button example again. You will see a login panel now. We are going to use CSS transitions and jQuery to toggle the visibility of the login panel. Look at our CSS styles and you will see some additional rules.
The #login rules sets the opacity of the login panel to 100% opaque. And applies a transition to any element that changes. The .off class sets the opacity of an element to 0% opaque (invisible) and also applies a transition. We will come back to this later when we use jQuery to toggle the visibility of the login panel using the .off class.
#login {
opacity: 1;
transition: opacity .25s linear;
}
#login.off {
opacity: 0;
transition: opacity .25s linear;
}
Getting started with jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Getting started with jQuery can be easy or challenging, depending on your experience with JavaScript, HTML, CSS, and programming concepts in general.
Learning how and when to use jQuery is a different process for each and every web developer, depending largely on experience with the primary tools for front-end development (HTML, CSS, and JavaScript) and knowledge of general programming principles.
To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:
$( document ).ready(function() {
// Your code here.
});
Your code must always be placed inside the ready event. For example, inside the
ready event, you can add a click handler to the link:$( document ).ready(function() {
$( "a.register" ).click(function( event ) {
alert( "Thanks for visiting!" );
});
});
Selecting Elements by ID
$( "#example" ); // Note IDs must be unique per page.
Selecting Elements by Class Name
$( ".exampleClass" );
Selecting Elements by Attribute
$( "input[name='first_name']" ); // Beware, this can be very slow in older browsers
Selecting Elements by Compound CSS Selector
$( "#contents ul.people li" );
Adding classes to html elements
$("#example").addClass("test");
Removing classes from html elements
$("#example").removeClass("test");
Using jQuery to activate CSS transitions/animations
The easiest way to add and remove classes on html elements is using the toggleClass() function. Lets go back to our demo (transition-jquery-2.html) and add the following jQuery code inside your ready statement.
What we are doing is upon clicking on the register button (<a class=”register” title=”Register now”>Register Now!</a>) we are using jQuery to toggle the CSS class ‘off’ on the #login element. When the ‘off’ class is applied to the #login element, the transition that we defined in the .off style rule CSS kicks in and smoothly fades the login panel out of view, making it invisible. When we click on the register button again, we remove the ‘off’ class, kicking off transition we placed in the #login CSS rule which fades the login panel back into view.
$( document ).ready(function() {
$( ".register" ).click(function( event ) {
$('#login').toggleClass('off');
});
});