Introduction to jQuery

Introduction to jQuery @davekiss #jschi

jQuery is a FRAMEWORK A collection of code “shortcuts” to
more diﬃcult code that allow for easier development. @davekiss #jschi

jQuery is A collection of code “shortcuts” to more diﬃcult
code that allow for easier development. a FRAMEWORK Javascript All of the things that jQuery does CAN BE and ARE done in Javascript @davekiss #jschi

jQuery is used on over 63% of the top 10,000
websites. @shayhowe, via http://trends.builtwith.com @davekiss #jschi

sliders @davekiss #jschi

Galleries @davekiss #jschi

layouts @davekiss #jschi

Tooltips @davekiss #jschi

Validation @davekiss #jschi

using jQuery @davekiss #jschi

put it on your page <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> @davekiss #jschi

<!DOCTYPE html> <html> <head> <title>My Doggies</title> </head> <body> <img src=”dexter.jpg”
class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> @davekiss #jschi

getting ready $(document).ready(function(){ }); @davekiss #jschi

jquery == $ $(document).ready(function(){ }); $ @davekiss #jschi

jquery selectors $(document).ready(function(){ }); A selector indicates the item(s) that
we are referencing during a jQuery call. @davekiss #jschi

jquery events $(document).ready(function(){ }); An event describes what we're waiting
for to happen to the selector so that we can perform a resulting action. @davekiss #jschi

jquery actions $(document).ready(function(){ }); An action is what we're going
to do once the event occurs @davekiss #jschi

cause|effect @davekiss #jschi

take a guess $(document).ready(function(){ }); @davekiss #jschi

How do i select an element? How don’t you? ID
Class Form Filters Custom Multiple Element Attribute Hierarchical Pseudo-Class @davekiss #jschi

<!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>
$(document).ready(function(){ }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(‘.dog’) @davekiss #jschi

what kind of things can you do? What can’t you
do? Change the position Add a border Create a tooltip Edit the attributes Modify a class Fade it out Get the height Submit a form Remove it Swap the text @davekiss #jschi

$(document).ready(function(){ }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(‘.dog’).fadeOut(); @davekiss #jschi

$(thing).event(function() { $(another-thing).action(); }); @davekiss #jschi

nested events Allow us to wait for, or “listen” for
another event to happen inside of the original event. @davekiss #jschi

$(document).ready(function(){ }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> @davekiss #jschi

$(document).ready(function(){ $(‘img’).click(function(){ }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> @davekiss #jschi

this keyword Use “this” to select the element which was
referenced inside of the original selector. @davekiss #jschi

$(document).ready(function(){ $(‘img’).click(function(){ }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(this) @davekiss #jschi

jquery traversal A way to indirectly select an element(s) by
describing it relative to other elements. @davekiss #jschi

$(document).ready(function(){ $(‘img’).click(function(){ }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(this).siblings() @davekiss #jschi

$(document).ready(function(){ $(‘img’).click(function(){ }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(this).siblings().fadeOut(); @davekiss #jschi

practical examples Animating menus Fading thumbnails Filtering search results Calculating
position values Changing colors in the UI Providing user feedback Using plugins @davekiss #jschi

thank you Resources http://jsforcats.com http://stackoverﬂow.com http://learn.shayhowe.com http://oscarotero.com/jquery http://www.appliedjquery.com

custom selectors Allow you to add your own rules and
criteria for selecting elements on the page. @davekiss #jschi

$(document).ready(function(){ $.extend($.expr[“:”], { troublemaker: function(e) { return $(e).attr(‘data-trouble’) > 8; } }); $(‘.dog:troublemaker’).click(function(){ $(this).after(‘<p>I am sorry :(</p>’); }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” data-trouble=”10” /> <img src=”kima.jpg” class=”dog” data-trouble=”6” /> </body> </html> @davekiss #jschi

$(document).ready(function(){ $.extend($.expr[“:”], { troublemaker: function(e) { return $(e).attr(‘data-trouble’) > 8; } }); $(‘.dog:troublemaker’).click(function(){ $(this).after(‘<p>I am sorry :(</p>’); }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” data-trouble=”10” /> <img src=”kima.jpg” class=”dog” data-trouble=”6” /> </body> </html> @davekiss #jschi I am sorry :(

Introduction to jQuery

Introduction to jQuery

More Decks by Dave Kiss

Other Decks in Programming

Featured

Transcript