Why jQuery? How do I use jQuery?

Why jQuery?

There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. Many of the biggest companies on the Web use jQuery, such as:

• Google
• Microsoft
• IBM
• Netflix
  

How do I use jQuery?

First off, you should learn some basics. jQuery, like many other libraries, uses the global $ variable as a shortcut. Basically, window.jQuery === window.$ (and therefore, $("div") and jQuery("div") are identical. You can use whichever you prefer, but $ is shorter and neater, it also provides better readability since it’s easier to spot than jQuery, which is a more conventional name for a variable (being plain text). There are two parts to jQuery. There are methods which run on collections and rely on $.fn (a shortcut for $.prototype). There are then utility methods which run directly on $—for example $.data() and $.ajax(), which don’t require a collection to work.

jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

$(document).ready(function(){
   // jQuery methods go here...
});

This is to prevent any jQuery code from running before the document is finished loading (is ready). 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:

• Trying to hide an element that is not created yet
• Trying to get the size of an image that is not loaded yet

$(function(){
   // jQuery methods go here...
});

Use the syntax you prefer. We think that the document ready event is easier to understand when reading the code.

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 id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $().

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")

When a user clicks on a button, all <p> elements will be hidden:

$(document).ready(function(){
   $("button").click(function(){
   $("p").hide();
   });
});

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")

When a user clicks on a button, the element with id="test" will be hidden:

$(document).ready(function(){
   $("button").click(function(){
   $("#test").hide();
   });
});

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")

When a user clicks on a button, the elements with class="test" will be hidden:

$(document).ready(function(){
   $("button").click(function(){
   $(".test").hide();
  });
});

Syntax	Description
$("*")	Selects all elements
$(this)	Selects the current HTML element
$("p.intro")	Selects all <p> elements with class="intro"
$("p:first")	Selects the first <p> element
$("ul li:first")	Selects the first <li> element of the first <ul>
$("ul li:first-child")	Selects the first <li> element of every <ul>
$("[href]")	Selects all elements with an href attribute
$("a[target='_blank']")	Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']")	Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button")	Selects all <button> elements and <input> elements of type="button"
$("tr:even")	Selects all even <tr> elements
$("tr:odd")	Selects all odd <tr> elements

What is jQuery? How do I use jQuery?