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/
It helps to returns the first ancestor of the selected element.
// To add border and text color of “ul” nearby “span”.
<ul>style will affect here
<li>
<span>contents</span>
</li>
</ul>
$(document).ready(function(){
$(“span”).closest(“ul”).css({“color”:”yellow”,”border”:”2px solid yellow”});
});
It helps to select all elements that contain the specified text.
// HTML Content
<div>Vipin</div>
<div>Kiran</div>
<div>Sanoj</div>
<div>Dhanesh</div>
// To finds all divs containing “Kiran” and underlines them.
$( “div:contains(‘Kiran’)” ).css( “text-decoration”, “underline” );
//OUTPUT
Vipin
Kiran
Sanoj
Dhanesh
It helps to get the children of each element in the set of matched elements, including text and comment nodes.
// HTML Content
<div>Data01</div>
<div><i>Data02</i></div>
<div>Data03</div>
<div>Data04</div>
// To search for all the text nodes inside the div element(Italic) and wrap them with a b(bold) element.
$(“div”).contents().filter(“i”).wrap(“<b/>”);
// OUTPUT
It helps to sets or returns one or more style properties for the selected elements.
// To add new styles.
$(“p”).css(“background-color”,”yellow”);
$(“p”).css({“background-color”:”yellow”,”font-size”:”100%”});
It helps to attaches data to, or gets data from, selected elements.
// Store data
$(“#button1”).click(function(){
$(“#DataDIV”).data(“greeting”, “Hello World”);
});
// Redrive data
$(“#button2”).click(function(){
alert($(“#DataDIV”).data(“greeting”));
});
It helps to bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.
// When double-clicking on this element displays the alert:
$( “#target” ).dblclick(function() {
alert( “Handler for .dblclick() called.” );
});
It helps to Add an element to a selected element.
// It will fade slowly.
$(“#div1”).delay(“slow”).fadeIn();
// It will fade quickly.
$(“#div2”).delay(“fast”).fadeIn();
// It will pauses for 800 milliseconds.
$(“#div3”).delay(800).fadeIn();
// It will slides up for 400 milliseconds and then pauses for 800 milliseconds before fading in for 500
It helps to attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
// To add a paragraph(s) dynamically. When click on existing and added paragraph, it will create new paragraph(s).
It helps to removes the next function from the queue, and then executes the function.
// To Remove the next function from the queue, and then execute the function
$(“div”).queue(function(){
$(“div”).css(“background-color”,”yello”);
$(“div”).dequeue();
});
It helps to remove the set of matched elements from the DOM.
// To remove all < p> elements.
$(“button”).click(function(){
$(“p”).detach();
});