jQuery

write less, do more

JavaScript Library

Client-side Scripting

Saves people's lifes since 2006

Does the dirty work for you

by “dirty work”, I mean W3C DOM

Document Object Model

Object Model for Documents

Object Model for HTML

HTML <=> DOM

HTML <=> DOM <=> JS

API between HTML & JS

W3C DOM

ugly & tedious

jQuery

jQuery Manipulation Attributes Effects Selectors Traversing Plugins Ajax Events

Install

Hello World

DOM is a tree

|-> Document |-> <html> |-> <body> |-> <h1> |-> text
node |-> <p> |-> <a> |-> <br> |-> <a>

$('h1').text('hello world')

$('h1').text('hello world') Select and manipulate

$ I am jQuery

$('h1') the Selector

.text('hello world') Set text

.text() Get text

var text = $('h1').text(); console.log(text);

$('h1') .text('hello') .fadeOut(); Chaining!

Selectors

Selects the nodes in the tree

Act just like CSS Selectors

$('h1') All h1 elements

$('p') All p elements

$('h1.banana') All h1 elements with class banana

$('h1#chuck') All h1 elements with id chuck

$('.banana') All elements with class banana

$('[type=”text”]') All elements with attribute type = text

Manipulations

Play with a node

How a node looks like

Traversing

Visit other nodes

Events

Nodes are responsive

$(...).someEvent(callback)

Grabs you data

jQuery

jQuery

More Decks by nctunba

Other Decks in Programming

Featured

Transcript