Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (18)
Similar a Short intro to JQuery and Modernizr
Similar a Short intro to JQuery and Modernizr (20)
Más de Jussi Pohjolainen
Más de Jussi Pohjolainen (20)
Último
Último (20)
Short intro to JQuery and Modernizr
- 1. Short into to JQuery and Modernizr Jussi Pohjolainen Tampere University of Applied Sciences
- 2. JQuery? • Mo?va?on – Simple things may require lot of coding – Common browsers are different and implementa?on varies • Solu?on, use a framework – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, anima?ng, and Ajax interac?ons for rapid web development.
- 3. How? • Download JQuery file (hOp://jquery.com/) – hOp://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 func?ons!
- 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. Some Basic Syntax • JQuery can be used in two ways: – JQuery() – Or – $() • $ is an alias to JQuery()! $ more commonly used
- 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. // 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. // EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER <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. GeOers in the Tradi?onal Way • getElementsById • getElementsByTagName • getAttribute
- 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 – hOp://api.jquery.com/category/selectors/
- 11. Crea?ng Elements in Tradi?onal Way • createElement • createTextNode • setAttribute • appendChild • removeChild
- 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. Manipula?on Func?ons • .addClass() • .afer() • .append() • .css() • … • See: hOp://api.jquery.com/category/ manipula?on/
- 14. Some Effects: Lot of Anim Func?ons $('#clickme').click(function() { $('#book').slideUp('slow', function() { // Animation complete. }); });
- 15. MODERNIZR
- 16. Modernizr • Small JS library for detec?ng browser features • Replaces highly unreliable user agent sniffing • Feature detec?on for each browser what the browser can or cannot do • Tests over 40 features – Creates Modernizr object containing the results
- 17. How • Download and install modernizr.js • Add – <html class=“no-‐js”> • Modernizr replaces this – <html class=“canvas canvastext geoloca?on..”> • Classes for every feature it detects!
- 19. Adding CSS
- 20. Result
- 21. HTML5 and Video
- 22. Solu?on