Your SlideShare is downloading. ×
Kick start with j query
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Kick start with j query

706
views

Published on


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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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