J Query(04 12 2008) Foiaz


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

J Query(04 12 2008) Foiaz

  1. 1. JQuery 16/10/2008 04/12/2008
  2. 2. Agenda <ul><li>Client Side JavaScript </li></ul><ul><li>Introduction to JQuery </li></ul><ul><li>JQuery Selectors </li></ul><ul><li>JQuery Filters </li></ul><ul><li>JQuery Events </li></ul><ul><li>Other JQuery Effects </li></ul>
  3. 3. What is JavaScript? <ul><li>An interpreted programming language with object oriented capabilities. </li></ul><ul><li>Not Java! </li></ul><ul><ul><li>Originally called LiveScript, changed to JavaScript as a marketing ploy by Sun and Netscape. </li></ul></ul><ul><li>Not simple! </li></ul><ul><ul><li>Although it is loosely typed and can be used by web developers in a “cookbook” fashion, JavaScript is a fully featured programming language with many advanced features. </li></ul></ul>
  4. 4. Client Side JavaScript <ul><li>When JavaScript is embedded in a web browser, it is referred to as Client Side JavaScript. </li></ul><ul><li>Contains an extended set of functionality to interface with the web browser DOM (Document Object Model). </li></ul><ul><li>Objects, such as window and document , and functions, like event detection and handling, are included in Client Side JavaScript. </li></ul>
  5. 5. JQuery <ul><li>Powerful JavaScript library </li></ul><ul><ul><li>Simplify common JavaScript tasks </li></ul></ul><ul><ul><li>Access parts of a page </li></ul></ul><ul><ul><ul><li>using CSS or XPath-like expressions </li></ul></ul></ul><ul><ul><li>Modify the appearance of a page </li></ul></ul><ul><ul><li>Alter the content of a page </li></ul></ul><ul><ul><li>Change the user’s interaction with a page </li></ul></ul><ul><ul><li>Add animation to a page </li></ul></ul><ul><ul><li>Provide AJAX support </li></ul></ul>
  6. 6. What is available with jQuery? <ul><li>Cross browser support and detection </li></ul><ul><li>AJAX functions </li></ul><ul><li>CSS functions </li></ul><ul><li>DOM manipulation </li></ul><ul><li>DOM transversal </li></ul><ul><li>Attribute manipulation </li></ul><ul><li>Event detection and handling </li></ul><ul><li>JavaScript animation </li></ul><ul><li>Hundreds of plugins for pre-built user interfaces, advanced animations, form validation, etc </li></ul><ul><li>Expandable functionality using custom plugins </li></ul>
  7. 7. jQuery Syntax $.func(…); or $(selector).func1(…).func2(…).funcN(…); jQuery Object, can be used instead of jQuery Selector syntax, many different selectors allowed Chainable, most functions return a jQuery object Function parameters $ selector func (…)
  8. 8. Basic JQuery <ul><li>A JQuery object is a wrapper for a selected group of DOM nodes </li></ul><ul><li>Selecting part of document is fundamental operation </li></ul><ul><li>$() function is a factory method that creates JQuery objects </li></ul><ul><li>$(“dt”) is a JQuery object containing all the “dt” elements in the document </li></ul>
  9. 9. Basic JQuery <ul><li>. addClass() method changes the DOM nodes by adding a ‘class’ attribute </li></ul><ul><ul><li>The ‘class’ attribute is a special CSS construct that provides a visual architecture independent of the element structures </li></ul></ul><ul><li>$(“li”).addClass(“emphasize”) will change all occurrences of <li> to <li class=“emphasize”> </li></ul><ul><li>.removeClass(“emphasize”) will the remove the class. </li></ul>
  10. 10. Basic JQuery <ul><li>To make this change, put it in a function and call it when the document has been loaded and the DOM is created </li></ul><ul><ul><li>function doEmph(){$(“dt”).addClass(“emphasize”)} </li></ul></ul><ul><ul><li><body onLoad=“doEmph()”> </li></ul></ul><ul><li>We had to alter the HTML (bad) </li></ul><ul><li>Structure and appearance should be separated! </li></ul><ul><li>Also, onLoad waits until all images etc are loaded. Tedious. </li></ul>
  11. 11. Basic JQuery <ul><li>JQuery provides an independent scheduling point after DOM is created and before images are loaded </li></ul><ul><ul><li>$(document).ready(doEmph); </li></ul></ul><ul><li>No HTML mods required. All done in script. </li></ul><ul><li>Better solution: </li></ul><ul><ul><li>$(document).ready(function(){ </li></ul></ul><ul><ul><ul><li>$(“dt”).addClass(“emphasize”) </li></ul></ul></ul><ul><ul><li>}); </li></ul></ul><html><head> <script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;test.js&quot; type=&quot;text/javascript&quot;></script> …
  12. 12. JQuery Selectors <ul><li>CSS </li></ul><ul><ul><li>p element name </li></ul></ul><ul><ul><li>#id identifier </li></ul></ul><ul><ul><li>.class classname </li></ul></ul><ul><ul><li>p.class element with class </li></ul></ul><ul><ul><li>p a anchor as any descendant of p </li></ul></ul><ul><ul><li>p > a anchor direct child of p </li></ul></ul>
  13. 13. jQuery Selector Examples <ul><li>$( html ) </li></ul><ul><ul><li>$(‘<p><a href=“index.html”>Click here!</a></p>’) </li></ul></ul><ul><li>$ ( elems ) </li></ul><ul><ul><li>$(document), $(window), $(this) </li></ul></ul><ul><ul><li>$(document.getElementsByTagName(“p”)) </li></ul></ul><ul><li>$ ( fn ) </li></ul><ul><ul><li>$(function() { alert(“Hello, World!”) }); </li></ul></ul><ul><li>$ ( expr, context ) </li></ul><ul><ul><li>$(“p”), $(“form”), $(“input”) </li></ul></ul><ul><ul><li>$(“p#content”), $(“#content”), $(“.brandnew”), $(“p span.brandnew:first-child, #content”) </li></ul></ul>
  14. 14. JQuery Filters <ul><ul><li>p:first first paragraph </li></ul></ul><ul><ul><li>li:last last list item </li></ul></ul><ul><ul><li>a:nth(3) fourth link </li></ul></ul><ul><ul><li>a:eq(3) fourth link </li></ul></ul><ul><ul><li>p:even or p:odd every other paragraph </li></ul></ul><ul><ul><li>a:contains(‘click’) links that contain the word click </li></ul></ul>
  15. 15. JQuery Events <ul><li>bind(eventname, function) method </li></ul><ul><ul><li>‘ click’ </li></ul></ul><ul><ul><li>‘ change’ </li></ul></ul><ul><ul><li>‘ resize’ </li></ul></ul><ul><li>$(“a[@href]”).bind(‘click’,function(){ $(this).addClass(‘red’);}); </li></ul>
  16. 16. Other JQuery Effects <ul><li>.css(‘property’, ‘value’) </li></ul><ul><li>.css({‘prop1’:‘value1’, ‘prop2’:’value2’…}) </li></ul><ul><li>E.g. .css(‘color’, ‘red’) </li></ul><ul><li>.hide(speed) or .show(speed) </li></ul><ul><ul><li>Where speed is ‘slow’, ‘normal’ or ‘fast’ </li></ul></ul>
  17. 17. <ul><li>Live Demo </li></ul>