jQuery Overview

Categories: 

jQuery Overview
– free video available on drupalize.me
https://drupalize.me/videos/jquery-overview

My notes from the free video, jQuery Overview

  • jQuery stands for Javascript Query
  • it’s a Javascript library (~23KB compressed)
  • significantly reduces javascript code
  • works across all browsers
  • provides visual effects like FadeIn and FadeOut and sliding up and down

The $ function

  • the only function in jQuery
  • works by selecting a selector
  • $(‘a.classname’)  - Selector
  • $(‘<div>new content</div>’)  DOM creation
  • $.browser.msie*   - Browser detection
  • *deprecated. Use $.support instead

jQuery selectors

  • CSS Selectors
    • $(‘.title’);     - by class
    • $(‘#main’)  - by div
    • $(‘.sidebar a, .content a’);  - child elements, multiple elements
    • $(‘input[type=text]’); - CSS3 select by attribute
    • $(‘img[src$=.png]’);  select all images on page

 

  • jQuery effects available:
    • $(‘h1’).hide();                                    - hide h1 element
    • $(‘h1’).hide(‘slow’);              - hide it slow or fast
    • $(‘h1’).hide(3000);               - hide it for 3000 seconds
    • $(‘h1’).fadeOut(‘slow’);       - fade out slow
    • $(‘h1’).fadeIn(‘slow’);          - fade in slow           
    • $(‘h1’).slideUp(‘slow’);        - slide up slow
    • $(‘h1’).slideDown(‘slow’);   - slide down slow

 

  • More jQuery Effects:
    • Toggle events
      • $(‘h1’).slideToggle();
      • $(‘h1’).toggleClass(‘class-name’)’;

         Class Manipulation
            $(‘h1’).addClass(‘class-name’);
            $(‘h1’).removeClass(‘class-name’)

        jQuery Chainability

  • Multiple operations on the same element
  • $(‘h1’).prepend(‘Hello’).append(‘!’).fadeOut().fadeIn();

 
jQuery events

  • Most common events
    • .click(functionName);
    • change(functionName);
    • toggle(function1, function2)
    • hover(function1, function2)
  • removing an event
    • $(‘a’).unbind(‘click’, functionName);
  • jQuery intro summary
    • selectors
    • effects
    • events
    • chainable