jQuery Basics Overview

Learn jQuery

Following steps are very useful to start with jQuery that helps you to understand how jQuery internally works with HTML elements.

When you work with jQuery, you should follow these steps to ensure the jQuery library is configured and working correctly

1. Wait until the page is being ready.

2. Select HTML elements that are defined to modify later.

3. Specify appropriate attributes with CSS styles to change the behavior.

4. Try adding the listener functions, e.g. click() or wait for a JQuery effect to finish, etc.

In the above example by default jQuery $(document).ready() function will be called when the page is being ready which takes a parameter as a function.

In the second step, jQuery will select HTML element by using the jQuery selection function called $() where it takes string as a parameter to identify the particular HTML element like #hide-btn and #show-btn.

In the third step, if we want to modify the styles of HTML element that can be done by just taking the help of CSS styles. To do this, we have to use CSS() function with CSS attributes.

In the final step, we added jquery events for the HTML elements like click(). Then jQuery adds the click listener to HTML #hide-btn , #show-btn elements which is done using the click() function. Now, Click listener will be called upon clicking on the HTML #hide-btn, #show-btn elements.

Learning jQuery is easy

Let us understand how this jQuery show and hide method works. See the below examples

Demonstrates a simple jQuery show() method.

Demonstrates a simple jQuery hide() method.

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM