Intro to jquery. Web Systems 02/17/2012

(1)

Intro to jQuery

Web Systems

(2)

What is jQuery?

• A JavaScript library

• Lightweight (about 31KB for the minified version)

• Simplifies HTML document traversing (DOM), event handling, animations, and more

(3)

<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

(4)

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>

(5)

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}

(6)

<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();

(7)

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

}); });

(8)

jQuery Selectors

• Allow you to manipulate/traverse HTML DOM element • There are 3 types of jQuery Selectors

(9)

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!)}

(10)

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 "#"

(11)

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","font-size":"200%"}) - changes all h1 elements to have a background color yellow and font size to 200%

(12)

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

(13)

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)_{", "}

element-to-attach-event", eventHandler());

o _Ex.

 $(document).on( "click", "p", function(event) { alert("Cool text here!");

});

(14)

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

(15)

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

(16)

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"); });

(17)

jQuery UI

• Official jQuery user interface library

o Basically a set of useful/"official" jQuery plugins

• Convient UI interactions • Useful widgets

• Cool effects

(18)

Using jQuery UI

• Lastest stable version is 1.8.17

o _{http://jqueryui.com/download}

o _{Lets you download only things you want}

(19)

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

(20)

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

(21)

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

(22)

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

(23)

Have a great weekend!

<footer>

http://droto.net/websys/jquery/examples.html for all the examples and more resources.