আগামী ১৫ ডিসেম্বর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML, CSS PHP,MySQL,JavaScript, AJAX, JQUERY, Bootstrap and Live Project কোর্সের ৮৭ তম ব্যাচ এবং ২৬ ডিসেম্বর-২০১৭ তারিখ থেকে শুরু হচ্ছে চার মাস ব্যাপী Zend PHP-7 Certified PHP Engineering (Advance PHP) কোর্সের ৩৫ তম ব্যাচ। প্রত্যেকটি কোর্স এর ফী নির্ধারণ করা হয়েছে ৩০,০০০/= আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722 81 75 91

Beginning JQUERY Part-1

What is jquery?

Beginning JQUERY Part-1jQuery 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. jquery 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.

download jquery library

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() /$() :

Everything Start with Jquery() methods.Dollar symbol($) is its shortcut.Basically within this method we select a element from dom..Within the parenthesis in single or double quote we write selector like css.Then done further operation using dot notation.

selector:

Do ever write css.Then you familiar with selector like type/tag seclector,class seclector,id selector. Everything works on 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

Its time to do something in dom element which we selected.We can get or set a dom html by using html().That means we can add or get all of the tags under selected element. Text only select the text of a tag.Contents are same but it also select comments.Val work same but work only on form.Text not work on form. Length will tell charcter length of selected text or value.See below example for clearification
<!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>

Live Demo

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

Suppose we have a ul and its has several li .Now we can add new li at the end of the ul by using append .Prepend does opposite work.It add element at the beginning of selected tag.

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>

Live Demo

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

annonymous funtion in jqueryAn 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

can you guess what hide() and show() method does?
They are responsible to hide and show selected element.Both of them take milisecond as a parameter.If given hiding or showing action will complete within that milisecond.If 5000 (5 seconds) given as hide method parameter than element will hide start hidding and will completely hide in 5 seconds.
slideUp(): selected element gradually become smaller over a period of milisecond spacified within its parenthesis

slideDown():Does opposite work and it gradually become bigger if element are hidden or slideUp.

fadeIn():selected element will gradually appear

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>

Live Demo

Document ready method

document ready method in jqueryUntill 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>

Explanation:
If we run our jquery code inside ready methods annonymous function then our code only run when document or webpage is ready.It does not matter where to include jquery code in head or at the end of body.

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

setInterval() and setTimeout() is a javascritp native methods.Set Interval method trigger a event automatically, again and again after a specified time.setInterval takes two parameter first one is code to execute every time and second one is how long it waits to trigger each event.If 5000 miloseconds  (5seconds)  is given to its parameter  then this function will trigger every 5 seconds.
Look the below code carfully 
<!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.

Leave a Reply

Your email address will not be published. Required fields are marked *