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.
No comments:
Post a Comment