Introduction to jQuery

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.

5789dd45d006943d263094627bb3889e?s=128

Kristian

April 13, 2012
Tweet

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?