INTRODUCING JQUERY WRITE LESS. DO MORE

jQuery is a JavaScript library

Why jQuery? •  Free and open source • Makes JavaScript sooo much easier • Everybody is doing it •  Lots of plug-ins • Small file size

You can get jQuery in two ways 1.  CDN – Content distribution network

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> Advantages:

Less space on your site (minor) May take advantage of caching (major) Google/M$ use router tricks to serve from local servers (major)

2.  Download and save <script src="scripts/jquery-1.8.3.js"></script> Advantages:

Google/M$/jQuery.com may be down (yeah, right.) Can run your site offline, like at a kiosk or tradeshow

You add jQuery to a page with just a few lines of code <script type='text/javascript'>!$(document).ready(function() {! // initializations! // wiring-up of clicks and other events!});!// all other jQuery coding!</script>!

Dynamically modifying a web page takes just two steps

1.  Select the element(s) 2.  Do something with them

•  Change a property •  Change the content •  Remove the element •  Get information from the element •  Any combination of the above

The DOM is a tree of elements • So how do you select one or more elements?

• Native JavaScript provides •  getElementById(id); •  getElementsByTagName('tag');

• Rigid • Underpowered •  Tough to code

window

document

textarea

input

form

p

image

link article

image

link

div div div

link

link

jQuery is incredibly flexible in selecting elements

$('selector')!

Basic selectors are the simplest types •  ID var theElement = $('#Id');!

• Element type var allDivs = $('div');!var allListElements = $('li');!

• Class var allOfThem = $('.className');!

Advanced selectors give you a more control • Descendent

•  Points to: Tag somewhere inside another tag •  Example: $('#navBar a') // All links under the navBar

• Child •  Points to: Tag directly beneath another tag •  Example: $('#navBar > a') // All links directly within navBar

• Adjacent sibling •  Points to: Tag directly adjacent to another tag •  Example: $('#navBar + a') // The link right next to another

Attribute selectors • Put the attribute in square brackets after the selector •  Targets: elements based on the existence or value of an

attribute. • Examples: $('img[alt]') //images with the alt attribute set!$('input[type="checkbox"]') //checkboxes in the form!$('a[href^="http://"]') //all external links!$('img[src$=".png"]') //all png images!$('a[href*="google.com"]') //all links to Google!

Filters allow even finer-grained control •  :even and :odd •  :first and :last •  :hidden and :visible •  :not() •  :has() •  :contains()

jQuery allows a fluent interface $('#popup')! .width(300)! .height(300)! .text('Hi')! .fadeIn(1000);!

Let's learn to change pages

The rest of the chapter shows formulas for how to change pages.

html() and text() allow us to read and add content to a page //To read the html!var x = $('selector').html();!//To change the html!$('selector').html(newHtml);!//To read the inner text!var x = $('selector').text();!//To change the inner text!$('selector').text(newText);!!

append() and prepend(), before() and after() allow adding content

//To add as the last child of an element!$('selector').append(newHtml);!//To add as the first child of an element!$('selector').prepend(newHtml);!//To add just after an element!$('selector').after(newHtml);!//To change immediately before an element!$('selector').before(newHtml);!!

Replacing and removing selections //Take it out of the DOM!$('selector').remove();!//Replace it !$('selector').replaceWith(newContent);!//Create an exact copy of an element!var x = $('selector').clone();!x.insertAfter('selector');!

Setting and reading classes

/*!Note: The classes must pre-exist. Does not destroy other classes. Merely adds this class.!*/!//Add a class!$('selector').addClass('className');!//Remove a class!$('selector').removeClass('className');!//Add if it isn't there. Remove if it is.!$('selector').toggleClass('className');!!

Setting and reading CSS properties // To read a css property!var x = $(selector).css('property');!// To set a css property!$(selector).css('property','value');!// To set multiple css properties!$(selector).css(! {! 'property1':'value2',! 'property2':'value2'! }!);!

Reading and setting HTML attributes • Reading an attribute var x = $(selector).attr('attributeName');!• Setting an attribute $(selector).attr('attributeName',value);!• Removing an attribute $(selector).removeAttr('attributeName');!

each(function(){}); allows us to run code on each matched member in the set $('a[href^="http://"]').each(function() {//do something});!

this and $(this) this $(this)

A JavaScript built-in A jQuery thing

Will point to the entire wrapped set

Will point to each thing in the wrapped set

Can be accessed any time

Can only be accessed via jQuery

Conclusion •  jQuery is a library that helps you to write JavaScript much

faster and effectively • You copy it and link to your copy or just link to the CDN • With jQuery you can alter just about anything on a page

using selectors, which are very flexible • We saw how to do several things:

•  Replacing text and html •  Apply and remove CSS classes •  Adding and removing HTML attributes