Intro to jquery Web Systems 02/17/2012
What is jquery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event handling, animations, and more o "write less, do more"
<aside>minification Removal of all unnecessary characters in code o e.g. whitespace new line chars, and comments Reduces amount of data needed to be transfered o Smaller file size = quicker page loads, but less readability A lot of tools that compress the source code for you o jscompress.com is just one
How To Add jquery Lastest stable version is 1.7.1 Download it and store locally o <script type="text/javascript" src="jquery.js"></script> Use the hosted jquery library o <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jque ry.min.js"></script> o <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery- 1.7.1.min.js"></script>
jquery Syntax $(selector).action(); o $ (typically) used to define jquery o Selector - HTML element to "query" or find o Action - What to do jquery action to perform
<aside> Defining jquery $ is shorthand for the standard function (full name is jquery) o $(document).ready = jquery(document).ready o Syntactically the same Problem: '$' is used as shorthand for other JavaScript library objects There's a way to get around this: o jquery noconflict() method o Ex. var jq = jquery().noconflict(); jq(document).ready( function () { jq("p").hide(); });
Event Handlers jquery methods called when an event is "triggered" or "fired" It's common to put most jquery functions within $ (document).ready(function) o This waits until the entire page is loaded $(document).ready(function() { $("p.change").click(function() { //do something here }); });
jquery Selectors Allow you to manipulate/traverse HTML DOM element There are 3 types of jquery Selectors o (Think of the CSS lectures!)
Element Selectors jquery uses CSS to select HTML elements $("h1") - selects all <h1> elements $("p.fname") - selects all <p> with the class = "fname" $("h2#lname") - selects the <td> with the id = "lname" $("#contact") - selects all elements with id = "contact" o (There should only be one!) http://droto.net/websys/jquery/element-selectors.html
Attribute Selectors jquery uses XPath to select elements with the given attributes $("[href]") - selects all elements with the href attribute $("[name = 'fname']") - selects all elements where the name attribute is equal to "fname" $("[href!='#']") - selects all elements with href attribute does NOT equal "#" http://droto.net/websys/jquery/attribute-selectors.html
CSS Selectors Changes the CSS properties of the HTML elements $(selector).css("css-property", "value"); o Can pass just the property to get the current value (the first matched element is returned) o Can pass multiple properties $("h1").css("color", "green") - changes the color of all h1 elements to green $("h1").css({"background-color":"yellow","fontsize":"200%"}) - changes all h1 elements to have a background color yellow and font size to 200% http://droto.net/websys/jquery/css-selectors.html
jquery HTML Manipulation jquery gives you some methods to manipulate the DOM.addClass() - lets you add one or more classes to the element.html() - sets or returns the content (innerhtml) of a element.before() - adds content before the given element.val() - sets or gets the value of a (form) element http://droto.net/websys/jquery/html-manipulation.html
jquery HTML Manipulation Cont. Ok cool, but what about this: You dynamically add a new element (via jquery or some other method) and want to bind an event to it. You can use the.on() method o $(parent-element-to-monitor).on("event(s)", "elementto-attach-event", eventhandler()); o Ex. $(document).on( "click", "p", function(event) { alert("cool text here!"); }); http://droto.net/websys/jquery/jq-on.html
jquery Effects The "old" way to do hide, show, slide, toggle, fade, and animate. (A lot of this can be done with CSS3 now). $("p#hideme").hide() - hides the p element with the id $("h1").fadein() - does a fade in animation to all h1 elements
jquery Effects (Callbacks) Cont. The callback parameter Waits to execute a function until after the parent function is executed Useful since JavaScript is a interpreted language o Since JS executes line by line
jquery Effects (Callbacks) Cont. What's the difference between these two functions? $("p").hide(1000); alert("the paragraph is now hidden"); $("p").hide(1000,function(){ alert("the paragraph is now hidden"); }); http://droto.net/websys/jquery/callback.html
jquery UI Official jquery user interface library o Basically a set of useful/"official" jquery plugins Convient UI interactions Useful widgets Cool effects Easy to use theme framework
Using jquery UI Lastest stable version is 1.8.17 o http://jqueryui.com/download o Lets you download only things you want Just have to include the.js and.css files on your pages
Some Basic UI Interactions Draggable - lets you make any DOM elements draggable Resizable - lets you resize any DOM element Selectable - makes a DOM element, or group of elements, selectable http://droto.net/websys/jquery/jqui-interactions.html
Useful Widgets Datepicker - A highly configurable UI datepicker Autocomplete - Allows a Google Search like autocomplete function Button - Makes making things that aren't typically buttons be buttons Tabs - Used to break content into different sections Dialog - Similar to JS alert, but more configureable http://droto.net/websys/jquery/jqui-widgets.html
jquery UI Effects Basically some convenience methods that extend the functionality of jquery Animate - extends the core jquery animate function to animate by color Hide/Show - enables animation for the effects switchclass - lets you switch from one class to another
jquery UI Themes jquery UI plugins are all styled by CSS (both the core jquery UI style and plugin specific style) Makes it easy to keep the look and feel consistent Given the ability to create your own customized theme http://jqueryui.com/themeroller/
<footer> http://droto.net/websys/jquery/examples.html for all the examples and more resources. Have a great weekend!