jQuery

1
jQuery

• A Javascript Framework

2
CSS Selectors

• div p
• grabs all p tags within a div
• .info
• grabs all tags will a class of info

3
Getting Elements with JS

• document.getElementById("ID")
• Returns DOM object with and id of ID
• getElementsByTagName("TAG")
• Returns an array of objects, all of type TAG

4
jQuery to Select Elements

• (id)
• get element by ID
• (tag)
• get element by tag
• (".classname")
• get element by class
• returns array pointing at all HTML elements that
  match the select criteria

5
Aggregate Selects

• first
• last
• even
• odd
• ("divfirst") gets all first children elements
  of any ltdivgt tags

6
XPATH-y/DOM-y Selects

• Matches for
• Parents
• Children
• Siblings
• ("div p")
• gets all the ltpgt tags within any ltdivgt tags

7
Manipulating Objects

• object.html()
• Returns objects innerHTML
• object.html(some html)
• Sets objects html
• (".alert").html(Im of class alert)
• Sets the html of all elements with a class of
  alert to Im of class alert

8
Controlling CSS

• object.css(property, value)
• Also, a bunch of shortcut properties detailed
• http//docs.jquery.com/CSS
• (".alert").css(background-color, red)
• Sets the background color of all elements
  belonging to the alert class to red

9
Instantiating jQuery

• Link to the jQuery source
• Local or remotely
• ltscript src"http//code.jquery.com/jquery-latest.
  js"gtlt/scriptgt
• Put your code in the ready function (inside a
  script tag)
• (document).ready(function()
• //YOUR CODE HERE
• )

10
Hello World

• Create an HTML page with the following in the
  body
• ltdiv idoutputgtlt/divgt
• In the ready function
• Select the div with an id of output
• Set the HTML of that element with
• hello world!

11
Why Learn Something New?

• Consistent Access and Control
• DOM
• Events
• Styles
• Forget about difference between browsers
• Define object behaviors before the objects exist
• Cool, premade functionality (plugins)

12
Slider Plugin

• .slider()
• creates a slider
• Need to give the slider
• Properties
• Actions to run when events occur

13
Slider Plugin

• Add the following scripts to your page
• ltscript type"text/javascript"
  src"http//jqueryui.com/latest/jquery-1.3.2.js"gtlt
  /scriptgt
• ltscript type"text/javascript"
  src"http//jqueryui.com/latest/ui/ui.core.js"gtlt/s
  criptgt
• ltscript type"text/javascript"
  src"http//jqueryui.com/latest/ui/ui.slider.js"gtlt
  /scriptgt
• To keep jQuery light, you add only the scripts
  for the functions that you need

14
A home for the Slider

• Add a 2 divs to the ltbodygt of the page
• ltdiv idmyslidergtlt/divgt
• ltdiv iddisplaygtlt/divgt

15
Slider

• Add a document.ready function to the your page
  (inside a ltscriptgt tag in the head of your
  document)
• Refer to the jQuery documenation
• http//docs.jquery.com/UI/Slider

16
Creating A Slider

• ("myslider").css('width', '200px')
• ("myslider ").slider()
• ("myslider ").slider('option', 'min', 0)
• ("myslider ").slider('option', 'max', 9)
• (" myslider").bind('slide', function(event, ui)
  
• ("display").html(ui.value)
• )

17
I want my stuff to look.

• Different
• jQuery Theme manager
• http//jqueryui.com/themeroller/

18
In Class Work

• Get the slider working
• (such that as you slide it, it prints out the
  current value on the page
• Print the word representation for the current
  slider value
• Define an array (with normal js) at the top of
  the document

19
(No Transcript)