Kick start with j query
38
Kick start with jQuery Kick start with jQuery
-
Upload
md-ziaul-haq -
Category
Documents
-
view
745 -
download
0
Transcript of Kick start with j query
Kick start with jQueryKick start with jQuery
Ziaul Haq ZiaZiaul Haq ZiaSr. 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&geo=all&date=ytd&sort=0
Always Dominating
http://docs.jquery.com/Sites_Using_jQuery
Who using jQuery ?
Let’s start …..
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 herealert(“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)”)]…………………..
Get selector’s by filtering
Content Filters
:contains(text) [$(“#myMenu li:contains(‘Home’)”)]
:has(selector) [$(“div:has(‘ul’)”)]
:empty [$(“p:empty”)]
…………………..
Get selector’s by filtering
Attribute Filters
[attribute] [$(“p [class]”)]
[attribute=value] [$(“div [id=‘master’]”)]
[attribute!=value] [$(“.myClass [id!=‘common’]”)]
[@attribute^=value] [$(“#myMenu li[@class^=‘menu’]”)]
…………………..
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”)]…………………..
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”)]
…………………..
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 myObjvar myObj = $(“any-selector”);
// Then apply actions on this object});
</script> </head> <body> Body content.</body>
</html>
Apply actions on objects
Attributes attr(), val(), html(), text(), css(), addClass(), removeClass() ….. myObj.val(); // Return valuemyObj.val(value); // Assign valuemyObj.attr(“title”); // Return attributes valuemyObj.val({“title”:”myTitle”}); // Assign new attributes………………………………..
DOM Manipulation append(), appendTo(), after(), before(), empty(), clone() ………myObj.append(“Hello guys”); // Insert content into elementmyObj.after(“PHP Guru”); // Insert content after elementmyObj.empty(); // Make the element’s empty……………………………………
var myObj = $(“any-selector”);
Apply actions on objects
Filtering & Finding eq(), hasClass(), children(), next(), prev() ….. myObj.eq(1); // Return second element of the objectmyObj.children(); // Return all the entire elements of the objectmyObj.next(); // Return next element of the object………………………………..
Effects hide(), show(), fadeIn(), fadeOut(), toggle(), slideToggle(), animate() …myObj.hide(); // Make the element’s invisiblemyObj.fadeIn(); // Make the invisible element’s visible with fading effectmyObj.toggle(); // Make the visible or invisible, based on status…………………………………….
var myObj = $(“any-selector”);
Apply actions on objects
Events click(), change(), bind(), submit(), mouseover() ….. myObj.click(function); // Fire the entire function after clickmyObj.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”);
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>
Lets see an AJAX example
getInformation.php file
<?php$myInfo = array(
"jquerygeek"=>array("name"=>"Ziaul Haq","email"=>"[email protected]"),
"phpguru"=>array("name"=>"Hasin Hyder","email"=>"[email protected]")
);
$myId = $_POST['myId'];echo json_encode($myInfo[$myId]);
?>
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:’[email protected]’} $(“#container”).empty().append(“Name : ”+infoData.name).append(“<br />Email : ”+infoData.email);},"json");
}); </script>
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 : [email protected]
</div></body>
Why JSON on AJAX
Object Literals
info = {name:”Ziaul Haq”, email:”[email protected]”
}
info.name; // Ziaul Haq
info.email; // [email protected]
One more point …
Chaining methods
Most of the jQuery methods return jQuery object
$(“#container”).empty() .append(“Name : ”+infoData.name) .append(“<br />Email : ”+infoData.email);
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 :
OrContact me on :
www.jquerygeek.com
Thank You
