Introduction to jQuery Kristian Allen UCLA Digital Library 

Outline of Workshop ● Anatomy of a Web Application ● The role of jQuery ● Review jQuery fundamentals and syntax ● Hands on development exercise ● Discussion 

Valuable Links ● Follow along on my desktop http://www.join.me Code: 756-979-559 ● Presentation notes http://bit.ly/yvw4Yl ● JSFiddle - Your scratchpad for today Starting Point: http://bit.ly/yvw4Yl 

Anatomy of a Web Application Client Server Web Browser HTML CSS Javascript Web/App Server Java .NET PHP Python Ruby Database Response Request 

How Does jQuery fit in? ● Advent of Web 2.0 creates demand for complex Rich Internet Applications ● jQuery abstracts away differences between browsers, permitting focus on development ● Plug-in framework provides an easy method to share and use code ● Most popular and widely used of JS libraries 

jQuery vs Competition 

What can you do with jQuery? ● Advanced navigation menus ● Table and data grid sorting ● Slideshows and image presentation ● User Interface flourishes ● Full blown desktop-like applications 

Lets see some examples ● Simple Table sorting http://tablesorter.com/docs/#Demo ● Jquery UI Widgets http://jqueryui.com/demos/ ● Basic Image Slideshow http://ryanflorence.com/jquery- slideshow/demos/kitchensink/ ● Photoshoot Plugin http://demo.tutorialzine.com/2010/02/photo-shoot-css- jquery/demo.html 

Core jQuery Operations ● Find Something ● Create Something ● Do Something, now ● Do Something, not now 

Find Something ● Core jQuery operation $(' ') What you're looking for goes in here 

Find Something con't ● $(' ') and jQuery(' ') are equivalent $() is just shorthand ● Accepts HTML tag id, CSS selectors or XPath ● Examples: Give me all images: $('img') ● Give me all items with CSS class header: $('.header') 

How can we access HTML contents? Document Object Model - the DOM html head title body p h1 div 

Lets try it out Some JSFiddle Basics: ● Go to URL, click Fork button ● Make some changes, hit Run to see them ● If you want to save, click Update ● Oh no! If you break something, just hit reload, or decrement the URL to roll back 

Create Something ● Same jQuery function - $(' ') ● jQuery looks at input, if looks like HTML tag syntax, it creates this DOM Element $('img') IS NOT $('') ● $('img') returns all existing images ● $('') returns a brand new Image element 

Do Something... now ● Function is applied to our selection Example: Find all images and add a CSS class $('img').addClass('left-align'); ● Functions can be chained $('img').addClass('left-align').fadeOut('slow'); 

Popular Functions to get started ● hide(), show() and toggle() - Hide or show a jQuery element ● addClass, removeClass, toggleClass - Add, remove or toggle add/remove classes ● append, appendTo, prepend, prependTo - Different ways of attaching content ● attr - Set/get attributes, example img alt value 

The each() function ● Essentially a foreach loop ● Step through each item in our collection and apply a function to this item ● We access the current item with a special jQuery object called $(this) 

each() Simple example // Grab all the images on the page var $my_images = $('img'); //Lets print out each image location $my_images.each(function() { var img_url = $(this).attr('src'); alert(img_url); }); 

Do Something... not now ● Web environment is event driven ● Event handlers and Callback functions ● Examples: When a user clicks an image, say 'howdy!' $('img').click(function() { alert('howdy!'); }); 

Popular Events Complete List of Events from jQuery http://api.jquery.com/category/events/ You already are familiar with lots: ● click Example: Clicking a link ● mouseover Example: Moving mouse cursor over image ● focus Example: Moving between form fields 

Dynamic Data ● Use our skills and make basic image gallery JS Fiddle page http://jsfiddle.net/kristian/EEt9Z/1/ ● GetJSON method queries Flickr ● Returns results in JSON format ● We parse this and add to our page ● Finally, add a modal popup window 

Play at home - Simple template $(document).ready(function() { //Code goes in here var $my_paragraph = $('#first-paragraph'); var text_of_paragraph = $my_paragraph.text(); alert("My paragraph says " + text_of_paragraph); });

hello world!



A Few Resources to Start ● jQuery Site and Documentation http://www.jquery.com ● Interactive kitchen sink basics http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery ● jQuery Plug-ins and widgets http://archive.plugins.jquery.com ● Knowledge base / Q&A http://www.stackoverflow.com 

Questions and Discussion ● Already using jQuery or other js framework? ● What topics are you interested in? ● What types of problems are you trying to solve? ● What environment are you using?