Intro to jQuery
-
Upload
alan-hecht -
Category
Technology
-
view
1.370 -
download
0
description
Transcript of Intro to jQuery
![Page 1: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/1.jpg)
Intro to jQuery
Alan Hechthttp://alanhecht.me
Jason Noblehttp://jasonnoble.org
![Page 2: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/2.jpg)
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
![Page 3: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/3.jpg)
Benefits (cont.)
• jQuery UIo Additional useful effectso Advanced UI widgetso UI Themes
• Pluginso jQuery is easily extensible
• AJAX
• Widespread adoption
![Page 4: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/4.jpg)
Firefox/Firebug Combo
• Firefox• Firebug plugin
• Enable the script console in order to execute JavaScript
![Page 5: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/5.jpg)
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…’
![Page 6: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/6.jpg)
JavaScriptGood to know for jQuery
• Functions
• JavaScript Object Notation (JSON)
![Page 7: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/7.jpg)
JavaScript Functions• Functions can be anonymous
![Page 8: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/8.jpg)
JavaScript Functions• Functions can be assigned to variables
- Variables can be called like a function
![Page 9: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/9.jpg)
JavaScript Object Notation (JSON)
• Serialized JavaScript objects
• Collection of key-value pairs which represent an object
• Functions can be used as a value
![Page 10: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/10.jpg)
JavaScript Object Notation
• Used to send data when making AJAX calls to the server
![Page 11: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/11.jpg)
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
![Page 12: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/12.jpg)
HTML File
![Page 13: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/13.jpg)
HTML File - DOM
![Page 14: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/14.jpg)
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.
![Page 15: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/15.jpg)
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
![Page 16: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/16.jpg)
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
![Page 17: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/17.jpg)
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
![Page 18: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/18.jpg)
CSS Selectors
• Bare words selects HTML tagso span
<span>
• Can filter on attributes within HTML tagso input[type = ‘button’]
<input type=“button” />
![Page 19: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/19.jpg)
CSS Selectors
• Space between words specifies ancestor relationshipo table td
• . ‘>’ between words specifies parent/child relationshipo table>tr
![Page 20: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/20.jpg)
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’))
![Page 21: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/21.jpg)
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
![Page 22: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/22.jpg)
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>’ );
![Page 23: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/23.jpg)
jQuery Statements
• Statement actions can be chained
• Each action performed on all members of the set
• $('tr').css('font-size', '22pt').html(‘Text’)
![Page 24: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/24.jpg)
Play with tables
![Page 25: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/25.jpg)
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
![Page 26: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/26.jpg)
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/
![Page 27: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/27.jpg)
jQuery Effects
• jQuery library provides animation and effect calls, for example:- fadeIn()- fadeOut()- show()- hide()- toggle()
• http://api.jquery.com/category/effects
![Page 28: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/28.jpg)
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
![Page 29: Intro to jQuery](https://reader036.fdocuments.us/reader036/viewer/2022062703/554f45acb4c905423f8b48cc/html5/thumbnails/29.jpg)
$(selector).click(…)
• Executes code when a given div/button/etc is clicked
• Set up in the document ready event