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.
