Kick start with j query

Kick start with jQueryKick start with jQuery

Ziaul Haq ZiaZiaul Haq Zia
Sr. Web Application Developer.
Liveoutsource Ltd.
www.jquerygeeek.com
twitter.com/jquerygeek
facebook.com/jquerygeek
About meAbout me

 JavaScript Library
 Fast and concise
 Simplifies HTML document traversing, event
handling, animating, and Ajax interactions.
 Designed to change the way that you write
JavaScript.
What is jQuery ?

 Lightweight :
24KB in size (Minified and Gzipped)
 CSS Compliant :
Support CSS 1-3
 Cross-browser :
IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome.
 Community Support :
Blog, Forum, Tutorial, Plugins, Books and so…
 Write less, do more
Why we will use jQuery ?

With DOM :
var obj = document.getElementById('box');
if(obj.style.display == 'none'){
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
With jQuery:
$('#box').toggle();
Write less, do more

Google trends comparison on JS frameworks for last 1 year
http://www.google.com/trends?q=jQuery%2C+prototype%2C+yui%2C+dojo%2C+mootools&ctab=0&ge
Always Dominating

http://docs.jquery.com/Sites_Using_jQuery
Who using jQuery ?

www.jquery.com
Go to jQuery site
Download the latest version

<html>
<head>
<script language=“javascript” src=“path/jquery-
1.4.js"></script>
<script language=“javascript”>
$(document).ready(function(){
//All jQuery code will be here
alert(“I am running with jQuery”);
});
</script>
</head>
<body>
Body content.
</body>
</html>
Getting ready for working

Find some elements and Make object
Do some thing with that object
$(“p”).addClass(“myParagraph”);
$(“#myDiv”).show();
Basic work flow…
Find all p elements and make Object
Find element with myDiv id and make Object
Add class (myParagraph) on that element
Apply show() function on that element

CSS
div {
.............
}
#myDiv {
.............
}
.myClass {
.............
}
#menu ul li{
...............
}
Find element & Make object
Have to pass CSS selector
to $() [jQuery object]
jQuery
$(“div”).[Do something]
$(“#myDiv”).[........]
$(“.myClass”).[........]
$(“#menu ul li”).[........]

Get selector’s by filtering
 Basic Filters
 :even [$(“#myMenu li:even”)]
 :odd [$(“#myMenu li:odd”)]
 :first [$(“#myMenu li:first”)]
 :last [$(“#myMenu li:last”)]
 :eq(position number) [$(“#myMenu li:eq(2)”)]
 :gt(position number) [$(“#myMenu li:gt(0)”)]
 :lt(position number) [$(“#myMenu li:lt(3)”)]
…………………..

 Content Filters
 :contains(text) [$(“#myMenu li:contains(‘Home’)”)]
 :has(selector) [$(“div:has(‘ul’)”)]
 :empty [$(“p:empty”)]
…………………..

 Attribute Filters
 [attribute] [$(“p [class]”)]
 [attribute=value] [$(“div [id=‘master’]”)]
 [attribute!=value] [$(“.myClass [id!=‘common’]”)]
 [@attribute^=value] [$(“#myMenu li[@class^=‘menu’]”)]
…………………..

 Form & Form Filters
 For all <input> field, use type for identity
 :text [$(“:text”)]
 :submit [$(“:submit”)]
 :checkbox [$(“:checkbox”)]
…………………………
 :checked [$(“input:checked”)]
 :disabled [$(“input:disabled”)]
 :selected [$(“select option:selected”)]
…………………..

 Few More Filters
 :hidden [$(“p:hidden”)]
 :first-child [$(“div span:first-child”)]
 :last-child [$(“div span:last-child”)]
 :only-child [$(“div p:only-child”)]
…………………..

Apply actions on objects
<html>
<head>
1.4.js"></script>
// Get jQuery object and put on myObj
var myObj = $(“any-selector”);
// Then apply actions on this object
});
</script>
</head>
<body> Body content.</body>
</html>

 Attributes
 attr(), val(), html(), text(), css(), addClass(), removeClass() …..
myObj.val(); // Return value
myObj.val(value); // Assign value
myObj.attr(“title”); // Return attributes value
myObj.val({“title”:”myTitle”}); // Assign new attributes
………………………………..
 DOM Manipulation
 append(), appendTo(), after(), before(), empty(), clone() ………
myObj.append(“Hello guys”); // Insert content into element
myObj.after(“PHP Guru”); // Insert content after element
myObj.empty(); // Make the element’s empty
……………………………………

 Filtering & Finding
 eq(), hasClass(), children(), next(), prev() …..
myObj.eq(1); // Return second element of the object
myObj.children(); // Return all the entire elements of the object
myObj.next(); // Return next element of the object
………………………………..
 Effects
 hide(), show(), fadeIn(), fadeOut(), toggle(), slideToggle(), animate() …
myObj.hide(); // Make the element’s invisible
myObj.fadeIn(); // Make the invisible element’s visible with fading effect
myObj.toggle(); // Make the visible or invisible, based on status
…………………………………….

 Events
 click(), change(), bind(), submit(), mouseover() …..
myObj.click(function); // Fire the entire function after click
myObj.change(function); // Fire the entire function after change the value
myObj.submit(); // Will submit the entire form
………………………………..
 AJAX
 $.ajax(), $.post(), $.get(), load(), getJSON() ………….
$.post(
‘actionPage.php’, {name:’Zia’},
function(data){
// Do play with the ‘data’ object.
}, “json”);

Lets see an AJAX example
<html>
<head>
1.4.js"></script>
alert(“I am running with jQuery”);
});
</script>
</head>
<body>
<input type=“hidden” id=“hiddenVal”
name=“hiddenData” value=“jquerygeek”>
<div id=“container”></div>
</body>
</html>

getInformation.php file
<?php
$myInfo = array(
"jquerygeek"=>array(
"name"=>"Ziaul Haq",
"email"=>"jquerygeek@gmail.com"
),
"phpguru"=>array(
"name"=>"Hasin Hyder",
"email"=>"phpfive@yahoo.com"
)
);
$myId = $_POST['myId'];
echo json_encode($myInfo[$myId]);
?>

AJAX method’s section
$.post(
"getInformation.php",
{myId:$("#hiddenVal").val()},
function(infoData){
//infoData = {name:’Ziaul Haq’,
email:’jquerygeek@gmail.com’}
$(“#container”).empty().append(“Name :
”+infoData.name).append(“<br />Email :
”+infoData.email);
},"json");
});
</script>

Get selected information on body
<body>
<input type=“hidden” id=“hiddenVal”
name=“hiddenData” value=“jquerygeek”>
<div id=“container”>
Name : Ziaul Haq <br />
Email : jquerygeek@gmail.com
</div>
</body>

Why JSON on AJAX
Object Literals
info = {
name:”Ziaul Haq”,
email:”jquerygeek@gmail.com”
}
info.name; // Ziaul Haq
info.email; // jquerygeek@gmail.com

One more point …
 Chaining methods
 Most of the jQuery methods return jQuery object
$(“#container”).empty()
.append(“Name : ”+infoData.name)
.append(“<br />Email : ”+infoData.email);

Resources
http://www.visualjquery.com
Visual jQuery

Let’s see some cool jQuery plugin

Some plugins
 Content Gallery
http://workshop.rs/projects/coin-slider/

Some plugins
 Photo gallery
http://leandrovieira.com/projects/jquery/lightbox/

Some plugins
 jQuery form validation
http://validity.thatscaptaintoyou.com/

Some plugins
 Tool tip (qTip)
http://craigsworks.com/projects/qtip/

Some plugins
 UI Tab
http://jqueryui.com/demos/tabs/

All plugins
 And many more…….
http://plugins.jquery.com/

Reference Books
https://www.packtpub.com/jquery-plugin-development-beginners-guide/book
https://www.packtpub.com/learning-jquery-1.3/book?mid=1802090m1d2r
http://www.manning.com/bibeault2/
Learning jQuery 1.3
jQuery Plugin Development Beginner's Guide

If anymore question or help need,
please mail me :
jquerygeek@gmail.com
Or
Contact me on :
www.jquerygeek.com

Kick start with j query

More Related Content

What's hot

Viewers also liked

Similar to Kick start with j query

Kick start with j query