Intro to jQuery

Alan Hechthttp://alanhecht.me

Jason Noblehttp://jasonnoble.org

Benefits

• Shallow learning curve, especially compared to other frameworkso Easy to play with the DOMo Easily add simple effects

• Cross-browser Compatibilityo jQuery handles browser caveats for you

• CSS3 Selectors

• Helpful Utilities

Benefits (cont.)

• jQuery UIo Additional useful effectso Advanced UI widgetso UI Themes

• Pluginso jQuery is easily extensible

• AJAX

• Widespread adoption

Firefox/Firebug Combo

• Firefox• Firebug plugin

• Enable the script console in order to execute JavaScript

Let’s get started

• curl -o jquery-1.5.1.min.js http://code.jquery.com/jquery-1.5.1.min.js

• Go to jquery.com- Click on ‘Download( jQuery );’- Right click and select ‘Save Page As…’

JavaScriptGood to know for jQuery

• Functions

• JavaScript Object Notation (JSON)

JavaScript Functions• Functions can be anonymous

JavaScript Functions• Functions can be assigned to variables

- Variables can be called like a function

JavaScript Object Notation (JSON)

• Serialized JavaScript objects

• Collection of key-value pairs which represent an object

• Functions can be used as a value

JavaScript Object Notation

• Used to send data when making AJAX calls to the server

Document Object Model (DOM)

• Not specific to jQuery

• Standard way of representing objects in HTML that all browsers follow

• Hierarchal representation of your HTML

• Parent and children elements

• Each element can have an id and/or one or more class attributes

HTML File

HTML File - DOM

Element id

• Uniquely identifies the element

<div id=“footer”>Thanks for visiting</div>

• That div’s id is “footer”. Should only be one “footer” id.

Element class

• Multiple page elements can have the same type of class

<p class=“warning”>Sorry….</p><span class=“warning error”>Please try again</span>

• Classifies elements as a “warning”• Used to attach styles to elements• Multiple classes on an element are seperated by

spaces

CSS Selectors

• Originally designed to select elements on an HTML page to be styled

• jQuery uses CSS Selectors to create a set of one or more elements that will be the input to subsequent operations

CSS Selectors

• # selects an element via ido div#headingId

<div id=“headingId”>

• . selects an element via classo div.headingClass

<div class=“headingClass”>

• Can select just an id or classo #headingId .headingClass

• Can select an element, id, and a classo div#headingId.headingClass

CSS Selectors

• Bare words selects HTML tagso span

<span>

• Can filter on attributes within HTML tagso input[type = ‘button’]

<input type=“button” />

CSS Selectors

• Space between words specifies ancestor relationshipo table td

• . ‘>’ between words specifies parent/child relationshipo table>tr

jQuery Function

• Adding jQuery to a HTML page gives you access to the jQuery functiono jQueryo jQuery(alert(‘Hello’))

• jQuery function is aliased as $, which is a common short-cuto $o $(alert(‘Hello’))

jQuery Selectors

• $(‘<CSS Selector>’) or jQuery(‘CSS Selector>’)

• jQuery selectors can return an individual element or a set

• $('p#first') - <p id=“first”>• $(‘table>tr’) - collection of <tr> elements

jQuery Statements

selector action parametersjQuery(‘p’) .css (‘color’, ‘blue’);$(‘p’) .css (‘color’, ‘blue’);

$(‘p’) .css (‘font-size’, ‘35px’);

$( ‘p’ ) .html ( ‘<a href=“/foo”>Home</a>’ );

jQuery Statements

• Statement actions can be chained

• Each action performed on all members of the set

• $('tr').css('font-size', '22pt').html(‘Text’)

Play with tables

jQuery filters

• Filters certain elementso $(‘table tr:even’) => Rows 0, 2, 4, 6…o $(‘table tr:odd’) => Rows 1, 3, 5, 7…o $(‘table tr:first’) => First rowo $(‘table tr:last’) => Last rowo $(‘table tr:eq(3)’) => Third row

Play with tables (cont.)

$('table tr:even').css('background-color', 'lightgrey')

$('table tr:first').css('font-size', '64pt')

$('table tr td').filter(function(index) {return index % 3 == 2;}).css('color', 'red')

Many more selectors: http://api.jquery.com/category/selectors/

jQuery Effects

• jQuery library provides animation and effect calls, for example:- fadeIn()- fadeOut()- show()- hide()- toggle()

• http://api.jquery.com/category/effects

Document Ready Event

• When our document is ready, run our function

<script>$(document).ready(function() {alert(‘Welcome to my page!’);});</script>

• Setup usually takes place in this event

$(selector).click(…)

• Executes code when a given div/button/etc is clicked

• Set up in the document ready event