JQuery

1,822 views
1,629 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,822
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Hello World - JQuery</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ // When document is ready to be manipulatedjQuery(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clickedjQuery("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default actionevent.preventDefault(); } //]]> </script></head><body><p><a href="http://www.google.com">Google</a></p></body></html>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Hello World - JQuery</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ // When document is ready to be manipulated $(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked $("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default actionevent.preventDefault(); } //]]> </script></head><body><p><a href="http://www.google.com">Google</a></p></body></html>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Hello World - JQuery</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!");event.preventDefault(); }); }); //]]> </script></head><body><p><a href="http://www.google.com">Google</a></p></body></html>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Hello World - JQuery</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!");event.preventDefault(); }); }); //]]> </script></head><body><p><a href="http://www.google.com">Google</a></p></body></html>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Hello World - JQuery</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $().ready(function(){ $("a").click(function(event){ $("h1")[0].innerHTML = "New Title!";event.preventDefault(); }); }); //]]> </script></head><body><h1>Example</h1><p><a href="">Change Title!</a></p></body></html>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Hello World - JQuery</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $().ready(function(){ $("a").click(function(event){ $("<p>New Element</p>").insertAfter("#here");event.preventDefault(); }); }); //]]> </script></head><body><h1>Example</h1><p><a href="">Add element!</a></p><div id="here"></div></body></html>
  • JQuery

    1. 1. Short into to JQuery Jussi PohjolainenTampere University of Applied Sciences
    2. 2. JQuery?• Motivation – Simple things may require lot of coding – Common browsers are different and implementation varies• Solution, use a framework – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
    3. 3. How?• Download JQuery file (http://jquery.com/) – http://code.jquery.com/jquery-1.7.1.min.js• Make your xhtml page and reference to the file in script block• Make your code and use JQuery functions!
    4. 4. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ // When document is ready to be manipulated jQuery(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked jQuery("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]> </script>
    5. 5. Some Basic Syntax• JQuery can be used in two ways: – JQuery() – Or – $()• $ is an alias to JQuery()! $ more commonly used
    6. 6. <script type="text/javascript" src="jquery.js"></script><script type="text/javascript">//<![CDATA[// When document is ready to be manipulated$(document).ready( pageReadyToBeManipulated );function pageReadyToBeManipulated() { // If link is clicked $("a").click( linkClick );}function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault();}//]]></script>
    7. 7. // USING ANONYMOUS FUNCTIONS<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">//<![CDATA[ $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); });//]]></script>
    8. 8. // EVEN SHORTER SYNTAX, FORGET THE DOCUMENTPARAMETER<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $().ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
    9. 9. Getters in the Traditional Way• getElementsById• getElementsByTagName• getAttribute
    10. 10. JQuery and Selectors• Select all h1 elements – $(“h1”)• Select the first one – $(“h1”)*0+• Add contents – $(“h1”)*0+.innerHTML = “hello!”;• Lot of different selectors – http://api.jquery.com/category/selectors/
    11. 11. Creating Elements in Traditional Way• createElement• createTextNode• setAttribute• appendChild• removeChild
    12. 12. JQuery Insert$().ready(function(){ $("a").click(function(event){ // Insert the new element after element with id here $("<p>New Element</p>").insertAfter("#here"); event.preventDefault(); }); });
    13. 13. Manipulation Functions• .addClass()• .after()• .append()• .css()• …• See: http://api.jquery.com/category/manipulation/
    14. 14. Some Effects: Lot of Anim Functions$(#clickme).click(function() { $(#book).slideUp(slow, function() { // Animation complete. });});

    ×