Your SlideShare is downloading. ×
0
Kick start with jQueryKick start with jQuery
Ziaul Haq ZiaZiaul Haq Zia
Sr. Web Application Developer.
Liveoutsource Ltd.
www.jquerygeeek.com
twitter.com/jquerygeek
fa...
 JavaScript Library
 Fast and concise
 Simplifies HTML document traversing, event
handling, animating, and Ajax interac...
 Lightweight :
24KB in size (Minified and Gzipped)
 CSS Compliant :
Support CSS 1-3
 Cross-browser :
IE 6.0+, FF 2+, Sa...
With DOM :
var obj = document.getElementById('box');
if(obj.style.display == 'none'){
obj.style.display = 'block';
} else ...
Google trends comparison on JS frameworks for last 1 year
http://www.google.com/trends?q=jQuery%2C+prototype%2C+yui%2C+doj...
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)...
Find some elements and Make object
Do some thing with that object
$(“p”).addClass(“myParagraph”);
$(“#myDiv”).show();
Basi...
CSS
div {
.............
}
#myDiv {
.............
}
.myClass {
.............
}
#menu ul li{
...............
}
Find element ...
Get selector’s by filtering
 Basic Filters
 :even [$(“#myMenu li:even”)]
 :odd [$(“#myMenu li:odd”)]
 :first [$(“#myMe...
Get selector’s by filtering
 Content Filters
 :contains(text) [$(“#myMenu li:contains(‘Home’)”)]
 :has(selector) [$(“di...
Get selector’s by filtering
 Attribute Filters
 [attribute] [$(“p [class]”)]
 [attribute=value] [$(“div [id=‘master’]”)...
Get selector’s by filtering
 Form & Form Filters
 For all <input> field, use type for identity
 :text [$(“:text”)]
 :s...
Get selector’s by filtering
 Few More Filters
 :hidden [$(“p:hidden”)]
 :first-child [$(“div span:first-child”)]
 :las...
Apply actions on objects
<html>
<head>
<script language=“javascript” src=“path/jquery-
1.4.js"></script>
<script language=...
Apply actions on objects
 Attributes
 attr(), val(), html(), text(), css(), addClass(), removeClass() …..
myObj.val(); /...
Apply actions on objects
 Filtering & Finding
 eq(), hasClass(), children(), next(), prev() …..
myObj.eq(1); // Return s...
Apply actions on objects
 Events
 click(), change(), bind(), submit(), mouseover() …..
myObj.click(function); // Fire th...
Lets see an AJAX example
<html>
<head>
<script language=“javascript” src=“path/jquery-
1.4.js"></script>
<script language=...
Lets see an AJAX example
getInformation.php file
<?php
$myInfo = array(
"jquerygeek"=>array(
"name"=>"Ziaul Haq",
"email"=...
Lets see an AJAX example
AJAX method’s section
<script language=“javascript”>
$(document).ready(function(){
$.post(
"getIn...
Lets see an AJAX example
Get selected information on body
<body>
<input type=“hidden” id=“hiddenVal”
name=“hiddenData” val...
Why JSON on AJAX
Object Literals
info = {
name:”Ziaul Haq”,
email:”jquerygeek@gmail.com”
}
info.name; // Ziaul Haq
info.em...
One more point …
 Chaining methods
 Most of the jQuery methods return jQuery object
$(“#container”).empty()
.append(“Nam...
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-...
If anymore question or help need,
please mail me :
jquerygeek@gmail.com
Or
Contact me on :
www.jquerygeek.com
Thank You
Upcoming SlideShare
Loading in...5
×

Kick start with j query

740

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
740
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Kick start with j query"

  1. 1. Kick start with jQueryKick start with jQuery
  2. 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. 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. 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. 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. 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
  7. 7. http://docs.jquery.com/Sites_Using_jQuery Who using jQuery ?
  8. 8. Let’s start …..
  9. 9. www.jquery.com Go to jQuery site Download the latest version
  10. 10. <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
  11. 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. 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”).[........]
  13. 13. 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)”)] …………………..
  14. 14. Get selector’s by filtering  Content Filters  :contains(text) [$(“#myMenu li:contains(‘Home’)”)]  :has(selector) [$(“div:has(‘ul’)”)]  :empty [$(“p:empty”)] …………………..
  15. 15. 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’]”)] …………………..
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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);
  28. 28. Resources http://www.visualjquery.com Visual jQuery
  29. 29. Let’s see some cool jQuery plugin
  30. 30. Some plugins  Content Gallery http://workshop.rs/projects/coin-slider/
  31. 31. Some plugins  Photo gallery http://leandrovieira.com/projects/jquery/lightbox/
  32. 32. Some plugins  jQuery form validation http://validity.thatscaptaintoyou.com/
  33. 33. Some plugins  Tool tip (qTip) http://craigsworks.com/projects/qtip/
  34. 34. Some plugins  UI Tab http://jqueryui.com/demos/tabs/
  35. 35. All plugins  And many more……. http://plugins.jquery.com/
  36. 36. 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
  37. 37. If anymore question or help need, please mail me : jquerygeek@gmail.com Or Contact me on : www.jquerygeek.com
  38. 38. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×