Kick start with j query
Download as PPT, PDF1 like997 views
This document provides an overview of jQuery, including what it is, its benefits, how to get started using it, common tasks like selecting elements and applying actions, and some example code. jQuery is a lightweight JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions. It is small in size, works across browsers, and has a large community and ecosystem of plugins and resources.
![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”).[........]](https://image.slidesharecdn.com/kickstartwithjquery-101106143138-phpapp01/85/Kick-start-with-j-query-12-320.jpg)
![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)”)]
…………………..](https://image.slidesharecdn.com/kickstartwithjquery-101106143138-phpapp01/85/Kick-start-with-j-query-13-320.jpg)
![Get selector’s by filtering
Content Filters
:contains(text) [$(“#myMenu li:contains(‘Home’)”)]
:has(selector) [$(“div:has(‘ul’)”)]
:empty [$(“p:empty”)]
…………………..](https://image.slidesharecdn.com/kickstartwithjquery-101106143138-phpapp01/85/Kick-start-with-j-query-14-320.jpg)
![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’]”)]
…………………..](https://image.slidesharecdn.com/kickstartwithjquery-101106143138-phpapp01/85/Kick-start-with-j-query-15-320.jpg)
![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”)]
…………………..](https://image.slidesharecdn.com/kickstartwithjquery-101106143138-phpapp01/85/Kick-start-with-j-query-16-320.jpg)
![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”)]
…………………..](https://image.slidesharecdn.com/kickstartwithjquery-101106143138-phpapp01/85/Kick-start-with-j-query-17-320.jpg)
![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]);
?>](https://image.slidesharecdn.com/kickstartwithjquery-101106143138-phpapp01/85/Kick-start-with-j-query-23-320.jpg)
Kick start with j query
- 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
- 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"=>"[email protected]" ), "phpguru"=>array( "name"=>"Hasin Hyder", "email"=>"[email protected]" ) ); $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:’[email protected]’} $(“#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 : [email protected] </div> </body>
- 26. Why JSON on AJAX Object Literals info = { name:”Ziaul Haq”, email:”[email protected]” } info.name; // Ziaul Haq info.email; // [email protected]
- 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);
- 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 : [email protected] Or Contact me on : www.jquerygeek.com
- 38. Thank You