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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Kick start with j query

  • 702 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
702
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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