jQuery is a cross platform Javascript library to simplify Javascript programming language and make a compatibility for the various browsers available for the client side HTML scripting or DOM manipulations..
jQuery 2.x deprecates the support for IE 6 -8 and now only supports the IE 9 onwards along with Chrome , Mozilla , Safari etc browsers makes it lighter in the size.
jQuery 1.x gives the full support for the all the browsers even the older ones like IE 6-7 , that's why it the most popular and widely used Javascript library in the current web application development world.
It is a simple and a very powerful library to work in the web based applications . It's based on "Write less , do more" principals .
jQuery library contains following features :
1 . HTML/DOM manipulations
2. CSS selectors based manipulations
3. HTML event based methods
4. Animations and effects
5. Ajax based handling
Including or Downloading jQuery :
One can download the latest versions of the jQuery from the jQuery site http://jquery.com/download/ or
one can include jquery from the CDN available like Google /Microsoft which is being one of the faster way to load the jquery as once its loaded its takes from the cache . CDN makes sure to serve it from the closest server to the client making it available in a lesser time or faster loading.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
</head>
Lets understand the DOM tree structure and complete DOM
Document Ready Event :
Note : the $ sign represents access to jQuery
This Ready event prevent any jquery call till document loading is completed. If you try to access DOM before the document is loaded , may lead to failure of the action.
$(document).ready(function(){
// jquery logic is here.
});
OR another shorter way of creating a Document Ready Event as :
$(function(){
//your jquery logic is here
});
$ can access following three elements :
1. HTML tag elements like $( "div" ) , $(" h1") , $("ul") , $("li") , $("html") , $("body") ,$("a") etc.
2. Classes with dot(.) operator like $(".sample") its gives all the elements having class "sample"
3. ID with hash(#) operator $("#sample-id") , its gives a unique element with the id "sample-id"
Try one sample program of changing color of the text :
****************************************************************
<html>
<head>
<meta charset="utf-8">
<title>jQeury Basics</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<h1> Welcome to the basics of jQuery !!!!</h1>
<a id="sample-id" href=""> Its an example of ID manipulation. click here to change color to green </a> <br>
<a class="sample-class" href=""> Its an example of class manipulation. click here to change color to blue</a><br>
<p> Demonstration of the examples of the jQuery tag element manipulation, its cool!!!!
<a class="p-elements" href=""> click to change the color to red </a></p>
<script>
$( document ).ready(function() {
///OR $(function() {
$("#sample-id").on("click" ,function(event) {
//changes the color of the current text to green
event.preventDefault();
$(this).css("color", "green");
});
$(".sample-class").on("click" ,function(event) {
//changes the color of the current text to blue
event.preventDefault();
$(this).css("color", "blue");
});
$(".p-elements").on("click" ,function(event) {
//changes the color of the all the element p to red
event.preventDefault();
$("p").css("color", "red");
});
});
</script>
</body>
</html>
****************************************************************
Enjoy the cool jQuery stuff .... enjoy the learning ... :)
