Introduction to jQuery - Speaker Deck

Introduction to jQuery

by Dave Kiss

Embed

Start on current slide

Slide 1

Slide 1 text

Introduction to jQuery @davekiss #jschi

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

sliders @davekiss #jschi

Slide 6

Slide 6 text

Galleries @davekiss #jschi

Slide 7

Slide 7 text

layouts @davekiss #jschi

Slide 8

Slide 8 text

Tooltips @davekiss #jschi

Slide 9

Slide 9 text

Validation @davekiss #jschi

Slide 10

Slide 10 text

using jQuery @davekiss #jschi

Slide 11

Slide 11 text

put it on your page @davekiss #jschi

Slide 12

Slide 12 text

My Doggies ”Adorable

@davekiss #jschi

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

cause|effect @davekiss #jschi

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

My Doggies $(document).ready(function(){ }); ”Adorable

$(‘.dog’) @davekiss #jschi

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

My Doggies $(document).ready(function(){ }); ”Adorable

$(‘.dog’).fadeOut(); @davekiss #jschi

Slide 24

Slide 24 text

My Doggies $(document).ready(function(){ }); ”Adorable

$(‘.dog’).fadeOut(); @davekiss #jschi

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

My Doggies $(document).ready(function(){ }); ”Adorable

@davekiss #jschi

Slide 28

Slide 28 text

My Doggies $(document).ready(function(){ $(‘img’).click(function(){ }); }); ”Adorable

@davekiss #jschi

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

My Doggies $(document).ready(function(){ $(‘img’).click(function(){ }); }); ”Adorable

$(this) @davekiss #jschi

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

My Doggies $(document).ready(function(){ $(‘img’).click(function(){ }); }); ”Adorable

$(this).siblings() @davekiss #jschi

Slide 33

Slide 33 text

My Doggies $(document).ready(function(){ $(‘img’).click(function(){ }); }); ”Adorable

$(this).siblings().fadeOut(); @davekiss #jschi

Slide 34

Slide 34 text

My Doggies $(document).ready(function(){ $(‘img’).click(function(){ }); }); ”Adorable

$(this).siblings().fadeOut(); @davekiss #jschi

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

My Doggies $(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>’); }); });

@davekiss #jschi

Slide 40

Slide 40 text

@davekiss #jschi I am sorry :(