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
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

6. jQuery vs Competition
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

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')
    

    View Slide

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

    View Slide

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
    

    View Slide

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') returns all existing images
    ● $('') returns a brand new Image element
    

    View Slide

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');
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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);
    });
    

    View Slide

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!');
    });
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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?
    

    View Slide