Call back functions
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
We can have similar callback functions for the other methods: text, html, val
- remove() - Removes the selected element (and its child elements)
- empty() - Removes the child elements from the selected element
Call Back Function example:
$("#div1").remove();
$("p").remove(".italic");
jQuery Methods
The following example shows how to add class attributes to different elements. Of course you can select multiple elements, when adding classes:
Example
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
- jQuery removeClass() Method
The following example shows how to remove a specific class attribute from different elements:
Example
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
- jQuery toggleClass() Method
The following example will show how to use the jQuery toggleClass() method. This method toggles between adding/removing classes from the selected elements:
Example
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
$("p").css("background-color","yellow");
- Set Multiple CSS Properties
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery has several important methods for working with dimensions:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
- Traversing Up the DOM Tree
Three useful jQuery methods for traversing up the DOM tree are:
- parent(): The parent() method returns the direct parent element of the selected element. And it goes up only a single level.
- parents(): Find all the parents.
- parentsUntil(): Find the parents till a specific html or class or id specified
$(document).ready(function(){
$("span").parentsUntil("div");
});
- Traversing Down the DOM Tree
Two useful jQuery methods for traversing down the DOM tree are:
The children() method returns all direct children of the selected element and it traverses only a single level down.
The find() method returns descendant elements of the selected element, all the way down to the last descendant.
$(document).ready(function(){
$("div").find("span");
});
- Traversing Sideways in The DOM Tree
- siblings(): Returns all the siblings of the current element.
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
- jQuery prev(), prevAll() & prevUntil() Methods
The prev(), prevAll() and prevUntil() methods work just like the methods above but with reverse functionality: they return previous sibling elements (traverse backwards along sibling elements in the DOM tree, instead of forward).
JQuery Filtering
The first() method returns the first element of the selected elements.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
The load() method loads data from a server and puts the returned data into the selected element.
Syntax:
$(selector).load(URL,data,callback);
- The required URL parameter specifies the URL you wish to load.
- The optional data parameter specifies a set of querystring key/value pairs to send along with the request.
- The optional callback parameter is the name of a function to be executed after the load() method is completed.
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
The $.get() method requests data from the server with an HTTP GET request.
Syntax:
$.get(URL,callback);
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
The $.post() method requests data from the server using an HTTP POST request.
Syntax:
$.post(URL,data,callback);
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
There are many other popular JavaScript frameworks like: Angular, Backbone, Ember, Knockout, and more.
Basic Code Snippets
