DOM tree and main objects What is jQuery Selectors Attributes CSS Events Animation Other helper functions plug-ins Tools and inspectors links

<p title="The test paragraph">This is a sample of some <b>HTML you might<br>have</b> in your document</p>

To access Dom tree nodes› document.getElementById('id of paragraph') › document.getElementsByTagName('p')[indexOfParagraph]› window.document.childNodes[0].childNodes[1].childNodes[4]

Winodw› Main properties and methods:

Alert() Close() Document Location Open() Print() resizeTo() scrollTo() innerWidth, innerHeight

Document› Main properties and methods:

getElementById(id) getElementsByName(name) getElementsByTagName(name) Forms Images

Element var imgObj = document.getElementById('img1');

› Main properties and methods:› attributes[]› childNodes[]› className› innerHTML

Just another framework Browser compatibility VS support

By ID : $('#id'); By class : $(‘.id'); By tag : $(‘tag')[index]; By property: (“tag[property=‘value']") More:

› http://docs.jquery.com/Selectors

Read attribute: $("em").attr("title"); Set attribute: $("em").attr("title”,”hello”); Set multimple attributes:

$("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" });

Set class: $("p:last").addClass("selected"); Read/set html: $(“#id”).html(); - $

(“#id”).html(‘html value’); Read/set text: $(“#id”).text(); - $

(“#id”).text(‘text value’);

Read/set CSS: › $(this).css({'background-color‘});› $(this).css({'background-color' : 'yellow',

'font-weight' : 'bolder'}); Offset:

› $(this).offset().left , $(this).offset().top position:

› $(this).position().left , $(this). position().top

Click:› $("p").click(function () { alert($(this).text()); });

Toggle:$("li").toggle( function () { $(this).css({"list-style-type":"disc", "color":"blue"}); }, function () { $(this).css({"list-style-type":"disc", "color":"red"}); }, function () { $(this).css({"list-style-type":"", "color":""}); } );

Show› $("button").click(function () { $("p").show("slow"); });

Hide› $(" button").click(function () {

$(this).hide(); }); Animate:

› $("button").click(function () { $(" button ").animate({

width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );});

More: http://docs.jquery.com/Effects

Document ready:$(document).ready(function() { // put all your jQuery goodness in here.});

ForeachjQuery.each(arr, function() { $("#" + this).text("My id is " + this + "."); return (this != "four"); // will stop running

to skip "five" });

FireBug IE developer toolbar VS debugging

 http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx

http://www.learningjquery.com/ http://docs.jquery.com http://jquery.com/plugins/ http://getfirebug.com/ http://www.microsoft.com/downloadS/details.aspx?

familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en