home

Jquery Fundamentals

Jquery is simple multi browse javascript library, it nothing more then a part (bunch) of javascript, jquery makes it easy to manipulate and easy to navigate a document DOM selected elements.
Jquery can handle events effectively, jquery use to create plugins, writing less do more.

What is it used for?

Jquery use to handle events like Click and Toggle, hover and more, effective animations and effects even for future detection, jquery manipulate DOM elements, Ajax application and much more...

Getting and using jquery library and Where to get jquery library

You can download jquery from jquery official website (jquery.com) and include it to html document inside the header of the html document(we type the jquery end of the document with no issues but if want to run in the header area, in this case first we need to check first document is ready. if we do not this then our jquery code will run before the rest pf the code and it will not correct function), also use hosted library link.

$(document).ready(function(){ //write jqury code here });

Using Jquery Selectors

One of the reason that jquery is so powerful and useful is that we can grab and select virtually in the DOM(document object module). This could be div, list and elements are paragraphs are tags, the way we do wrapping them in $("").


$("div") - Here all div element will select, $("#wrap") - in this example all will select id of wrap elements,$("a,myclass") - will select (a) link tag of myclass

$("div") - will select all div element
$("#wrap") - will select with id of wrap div
$("a,myclass") - will select link tag of myclass

Jquery Action and Response

Once we called some thing with selectors we can get response immediately like changing color or something, we can do things such as call jquery action, see the below code easily you will come to know what is action.

The .addClass action will add the class ("myclass") to all divs.
$("div">.addClass("myclass");

Jquery Events

Here we can use jquery to handle events. with click event example check below code, in this example when the user respond to click(Click Event) on a link(anchor tag), Anchor(a) tag change to blue(#09F) with using Css Properties;

$("a").click(function(){
$(this).css("background-color","#09F");
});

Jquery Show and Hide Elements

With using jquery we can handle any elements, Coming to the point jquery can show the element hide the elements. whenever you click on div element div elements hide.

$("div").click(function(){
$(this).hide();
});

Jquery Animation

With using jquery we can animate any element.

There are may way to animate elements in jquery for example i am giving small example with simple animation(slideDown) which div has MyAnim class that will slide down.

$("#MyAnim").slideDown(function(){
});