2. Ziaul Haq ZiaZiaul Haq Zia
Sr. Web Application Developer.
Liveoutsource Ltd.
www.jquerygeeek.com
twitter.com/jquerygeek
facebook.com/jquerygeek
About meAbout me
3. 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 ?
4. 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 ?
5. 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
6. 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
11. 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
12. 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”).[........]
16. Get selector’s by filtering
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”)]
…………………..
17. Get selector’s by filtering
Few More Filters
:hidden [$(“p:hidden”)]
:first-child [$(“div span:first-child”)]
:last-child [$(“div span:last-child”)]
:only-child [$(“div p:only-child”)]
…………………..
18. Apply actions on objects
<html>
<head>
<script language=“javascript” src=“path/jquery-
1.4.js"></script>
<script language=“javascript”>
$(document).ready(function(){
// Get jQuery object and put on myObj
var myObj = $(“any-selector”);
// Then apply actions on this object
});
</script>
</head>
<body> Body content.</body>
</html>
19. Apply actions on objects
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
……………………………………
var myObj = $(“any-selector”);
20. Apply actions on objects
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
…………………………………….
var myObj = $(“any-selector”);
21. Apply actions on objects
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”);
var myObj = $(“any-selector”);
22. Lets see an AJAX example
<html>
<head>
<script language=“javascript” src=“path/jquery-
1.4.js"></script>
<script language=“javascript”>
$(document).ready(function(){
alert(“I am running with jQuery”);
});
</script>
</head>
<body>
<input type=“hidden” id=“hiddenVal”
name=“hiddenData” value=“jquerygeek”>
<div id=“container”></div>
</body>
</html>
23. Lets see an AJAX example
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]);
?>
24. Lets see an AJAX example
AJAX method’s section
<script language=“javascript”>
$(document).ready(function(){
$.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>
25. Lets see an AJAX example
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>
26. Why JSON on AJAX
Object Literals
info = {
name:”Ziaul Haq”,
email:”jquerygeek@gmail.com”
}
info.name; // Ziaul Haq
info.email; // jquerygeek@gmail.com
27. One more point …
Chaining methods
Most of the jQuery methods return jQuery object
$(“#container”).empty()
.append(“Name : ”+infoData.name)
.append(“<br />Email : ”+infoData.email);