Introduction to jQuery

A brief introduction to the jQuery javascript library and the problems it helps solve. We'll review some of the basic syntax and walk through a 'hello world' example.

Transcript

1. Introduction to jQuery Kristian Allen UCLA Digital Library
2. Outline of Workshop • Anatomy of a Web Application • The role of jQuery • Review jQuery fundamentals and syntax • Hands on development exercise • Discussion
3. 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
4. Anatomy of a Web Application Client Server Web Browser HTML CSS Javascript Web/App Server Java .NET PHP Python Ruby Database Response Request
5. 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
6. jQuery vs Competition
7. 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
8. 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
9. Core jQuery Operations • Find Something • Create Something • Do Something, now • Do Something, not now
10. Find Something • Core jQuery operation $(' ') What you're looking for goes in here
11. 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')
12. How can we access HTML contents? Document Object Model - the DOM html head title body p h1 div
13. 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
14. Create Something • Same jQuery function - $(' ') • jQuery looks at input, if looks like HTML tag syntax, it creates this DOM Element $('img') IS NOT $('<img>') • $('img') returns all existing images • $('<img>') returns a brand new Image element
15. 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');
16. 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
17. 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)
18. 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); });
19. 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!'); });
20. 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
21. 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
22. Play at home - Simple template <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1 /jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(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); }); </script> </head> <body><p id='first-paragraph'>hello world!</p></body> </html>
23. 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
24. 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?