22 Jquery1
22 Jquery1
What is jQuery?
jQuery
less, do more:
$
("p.neat").addClass("ohmy").show("s
low");
Performance
Plugins
Its
standard
and fun!
Example: Show/Hide
Button
window.onload
We
$(document).ready(function()
{ // do
The direct
jQuery translation
The jQuery$(function()
way
stuff with th
do I obtain a
reference to the node that I want.
Traversal:how do I move
around the DOM tree.
Node Manipulation:how do I
get or set aspects of a DOM node.
Tree Manipulation:how do I
change the structure of the page.
description
getElementById
getElementsByTagName
getElementsByName
querySelector*
querySelectorAll*
jQuery Selectors
http://api.jquery.com/category/sel
ectors/
jQuery equivalent
getElementById("id")
$("#id")
getElementsByTagName("tag") $("tag")
getElementsByName("somena
me")
$("[name='somename']")
querySelector("selector")
$("selector")
querySelectorAll("selector")
$("selector")
Exercise
Use
Use
jQuery terminology
the
jQuery function
jQuery object
elements
Using $ as a wrapper
$adds
can
usequerySelectorAll()andquerySelector()o
n any DOM object.
When you do this, it simply searches from
that part of the DOM tree downward.
Programmatic
equivalent of a CSS context
var
list = document.getElementsByTagName("ul")[0];
varselector
specials = list.querySelectorAll('li.special');
<p>
description
firstChild, lastChild
childNodes
nextSibling,
previousSibling
parentNode
19
CS380
20
HTML
Q:
21
versing/
jQuery tutorials
Code
Academy
http
://www.codecademy.com/courses/youand-jquery/0?curriculum_id=4fc3018
f74258b0003001f0f#!/
exercises/0
Code
School:
http://
www.codeschool.com/courses/jquery-airfirst-flight