jQuery Tutorials

jQuery is a JavaScript library. It is fast, small, and feature-rich library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. For more details visit http://jquery.com/

:button Selector in jQuery

Sudheesh.R

It helps to selects all button elements and elements of type button.

:button Selector

// To change all button’s background color to green.

$(document).ready(function(){
$(“:button”).css(“background-color”,”green”);
});

.change() in jQuery

Sudheesh.R

It helps to bind an event handler to the “change” JavaScript event, or trigger that event on an element.

.change()

// To add an alert text, when an < input> field is changed:.

$(“input”).change(function(){
alert(“Handler for .change() called.The text has been changed.”);
});

:checkbox Selector in jQuery

Sudheesh.R

It helps to select all elements of type checkbox.

:checkbox Selector

// To add background color on checkboxes. (Firefox does not support background)

$(document).ready(function(){
$(“:checkbox”).wrap(“<span style=’background-color:yellow’ />”);
})

:checked Selector in jQuery

Sudheesh.R

It helps to select all elements that are checked or selected.

:checked Selector

// To add background color to checked checkboxes. (Firefox does not support background)

$(document).ready(function(){
$(“:checked”).wrap(“<span style=’background-color:yellow’ />”);
})

Child Selector (“parent > child”) in jQuery

Sudheesh.R

It helps to select all elements that are a direct child of the specified element.

Child Selector (“parent child”)

// To select all < span> elements that are a direct child of a < div> element and change it background color to yellow.

$(“div span”).css(“background-color”,”yellow”);

.children() in jQuery

Sudheesh.R

It helps get the children of each element in the set of matched elements, optionally filtered by a selector.

.children()

// To add border and text color of “li” in “ul”.

<ul>
  <li>style will affect here
    <span>contents</span>
  </li>
</ul>

$(document).ready(function(){
$(“ul”).children().css({“color”:”yellow”,”border”:”2px solid yellow”});
});

Class Selector (“.class”) in jQuery

Sudheesh.R

It helps to selects all elements with the given class.

Class Selector (“.class”)

// To add styles to a specific class.

$( “.contentClass” ).css( “border”, “3px solid yellow” );

.clearQueue() in jQuery

Sudheesh.R

It helps to stop the remaining functions in the queue:

.clearQueue()

// To stop animation using clearQueue() .

$(document).ready(function(){
  $(“#start”).click(function(){
       $(“div”).animate({height:100},1200);
       $(“div”).animate({width:100},1200);
       $(“div”).animate({height:200},1700);
       $(“div”).animate({width:200},7500);
  });
  $(“#stop”).click(function(){
       $(“div”).clearQueue();
  });
});

.click() in jQuery

Sudheesh.R

It helps to bind an event handler to the “click” JavaScript event, or trigger that event on an element.

.click()

// if we click on this element, the alert is displayed

$( “#target” ).click(function() {
alert( “Handler for .click() called.” );
});

.clone() in jQuery

Sudheesh.R

It helps to create a copy of the set of matched elements.

.clone()

//Please refer following example with normal copy and using .clone()

//Normally it is moved from its old location. So, given the code
$( “.section01” ).appendTo( “.section02” );

<div class=”container”>
<div