jquery intro
DESCRIPTION
Intro to jQuery talk given to Atlanta.PM 1/27/2010TRANSCRIPT
![Page 1: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/1.jpg)
jQuery
Jason Noblehttp://jasonnoble.org
Code Download: http://jasonnoble.org/jquery/jquery.zip
![Page 2: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/2.jpg)
History
• John Resig hints of a JavaScript library to use CSS selectors with a more succint syntax than existing libraries (2005)
• First release January 2006
![Page 3: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/3.jpg)
Benefits
• Easy to play with the DOM• Add JS effects• AJAX• Cross-browser Compatibility
– jQuery handles browser caveats for you• CSS3 Selectors• Helpful Utilities
![Page 4: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/4.jpg)
Benefits (cont.)
• jQuery UI– Useful effects– Advanced UI widgets– UI Themes
• Plugins– jQuery is easily extensible
• Widespread adoption
![Page 5: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/5.jpg)
Firefox/Firebug Combo
• Firefox• Firebug plugin
![Page 6: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/6.jpg)
Let’s get Started
• curl -o jquery-1.4.4.min.js http://code.jquery.com/jquery-1.4.4.min.js
• vi hello.html
![Page 7: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/7.jpg)
jQuery Function
• Adding jQuery to a HTML page gives you access to the jQuery function– jQuery– jQuery(alert(‘Hello’))
• jQuery function is aliased as $– $– $(alert(‘Hello’))
![Page 8: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/8.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 9: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/9.jpg)
DOM (Cont.)
![Page 10: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/10.jpg)
Elements 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 11: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/11.jpg)
Elements 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”• Multiple classes on an element are seperated
by spaces
![Page 12: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/12.jpg)
CSS Selectors
• # selects an element via id– div#heading
• <div id=“heading”>
• . selects an element via class– div.heading
• <div class=“heading”>
• Bare words selects HTML tags– span
• <span>
![Page 13: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/13.jpg)
Update our HTML
![Page 14: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/14.jpg)
jQuery Statements
selector action parameters jQuery(‘p’) .css (‘color’, ‘blue’); $(‘p’) .css (‘color’, ‘blue’);
$(‘p’) .css (‘font-size’, ‘35px’);
![Page 15: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/15.jpg)
jQuery Statements
• $('#one').css('color', 'green');
• $('.not_first').css('font-size', '22pt');
• $('p.first').html('This is better');
![Page 16: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/16.jpg)
Document Ready Event
• When our document is ready, run our function
<script> $(document).ready(function() { alert(‘Welcome to my page!’); });</script>• This is a fairly common code snippet
![Page 17: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/17.jpg)
Play with tables
![Page 18: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/18.jpg)
jQuery filters
• Removes certain elements– $(‘table tr:even’) # => 0, 2, 4, 6…– $(‘table tr:odd’) # => 1, 3, 5, 7…– $(‘table tr:first’) # => 0– $(‘table tr:last’) # => Last row– $(‘table tr:eq(3)’) # => Third row
![Page 19: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/19.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 20: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/20.jpg)
Playing with Ajax
• Asynchronous JavaScript and XML• Allows you to update elements on your
page without refreshing the entire page• Google suggest was one of the first
sites to use it (2005)
![Page 21: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/21.jpg)
load.html
![Page 22: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/22.jpg)
Ajax Content
![Page 23: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/23.jpg)
ajaxStart / ajaxStop
• $(document).ajaxStart(…)– Called when an ajax request is started
• $(document).ajaxStop(…)– Called when an ajax request is complete
![Page 24: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/24.jpg)
$(selector).click(…)
• Executes code when a given div/button/etc is clicked
![Page 25: jQuery Intro](https://reader033.vdocuments.net/reader033/viewer/2022061113/545aebe0b1af9fba5d8b574f/html5/thumbnails/25.jpg)
Username Validation
• Uses a jQuery plugin (jquery.validate)• http://bassistance.de/jquery-plugins/jque
ry-plugin-validation/