What is jquery?
jQuery is a framework built using JavaScript . its is a javascript library.It not a language like javascript.Its a library which have some functions and methods to make javascript coding easier.jquery library builds on javascript coding.Nowadays, In professional web development work every programmer loves and use jquery for its easy use.Its slogan is do more write less.From this it assumed that it can done lot more work with few coding.
DOWNLOAD ALL CODE
intrigation in webpage:
Do you ever intrigrate an external javascript file to your webpage.If yes then you know how to intrigate jquery in your project because its a external javascript file.There are two way to intrigate jquery file in your website.
First: cdn. Go to www.jquery.com and copy quick access link from footer.This is an external hosted javascript file.specify the cdn source into src in script tag.Notice,Internet connectivity is must to work jquery if you use cdn. 
Google also give jquery cdn.Click here to go google hosted jquery library and copy cdn
Second: download jquery library and save as a external javascript file in your project.Click download Jquery and A page will come with several option.
There have both production version and development version of both 1.x and 2.x version.Development version should use when making webpage in a local computer.Moreover,its easy to debug.On the other hand,Production version is compressed and faster.Now clicked any othe version and copy javascript code and save as a local js file in your project to work.
Version:
There are two two version of jquery one is 1.x (like 1.9) which support in IE 6,7,8 but 2.x (like 2.0) does not suppport IE 6,7,8.It is highly recommended to use 1.x version for its IE support.
Use jquery in your webpage like below:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery intrigation</title> </head> <body> <script type="text/javascript" src="http//code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> //wrtie your jquer code here </script> </body> </html>
Jquery() /$() :
selector:
chaining or dot notation:
Jquery work left to right.You can add mutiple function into a single element using dot notation.In above,we grab p tag first then add color and background to its using css() method.Notice we write two css() method one after another concate them with dot(.).That is chaining or dot notation.You can add multiple method to selected element using dot notation.
Basic Methods in Jquery
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<h3>Learn Jquery</h3>
<p>Jquery is most popular javascript library which is used by many web developer for its easy use.</p>
<span></span>
<div class="blank">
</div>
<input type="text" name="robotName" value="Robot Name">
<script type="text/javascript" src="js/jquery.js"></script>
<script>
//grab the text in h3 and save into a variable
var heading=$('h3').text();
//insert text into a tag
$('span').text(heading);
//insert a html tag into selected element
$('.blank').html('<img src="https://www.google.com/images/srpr/logo11w.png">');
//get html from selected element
var content=$('body').html();
alert(content);
//wrong approch to grab input field value
var InputText=$('input').text();
//Right approch
var InputVal=$('input').val();
alert(InputVal);
//Lets know length of inputVal
alert(InputVal.length);
</script>
</body>
</html>
Explanation:Its make clear in commets what they are doing.Make a html page and apply this method.Most of the time we hold output of selected element into a variable then alert to browser.This is demonstration only,in real project we learn more.
Adding tags to beginning or at the end of element
In addition, you can move a tag from its current position to another position by using appendTo() for appeding at beginning and prependTo() for adding at the end of target element or tag.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Adding tags</title>
</head>
<body>
<h2>Welcome To Jquery World</h2>
<h3>Make Interactive web page</h3>
<ol>
<li>Html</li>
<li>Css</li>
<li class="lang">Jquery</li>
<li>Ajax</li>
</ol>
<ul>
</ul>
<div class="blank">
<span>I am blank</span>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$('ol').append('<li>I am very First</li>').prepend('<li>I am at the end</li>');
//first we select h2 tag then move its possition to inside .blank claass div
$( "h2" ).appendTo( ".blank" );
$( "h3" ).prependTo( ".blank" );
</script>
</body>
</html>
Working with attribute of tags
There are several tags which depands on their attribue like anchor,img,iframe.We can add,modify or delete those tags attribute in jquery
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>woring with attribute</title>
<style type="text/css">
.leading{
font-size:40px;
color:rgba(255,204,0,1);
}
.primary{
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<a href="http://www.kingsclubltd.com">Kings Club</a>
<a href="http://www.lionsclub.com">Lions Club</a>
<span>Rottery Club</span>
<img src="http://www.capetownmagazine.com//media_lib/r2/58031a22d2eeacaa258301cae1a767fe.img.jpg">
<p class="leading primary ">Let's Dive into Jquery</p>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
var Source=$('a').attr('href');
$('body').append('<h3>'+Source+'</h3>');
$('a').attr('href','www.google.com').attr('target','_blank');
$('img').removeAttr('src');
$('p').removeClass('leading');
$('span').addClass('leading');
</script>
</body>
</html>
In attr method if we just give attribute name it will return that attribute value.For setting a value in attribute of a tag (like setting a src value of image tag).For that, write attribue name in first parameter and in second parameter give a value.We can also remove attribute from a tag by using removeAttr() method ,just give attribute name as a parameter in the mathod.Similarly to removeAttr, removing a class,removing property from object can also be done.If we remove a class then we definately add class to a tag.
Looping to every element
Untill now we work only single tag.If multiple tag selected then effects will apply only first element of that group.But if we apply our effect to each and every method then use each.It is a loop like foreach,while,for
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>looping to each tag</title>
</head>
<body>
<h3>Search engine battle</h3>
IN search engine battle <a href="http://www.google.com">Google</a> dominating market.<br><a href="http://www.yahoo.com">Yahoo</a> is followed by google.<br>Its search engine is <a href="http://www.bing.com">Bing</a>.There are other search engine in the market.
<div class="content"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$('a').each(function(index,element) {
$('.content').append('<p>'+index +' .' +element+'</p>');
});
</script>
</body>
</html>
Explanation: each function accept two parameter first one is index position of current element seond one is its value.we can give a function name in each for that we have to define first.But instead of that we use a annoymous function.Remember each is a loop.each time a new anchor tag found function inside each() will execute.Here we just grab the href of anchor and append to a div.
Annonymous function
An anonymous function is a function without a name.The point of anonymous functions is that you use them only once instead of having to define them somewhere else (for reuse). It is neat because they are right where they are to be used (in a certain context). Anonymous functions are convenient to pass as an argument to a higher-order function.
Javascript object:Do you ever work with an array or object with its property.Then this is familiar to you but with different syntax.If not, do not worry. Its start and end with curly brace {}. Within this there have key pair value. Each key pari sepearted by :(colon).
Syntext is
{key:value}
Value will be anything like array,string,number,anonymous function even an nested object. JSON or javascript object notation use this syntex.
More information about Javascript object notation
Use in Jquery: basically we can able to give mutiple value in a methods arguments by two way one is annonymous function another is javascript object.
sliding and fading effect
slideDown():Does opposite work and it gradually become bigger if element are hidden or slideUp.
fadeOut(): Opposite of fadeIn. selected element willl gradually disappeardelay():It waits certain amount of time.After that,start execution rest of method under current selector.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sliding and fadding effect</title>
</head>
<body>
<h3>Learn Jquery</h3>
<div class="blank">
<img class="slide" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/CMB_Timeline300_no_WMAP.jpg/600px-CMB_Timeline300_no_WMAP.jpg">
<hr>
<img class="fade" src="http://iqsciencefaith.files.wordpress.com/2012/01/digital_universe_187.jpg" width="50%">
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
//$('img').hide().slideDown("slow").slideUp(2000);
$('.slide').slideUp(2000).slideDown("slow");
//wait 5 seconds then disappear within 3 second again appear within 2 seconds
$('.fade').hide().delay(5000).fadeIn(2000).delay(5000).fadeOut(3000);
</script>
</body>
</html>
Document ready method
Untill now we write all of our jquery code at the end of body tag.So first browser display html then execute jquery.But if we write this code into the head then it does not work because browser first execute jquery and it does not find any html tag to implement because html not render browser yet.So we have to run our jquery code when everything finished loading in other words,when document is ready.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<h3>Learn Jquery</h3>
<p>Jquery is most popular javascript library which is used by many web developer for its easy use.</p>
<span></span>
<div class="blank">
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$('document').ready(function(e) {
//write your code here
});
</script>
</body>
</html>
jquery events
jQuery makes it straightforward to set up event-driven responses on page elements. These events are often triggered by the user’s interaction with the page,like validated form input data while user click submit button or give user auto suggestion while typing on search box.jQuery offers convenience methods for most native browser events. These methods — including blur,focus, click, keypress ,keyup, keydown, hover,Mouseover,mouse enter,mouse move,mouse leave,dbclick,change.
Every event in jquery run by on method.It takes two parameter.
First parameter is event name (as string) like click,blur.We can bind multiple event at a time fo that seperate them with space.
Second parameter is object or data which will be run when this event happen.Generally we give an annoymous function as a second parameter and wrap all of our code within this annonymous function.These annonymous function automatically execute while bind event happen.
<p> Last name <input type="text" name="lastName" id="lname"><span></span>
$('#lname').on('keyup',function(){
var Fname=$(this).val();
$(this).next('span').text(Fname);
})//end of keyup
Explanation:While typing on the input field, each time releasing a key will trigger annoymous function within on() method .Withing annonymous function first of all hold value of current input field within a variable .Then insert saved value in next span tag.Here i use this and next as new.
$(this) means current selected element.
next(): select next selector.
Other similar methods are:
prev(): means previous that will select previous tag of current selected tag.
parent(): will select parent of selected tag
children(): will select all of the children of current selected tag.
siblings(): select all siblings of current tag.siblings means sister and brother.
has(): Reduce the set of matched elements to those that have a specific child given to has parameter.
save this page as selector.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery Selector method</title>
<style type="text/css">
.dropdown{
list-style-type:lower-roman;
margin:0px;
border:3px outset rgba(153,255,102,1);
width:300px;
}
</style>
</head>
<body>
<h2>I am heading two</h2>
<ol>
<li>First </li>
<li>Second </li>
<li class="programmer">Third </li>
<li>Fourth </li>
<li>Five </li>
</ol>
<h4>Five most imporant language in South East ASIA</h4>
<ol>
<li>Bangla </li>
<li class="int">English </li>
<li>Latin </li>
<li>Hindi </li>
<li>Urdu </li>
</ol>
<h2>Five Most important Person</h2>
<ul>
<li>Sams </li>
<li>jack </li>
<li class="leader">Tuhin </li>
<li>Rahul </li>
<li>Roy
<ul>
<li>Fast </li>
<li>Accurate,Reliable </li>
</ul>
</li>
</ul>
<h3>The comparision between indina and china</h3>
<table border="0" width="400px">
<tr>
<th>field</th>
<th>India</th>
<th>China</th>
</tr>
<tr>
<td>Technology</td>
<td>India is a newly emerge country.</td>
<td>China is 10 years ahead of india</td>
</tr>
<tr>
<td>Population</td>
<td>Indian have to rules to controll their population.So their population is bigger than china</td>
<td>Chinise have some rules and thier population are standstill</td>
</tr>
<tr>
<td>Arms</td>
<td>Inia is nuclear country</td>
<td>Chinise is now consider third super power country after USA and Russia</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/selector.js"></script>
</body>
</html>
save this jquery as selector.js into your js folder
$(document).ready(function(e) {
$(':header').css('color','green');
$('.programmer').parent().addClass('dropdown');
$('ol').children().not('.programmer').css('color','#898989');
$('.leader').next().css({
'margin-left':'20px',
'list-style':'square'
});
$('.leader').prev().css({
'color':'violet'
})
$('.int').siblings().css('font-weight','bold');
//give a condition if there has a ul under li then add class dropdown
$('li').has('ul').addClass('dropdown');
$('tr:even').css('background-color','#ccc');
$('tr:odd').css('background-color','#eee');
});
Explanation:
:header selector select every heading like h1,h2,h3..
There have a list item with class programmer.Firstly, we select that item then select this parent by parent() method.Then add a class to its parent.In line 6 ,we select every child under ol but not those child who has a class .programmer.Next and prev will select the next and previous tag of currently selected tag.On line 17,we have a language list.first of all select li those have class int and then add font-weight bold to its siblings not itself.In line 19,select those li only who have a ul as a child.Finally,even and odd are doing same work as their meaning.
Now lets make something more interesting.
Suppose in a web page there have a restricted area.When mouse enter that area it will give us warning and when mouse leave it also give us notification.
Save this page as restriction.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Restricted Area</title>
<style>
.restricted{
width:200px;
height:200px;
background-color:rgba(102,0,0,1);
color:rgba(255,255,255,1);
}
.move{
width:115px;
height:150px;
position:absolute;
background-color:rgba(255,128,0,1);
padding:2px;
}
</style>
</head>
<body>
<div>
<img src="http://thumb7.shutterstock.com/thumb_small/450076/450076,1261165971,1/stock-photo-no-entry-sign-43068376.jpg">
Please Leave this area right now
</div>
<div>
Entry restricted
<p></p>
<span></span>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/restricted.js"></script>
</body>
</html>
Save this javascript as restricted.js to your js folder
$(document).ready(function(e) {
$('.move').hide();
$('.restricted').on('mouseenter',function(){
$(this).children('p').text("Unauthorized Entry");
$(this).on('mousemove',function(evt){
var left=evt.pageX;
var top=evt.pageY;
$('.move').show().css({
'left':left+10+'px',
'top':top+10+'px'
})//end of the css
})//end of internal mousemove
});//end of the mouseenter
$('.restricted').on('mouseleave',function(evt){
$(this).children('p').text("Unauthorized User Gone!");
$('.move').hide()
});//end of mouseleave
});//end of document ready
Explanation:
Firstly,hide the move div because it should only appear when mouse in restricted area and it moves along with mouse untill it leave that area.When mouse enter into restricted area then we insert some text into current children which is a paragraph tag.
After that,we trigger another event which is mouse move.This time we show a div contains a image and some text just under the mouse.we detech mouse exact position by using pageX (mouse left position) ,pageY(mouse top postion).
Notice our moveable div css position set to absoulate.That means we can move this div anywhere without interfere others.
We also trigger an event when mouse leave that restricted area.This time we write a message and hide the moveable div again.
See events.html file on downloaded folder.There have most used events and its example.
set interval and set timeout
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="counter"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$('document').ready(function(e) {
var i =0;
var m =0;
setTimeout(function(){
alert('OK');
},5000)
setInterval(counter, 1000);
function counter() {
if (i ==59) {
i = 0;
m++;
}
i++;
$('#counter').text(m + ":" + i);
}
});
</script>
</body>
</html>
Explanation:
There have a div with class counter which will work like a watch.First of all,we defined two variable seconds and minute respectively.Then we use setInterval javascript method to trigger counter function every 1 second interval.Counter function increase by one to seconds variable and if seconds variable is equal to 60 then increase minute by one and set seconds to 0.Finally, we set current seconds and minute to our counter div.
On the other hand,setTimeout() method works only once after the specified time given in parameter.In above example, we run alert after 5 seconds.This alert trigger once only.You can do other task compatible with your web apps.
You have successfully promotted from beginner to intermediate jquery programmer.Learn more advanced feature in next tutorial and become a jquery expert web designer / web developer
Jquery has a well documentation and learnig center.For beginner it would be hard to decide from where to start.Jquery documentation only teach you what thier functions and methods does not teach you how to apply them in real life project like creating a slideshow,dropdown menu,image zoomer and so on.In next tutorial i will use this tutorial knowlege build some practical project.
Beginning JQUERY Part-1
Hi,I am Tuhin Bepari from Bangladesh. I am a freelancer since 2011 working on odesk. I am not from Computer science background. But my passion about web programming make me a web developer. I am self motivated and always try to update with latest technology in my field.Now I am working on Yii Framework and Mongo DB.I have two other blog one is higher php and another is learn html5.
Before, we saw a long list of MOUSE events. They only respond to mouse actions. These respond to keypresses and – the form events – to actions we take within an HTML form.