{ … }while() { … }for() { … }function() { … }Browser AdditionsWhen you use jQuery, you are writing JavaScript and using a library (jQuery) that is moreconvenient than the built-in browser JavaScript methods.INFORMATION ORGANIZATION LABSEPTEMBER 14, 2010JQUERY = $The dollar sign is a synonym for the jQuery functionWhat does jQuery look like? Usually referenced using an alias, the dollar sign.Writing $(some element) is the same as writing jQuery(some element).In the last class, I said that there were two steps to using jQuery. What were they?An important thing to keep in mind is that whenever you are using jQuery, you are workingwith DOM elements.INFORMATION ORGANIZATION LABSEPTEMBER 14, 2010JQUERY: EVENTSGeneral Eventsready, load, scrollMouse Eventsclick, hover, mouseenter,mouseleaveKeyboard Eventskeypress, keydown, keyupForms Eventssubmit, focus, blurComplete list at http://api.jquery.com/category/events/$(element).eventType(function(){// JavaScript});jQuery makes it easy to bind events to DOM elements.This is called event binding.INFORMATION ORGANIZATION LABSEPTEMBER 14, 2010JQUERY: LIVE EVENTS$(‘li’).live(‘click’,function(){// Do Something});A normal event binding attaches to all matched elementswhen it is called. A live event calls the callback function whenthe event occurs on all matched element, currentand future.$(‘li’).click(function(){// Do something});INFORMATION ORGANIZATION LABSEPTEMBER 14, 2010JQUERY: GET AND SETComplete list athttp://api.jquery.com/category/attributes/$(‘a’).text();$(‘a’).text(‘Hello world’);<a

href="http://berkeley.edu">UC Berkeley</a>$(‘a’).attr(‘href’);$(‘a’).attr(‘href’, ‘http://google.com’);jQuery provides a wide variety of methods to get and set attributes from DOM elements.As you would hope, the get and set methods are very similar.INFORMATION ORGANIZATION LABSEPTEMBER 14, 2010JQUERY: FORMSComplete list athttp://api.jquery.com/category/forms/See the documentation for .val() in particular: http://api.jquery.com/val/$(‘#name’).val();$(‘#name’).val(‘Mary’);<input

id="name"

type="text"

value="John">$(‘#name’).attr(‘value’);$(‘#name’).attr(‘value’, ‘Mary’);jQuery provides shortcuts for things you might commonly do, like get and set attributes fromform elements.In particular, it is good with form elements.INFORMATION ORGANIZATION LABSEPTEMBER 14, 2010JQUERY: CSSComplete list athttp://api.jquery.com/category/css/$(‘h1’).css(‘color’, ‘red’);$(‘h1’).addClass(‘important’);<h1>Hello world</h1>$(‘h1’).hide();$(‘h1’).fadeIn();jQuery provides shortcuts for things you might commonly do, like get and set attributes fromform elements.In particular, it is good with form elements.INFORMATION ORGANIZATION LABSEPTEMBER 14, 2010“THIS” IN JAVASCRIPTvarperson= {

name: 'Mohit',sayHello:function(){

alert('Hello, ' + this.name);}}thisis a special variable.It is the object in the current context.INFORMATION ORGANIZATION LABSEPTEMBER 14, 2010$('li').click(function(){this // DOM element

$(this) // jQuery object});“THIS” IN JQUERY$('li').click(function(){

$('li').hide();});“this” is a variable in JavaScript that is the current context or scopeIn this case it is a reference to the person object.INFORMATION ORGANIZATION LABSEPTEMBER 14, 2010AJAX AND CROSS-SITE SCRIPTINGWeb 2.0 FTWINFORMATION ORGANIZATION LABSEPTEMBER 14, 2010THE HISTORY OF AJAXWeb 2.0 FTWHTMLDHTMLAJAXINFORMATION ORGANIZATION LABSEPTEMBER 14, 2010AJAX WHAT?AsynchronousJavascriptandXmlHttpRequestINFORMATION ORGANIZATION LABSEPTEMBER 14, 2010AJAX WHAT?