JQUERY

WHAT YOU SHOULD ALREADY

KNOW

Before you start studying jQuery, you should have a basic

knowledge of:
HTML
CSS
JavaScript

WHAT IS JQUERY?

Is a free , open Javascript library

jQuery is a fast and concise JavaScript Library created by John

Resig in 2006 with a nice motto Write less, do more.
jQuery simplifies HTML document traversing, event handling,
animating, and Ajax interactions for rapid web development.
jQuery is a JavaScript toolkit designed to simplify various tasks
by writing less code. Here is the list of important core features
supported by 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

JQUERY SYNTAX

The jQuery syntax is tailor made forselectingHTML elements

and performing someactionon the element(s).

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

A $ sign to define/access jQuery

A (selector) to "query (or find)" HTML elements

A jQueryaction() 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".

JQUERY SELECTORS
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")
Example:
When a user clicks on a button, all <p> elements will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

JQUERY SELECTORS
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")
Example:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

JQUERY SELECTORS
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")
Example:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

JQUERY SELECTORS
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

JQUERYEVENT METHODS
Here are some common DOM events:
Mouse Events

Keyboard Events

Form Events

Document/Window
Events

click

keypress

submit

load

dblclick

keydown

change

resize

mouseenter

keyup

focus

scroll

mouseleave

blur

unload

JQUERY SYNTAX FOR EVENT

METHODS
In jQuery, most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page, you can do
this:

$("p").click();
The next step is to define what should happen when the event
fires. You must pass a function to the event:

$("p").click(function(){
// action goes here!!
});

click()

The click() method attaches an event handler function to an HTML

element.

$("p").click(function(){
$(this).hide();
});

dblclick()

The dblclick() method attaches an event handler function to an HTML

element.

$("p").dblclick(function(){
$(this).hide();
});

mouseenter()
The mouseenter() method attaches an event handler function to an
HTML element.

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

mouseleave()
The mouseleave() method attaches an event handler function to an
HTML element.
mousedown()
The mousedown() method attaches an event handler function to an
HTML element.
hover()
The hover() method takes two functions and is a combination of the
mouseenter() and mouseleave() methods.
focus()
The focus() method attaches an event handler function to an HTML form
field.

focus()
The focus() method attaches an event handler function to an HTML form
field.
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

blur()
The blur() method attaches an event handler function to an HTML form
field.
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

The on()
The on() method attaches one or more event handlers for the selected
elements.