Dev Days – Cody Lindley on jQuery

Cody Lindley (Ning)

coauthor of JQuery Cookbook, due out next month
Authored a pdf book of examples called JQuery Enlightenment

jQuery – Intro for Developers

Who uses JQuery?

35% of all web pages running Javascript are running jQuery. 1 out of all 5 sites.

What is JQuery?

– A Javascript library
– helps ealing with the DOM
– Simplifies DOM events and animations

JS Bin – a very cool tool that allows testing of Javascript and HTML.

Shows an example of coloring every odd row of every table on a web page in one line of JS code. Adds roll-over coloring with a couple of more lines.

Why use JQuery?

Helps simplify and speed up web development
Allows us to avoid common headaches associated with browser development
Provides a large pool of plugins.
Large and active community
Tested on 50 browsers on 11 platforms
It’s for both coders and designers

Where to get jQuery?

Download source from google code (moving to github soon)
Use a CDN

Concept 1: Find something, do something.
– use the jQuery function to find an element in a page, and then do something to it.

Concept 2: Create something, do something.
– You can create elements in the DOM.

Concept 3: Chaining
Can use a single jQuery wrapper set and statement to execute a sequence of methods.

Concept 4: Implicit Iteration
E.g. when we call add class it loops over every element contained in the wrapper set.

Concept 5: jQuery() parameters
First parameter – can be passed CSS selectors, HTML, DOM elements, or a function shortcut.
Second parameter – can pass CSS selectors or DOM elements. Tells the engine the context in which you want to search. Default is the document or body element. Important for optimizing JS to narrow search.

Overview of jQuery API
– Core
– Selectors – see http://codylindley.com/jqueryselectors
– Attributes
– Traversing – can manipulate text nodes with the content method.
– Manipulation
– CSS
– Events
– Effects
– Ajax
– Utilities

Put your Javascript code at the bottom of the page to speed up when it executes.

Shows an example of creating a jQuery plugin in 6 steps.