jQuery

A JavaScript Library

Randy J. Fortier
randy.fortier@uoit.ca
@randy_fortier

Outline

  • Selectors
  • Event handlers
  • Effects
  • Modifying and examining the DOM

jQuery

Overview

The Document Object Model (DOM)

  • jQuery is a requirement for all web developers
  • Many useful jQuery plug-ins have been developed
  • Benefits over standard JavaScript:
    • Shorter, more readable code
    • Robust in case of errors
    • Browser-independent

Getting Started

  • Be sure that jQuery is the first JavaScript file you include in our project
  • Ways to include jQuery:
    • Download jQuery and reference it locally
    • Reference a jQuery version from their content delivery network (CDN)
    • Reference the latest jQuery version from their content delivery network (CDN)

Getting Started

  • Downloaded and local reference:

<script type="text/javascript" 
        src="jquery-2.2.3.min.js">
</script>
                        

Getting Started

  • CDN specific version reference:

<script type="text/javascript" 
        src="http://code.jquery.com/jquery-2.2.3.min.js">
</script>
                        

Getting Started

  • CDN latest version reference:

<script type="text/javascript" 
        src="http://code.jquery.com/jquery-latest.min.js">
</script>
                        

jQuery

Basics

The jQuery Function ($)

  • The main function in jQuery is jQuery()
    • However, most developers use its short form, $
    • This function returns a jQuery object matching the selectors provided
    • e.g. $('#myDiv') - returns a jQuery object for an element with the ID myDiv
    • jQuery objects have convenience functions for effects, assigning event handlers, modifying, etc.

jQuery Selectors

  • $(document) – selects the document element
  • $('div') – selects all 'div' tags
  • $('div a') - any 'a' descendant of a 'div'
  • $('div > a') - any 'a' direct child of a 'div'
  • $('.emph') – selects all tags with the CSS class ‘emph’
  • $('div.emph') – selects all divs with CSS class ‘emph’
  • $('#title') – selects the first tag with the id ‘title’
  • $('div#title') – selects the first div with the id ‘title’
  • $('[src^=/images]') - src starts with '/images'
  • $('[src$=png]') - src ends with 'png'
  • $('[src*=icon]') - src contains 'icon'
  • $(':nth-child(5)') - selects elements that are 5th child
  • $('div:even') - selects even child div elements

jQuery

Events

jQuery Events

  • ready - DOM element is loaded and ready
  • click/dblclick/toggle
  • hover/mouseenter/mouseleave
  • keypress/keydown/keyup - in text field/area
  • focus/focusin/focusout - active form element
  • submit - form submitted
  • select - text selected in a text field or textarea
  • change - text field, dropdown or other form element value changed

jQuery Event Example

  • A button click handler:

$(document).ready(function() {
   $('button').click(function() {
      // do something
   });
});
                        

jQuery Event Example

  • Why not just do the following?

$('button').click(function() {
   // do something
});
                        

jQuery

Modifying Elements

Physical Modification

  • Visibility:
    
    $('p').show();
    $('p').hide();
                                    
  • Size:
    
    $('p').width($(window).width()/2);
    $('p').height($(window).height()/2);
                                    

Effects

  • Fades:
    
    $('p').fadeIn('slow');   // 600ms
    $('p').fadeOut('fast');  // 200ms
    $('p').fadeToggle(1000); // 1000ms
                                    
  • Slides:
    
    $('p').slideUp('slow'); // slide up and away
    $('p').slideDown();     // slide down into place
                                    

Effects

  • Animations (for numeric CSS properties):

var properties = {padding: '+=5px',
                  margin: '+=5px'};
var handler = function() {};
$('p').animate(properties, 1000, handler);
                        

Method Chaining

  • A common feature of JavaScript libraries is to support method chaining
    • The return value of each method is the object being modified
  • jQuery supports method chaining:

$('p').delay(500).fadeOut(1000);
                        

DOM Traversal

  • $('#x').children() - returns all children of the matched element
  • $('#x').parent() - the parent of the matched element
  • $('#x').find() - searches the descendants by selector
  • $('#x').next() - the next sibling
  • $('#x').prev() - the previous sibling
  • $('#x').siblings() - all siblings

DOM Retrieval

  • $('#x').text() - returns contain (non-HTML) text
  • $('#x').html() - returns inner HTML text
  • $('#x').val() - returns value of a form element
  • $('#x').prop('propName') - returns value of an attribute
  • $('#x').attr('attrName') - same as above

DOM Modification

  • $('#x').text('some text') - sets non-HTML contents
  • $('#x').html('<div>some text</div>') - sets HTML contents
  • $('#someField').val('some text') - sets form field value
  • $('#x').css('propName', 'propValue') - sets CSS property
  • $('#x').css({prop1: 'value', prop2: 'value'}) - sets multiple CSS properties
  • $('#x').wrap('<div />') - wraps an element in another
  • $('#x').clone() - returns a (deep) copy of the match

DOM Modification

  • $('#x').append($('<div>some text</div>')) - inside at end
  • $('<div>some text</div>').appendTo('#x')
  • $('#x').prepend($('<div>some text</div>')) - inside at start
  • $('<div>some text</div>').prependTo('#x')
  • $('#x').after($('<div>some text</div>')) - outside at end
  • $('<div>some text</div>').insertAfter('#x')
  • $('#x').before($('<div>some text</div>')) - outside at start
  • $('<div>some text</div>').insertBefore('#x')
  • $('#x').replaceWith($('<div>some text</div>')) - replace
  • $('<div>some text</div>').replaceAll('#x')

Wrap-Up

  • In this section, we learned about:
    • Selectors
    • Event handlers
    • Effects
    • Modifying and examining the DOM