Upload
alan-hecht
View
1.368
Download
0
Tags:
Embed Size (px)
DESCRIPTION
ATLRUG Emerald City programming groupSaturday, March 12, 2011
Citation preview
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