JQuery Quick Reference
1. JQuery
jQuery is a
JavaScript Library.
jQuery greatly simplifies JavaScript
programming.
jQuery uses CSS syntax to select
elements.
2. Uses
The jQuery library contains the following features:
HTML/DOM
manipulation
CSS
manipulation
HTML event
methods
Effects and
animations
AJAX
Utilities
Notes:
If you don't want to download and host jQuery yourself, you can
include it from a CDN (Content Delivery Network).
$(document).ready(function(){
// jQuery methods go
here...
});
or
$(function(){
// jQuery methods go
here...
});
This is to prevent any jQuery code from running before the
document is finished loading (is ready).
3. JQuery Selector
$("*")
Selects all elements
$(this) Selects the
current HTML element
$("p.intro")
Selects all elements with class="intro"
$("p:first")
Selects the first element
Try it
$("ul li:first")
Selects the first
element of the first
$("ul li:first-child") Selects the first
element of
every
$("[href]")
Selects all elements with an href attribute Try it
$("a[target='_blank']") Selects all elements with a
target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all elements with a target
attribute value NOT equal to "_blank"
$(":button")
Selects all
$("tr:even")
Selects all even
elements
$("tr:odd")
Selects all odd
elements
4.
click()
$("p").click(function(){ // When a click event fires on a
element
$(this).hide();
//
hide the current element
});
dblclick()
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
$("#p1").mouseenter(function(){
alert("You
entered p1!");
});
hover()
$("#p1").hover(function(){
alert("You
entered p1!");
},
focus()
$("input").focus(function(){
$(this).css("background-color",
"#cccccc");
});
blur()
$("input").blur(function(){
$(this).css("background-color",
"#ffffff");
});
jQuery toggle()
Shown elements are hidden and hidden elements are shown:
$("button").click(function(){
$("p").toggle();
});
5. jQuery Callback
Functions
JavaScript statements are executed line by line. However, with
effects, the next line of code can be run even though the effect is not
finished. This can create errors.
A callback function is executed after the current effect is
finished.
$("button").click(function(){
$("p").hide("slow",
function(){
alert("The paragraph is now
hidden");
});
});
Good Example : http://dreamerslab.com/blog/en/javascript-callbacks/
function do_a( callback ){
setTimeout( function(){
// simulate a
time consuming function
console.log(
'`do_a`: this takes longer than `do_b`' );
// if callback
exist execute it
callback
&& callback();
}, 3000 );
}
function do_b(){
console.log( '`do_b`:
now we can make sure `do_b` comes out after `do_a`' );
}
do_a( function(){
do_b();
});
Example :
`do_a`: this takes longer than `do_b`
`do_b`: now we can make sure `do_b` comes out after `do_a`
6. jQuery - Chaining
Chaining allows us to run multiple jQuery methods (on the same
element) within a single statement.
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
7. Get Attributes - attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
8.jQuery - Set Content
and Attributes
text() - Sets
or returns the text content of selected elements
html() - Sets
or returns the content of selected elements (including HTML markup)
val() - Sets
or returns the value of form fields
$("#btn1").click(function(){
$("#test1").text("Hello
world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello
world!");
});
$("#btn3").click(function(){
$("#test3").val("Dolly
Duck");
});
9.Set Attributes -
attr()
The jQuery attr() method is also used to set/change attribute
values.
$("button").click(function(){
$("#w3s").attr("href",
"http://www.w3schools.com/jquery");
});
10.jQuery - Add Elements
With jQuery, it is
easy to add new elements/content.
append() -
Inserts content at the end of the selected elements
prepend() -
Inserts content at the beginning of the selected elements
after() -
Inserts content after the selected elements
before() -
Inserts content before the selected elements
11.jQuery - Remove
Elements
With jQuery, it is
easy to remove existing HTML elements.
remove() -
Removes the selected element (and its child elements)
empty() -
Removes the child elements from the selected element
jQuery remove() Method
The jQuery remove() method removes the selected element(s) and
its child elements.
$("#div1").remove();
jQuery empty() Method
The jQuery empty() method removes the child elements of the
selected element(s).
$("#div1").empty();
Filter the Elements to
be Removed
$("p").remove(".italic");
jQuery - Get and Set CSS
Classes
With jQuery, it is easy
to manipulate the CSS of elements.
addClass() -
Adds one or more classes to the selected elements
removeClass()
- Removes one or more classes from the selected elements
toggleClass()
- Toggles between adding/removing classes from the selected elements
css() - Sets
or returns the style attribute
jQuery addClass() Method
$("button").click(function(){
$("h1,
h2, p").addClass("blue");
$("div").addClass("important");
});
jQuery removeClass()
Method
$("button").click(function(){
$("h1,
h2, p").removeClass("blue");
});
jQuery toggleClass()
Method
$("button").click(function(){
$("h1,
h2, p").toggleClass("blue");
});
jQuery css() Method
Return a CSS Property
The following example will return the background-color value of
the FIRST matched element:
$("p").css("background-color");
Set a CSS Property
$("p").css("background-color",
"yellow");
Set Multiple CSS
Properties
The following example will set a background-color and a
font-size for ALL matched elements:
$("p").css({"background-color":
"yellow", "font-size": "200%"});
jQuery - Dimensions
jQuery has several
important methods for working with dimensions:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery Traversing -
Ancestors
An ancestor is a parent, grandparent, great-grandparent, and so
on.
With jQuery you can traverse up the DOM tree to find ancestors
of an element.
jQuery parent() Method
The parent() method returns the direct parent element of the
selected element.
This method only traverse a single level up the DOM tree.
jQuery parents() Method
The parents() method returns all ancestor elements of the
selected element, all the way up to the document's root element ().
$(document).ready(function(){
$("span").parents();
});
The following example returns all ancestors of all
elements that are
- elements:
$(document).ready(function(){
$("span").parents("ul");
});
jQuery parentsUntil()
Method
The parentsUntil() method returns all ancestor elements between
two given arguments.
$(document).ready(function(){
$("span").parentsUntil("div");
});
jQuery Traversing -
Descendants
A descendant is a child, grandchild, great-grandchild, and so
on.
With jQuery you can traverse down the DOM tree to find
descendants of an element.
jQuery children() Method
The children() method returns all direct children of the
selected element.
$(document).ready(function(){
$("div").children();
});
jQuery find() Method
The find() method returns descendant elements of the selected
element, all the way down to the last descendant.
$(document).ready(function(){
$("div").find("span");
});
The following example
returns all descendants of
:
$(document).ready(function(){
$("div").find("*");
});
jQuery siblings() Method
The following example returns all sibling elements of
:
$(document).ready(function(){
$("h2").siblings();
});
jQuery next() Method
The next() method returns the next sibling element of the
selected element
$(document).ready(function(){
$("h2").next();
});
jQuery nextAll() Method
The nextAll() method returns all next sibling elements of the
selected element.
$(document).ready(function(){
$("h2").nextAll();
});
jQuery nextUntil()
Method
The nextUntil() method returns all next sibling elements
between two given arguments.
$(document).ready(function(){
$("h2").nextUntil("h6");
});
jQuery first() Method
The first() method returns the first element of the selected
elements.
$(document).ready(function(){
$("div
p").first();
});
jQuery last() Method
The last() method returns the last element of the selected
elements.
$(document).ready(function(){
$("div
p").last();
});
jQuery eq() method
The eq() method returns an element with a specific index number
of the selected elements.
$(document).ready(function(){
$("p").eq(1);
});
jQuery filter() Method
The following example returns all elements with class
name "intro":
$(document).ready(function(){
$("p").filter(".intro");
});
jQuery not() Method
The following example returns all elements that do
not have class name "intro":
$(document).ready(function(){
$("p").not(".intro");
});
jQuery - The
noConflict() Method
If two different frameworks are using the same shortcut, one of
them might stop working.
The jQuery team have already thought about this, and
implemented the noConflict() method.
The noConflict() method releases the hold on the $ shortcut
identifier, so that other scripts can use it.
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery
is still working!");
});
});
JQuery
//MVC JQuery Ajax
$('#learnitem-form').ajaxSubmit({
data : {
data1: data1,
data2: data2,
},
success :
function(result){
//success
},
error : function(){
//error
}
});
Posting Javascript
Object
type This
is type of HTTP Request and accepts a valid HTTP verb. POST is the option
illustrated in this article.
url This is the location of the resource that
the request will be made to.
data This is the actual data to be sent as part
of the request.
contentType This is the content type of the request
you are making. The default is 'application/x-www-form-urlencoded'.
dataType This is the type of data you expect to
receive back. Accepted values are text, xml, json, script, html jsonp. If you do
not provide a value, jQuery will examine the MIME type of the response and base
its decision on that.
