Intro to jQuery

Where are we going?

• Introduction
1. Who am I?
2. Where are we going?
3. What is jQuery?
4. Why was it created?
5. Why would you use it?
• Adding jQuery to Your Pages
1. Should you host or include?
2. How do you bring the library into your pages?
3. How can you write your own scripts?
• Using jQuery on Your Pages
1. What are selectors?
2. What do you do with selected elements?
3. Where do you go from here?

Where are we going?

• Introduction
1. Who am I?
2. Where are we going?
3. What is jQuery?
4. Why was it created?
5. Why would you use it?
• Adding jQuery to Your Pages
1. Should you host or include?
2. How do you bring the library into your pages?
3. How can you write your own scripts?
• Using jQuery on Your Pages
1. What are selectors?
2. What do you do with selected elements?
3. Where do you go from here?

Why was it created?

All Sites
Top 1000
Top 100

Why was it created?

Why was it created?

JavaScript Demo

            
  window.onload = function () {
    var myName, greeting, elems;
    myName = prompt('What is your name?');
    greeting = document.getElementById('myName');
    str = 'Hello, ' + myName;
    greeting.innerHTML = str;
    elems = document.getElementsByTagName('input');
    for (var elem in elems) {
      if (elems[elem].type === 'button') {
        elems[elem].addEventListener('click', function () {
          changeColor(this.value, 'box')
        }, false);
      }
    }
  };

  function changeColor(color, el) {
    var elems2 = document.getElementsByTagName('div');
    for (var i = 0, j = elems2.length; i < j; i++) {
      if ((' ' + elems2[i].className + ' ').indexOf(' ' + el + ' ') > -1) {
        elems2[i].style.background = color;
      }
    }
  }
            
          

Why was it created?

jQuery Demo

            
  jQuery(function () {
    jQuery('#myName').text('Hello, ' + prompt('What is your name?'));
    jQuery('input[type="button"]').click(function () {
      changeColor(jQuery(this).val(), 'box');
    });
  });

  function changeColor(color, el) {
    jQuery('.' + el).css('background', color);
  }
            
          

Should you host or include?

Hosting

...involves downloading the jQuery library to your server, and including the library from there

• Why you might:
  • More secure
  • More reliable

Should you host or include?

Including

...involves linking to the jQuery library from a CDN (Content Delivery Network)

• Why you might:
  • Decreased latency
  • Increased parallelism
  • Better caching

Where to get it?

Hosting

Download latest version from jQuery.com

Including

There are many trusted CDNs

• Google
• jQuery.com
• Microsoft

What are selectors?

• Based on CSS selectors
• Used to select elements from the DOM
• Returns zero, one, or more objects that match
• Takes the form: jQuery('div')

What are selectors?

jQuery('div')

• Calls the jQuery library
• Commonly written as $
• Avoid conflicts with other libraries by using jQuery

What are selectors?

jQuery('div')

• Selects some element
• jQuery reads string value to determine element
• Can be a literal (like 'div') or variable (like someElement)

What are selectors?

Single Selectors

What are selectors?

Multiple Selectors

• Selectors can be combined to limit objects returned:

  jQuery('div p')

• Use attributes to filter objects:

  jQuery('input[name="myInput"]')

• Use extension selectors if needed:

  jQuery('div:first')

What are selectors?

Traversing the DOM

• Good markup will allow you to easily select an object or objects
• Sometimes this is not possible
• Instead, you can "walk the DOM" to find the object
• This is done with various jQuery functions, such as:
  • .parent()
  • .children()
  • .find()
  • .filter()
  • .after()
  • .before()

What are selectors?

Chaining

• Every jQuery function that doesn't return some value, returns the current object
• This allows for "chaining" or performing different actions on the same object(s)
• This greatly shortens code:

                  
  jQuery('div').css('color', 'red');
  jQuery('div').css('backgroundColor', 'blue');
                  
                

                  
  jQuery('div').css('color', 'red').css('backgroundColor', 'blue');
                  
                

What are selectors?

Putting it all together

• Often, selectors are 80% of jQuery
• Sometimes your element will have an ID and be simple to select
• Other times you will have to walk the DOM a bit to select it
• Here is a good visual of various selectors

Modifying

Involves changing the selected element(s) in some way

• .css()
• .remove()
• .attr()

Modifying

.css()

• Used for getting/modifying css of selected element(s)
• Getting:

  jQuery('div').css('color');

• Setting:

  jQuery('div').css('color', 'red');

Demo

Modifying

.remove()

• Used for removing element(s) from the DOM

• jQuery('.hello').remove();

• jQuery('div').remove('.hello');

Demo

Modifying

.attr()

• Used for getting/modifying attributes of selected element(s)
• Getting:

  jQuery('div').attr('id');

• Setting:

  jQuery('div').attr('id', 'divID');

Demo

Manipulating

Involves changing the DOM directly

• .append()/.prepend()
• .clone()
• .load()

Manipulating

.append() / .prepend()

• Allows you to insert an element after/before each selected element(s)

• jQuery('div').append('
  ');

• jQuery('p').prepend('');

Demo

Manipulating

.clone()

• Allows you to copy the selected element(s)

• jQuery('div').clone();

• jQuery('p').clone(true);

Demo

Manipulating

.load()

• Allows you to insert data from a different page into the selected element(s)

• jQuery('div').load('/path/to/differentPage.html');

Listening

Involves calling some code after some event on the selected element(s) happens

• .click()
• .hover()
• .change()

Listening

.click()

• Allows you to run something when the element(s) is clicked

                  
  jQuery('div').click(function() {
    /* do something here */
  });
                  
                

  jQuery('p').click();

Demo

Listening

.hover()

• Allows you to run something when the element(s) is hovered over with the mouse

                  
  jQuery('div').hover(function() {
    /* do something here */
  }, function() {
    /* do something else here */
  });
                  
                

Demo

Listening

.change()

• Allows you to run something when the element(s) is changed

                  
  jQuery('input').change(function() {
    /* do something here */
  });
                  
                

  jQuery('select').change();

Demo

Animating

Involves moving/redrawing the element(s) on the page

• .hide()/.show()/.toggle()
• .slide()
• .fade()

Animating

.hide() / .show() / .toggle()

• Allows you to hide/show/toggle the selected element(s)

• jQuery('div').hide();

• jQuery('div').show(500);

• jQuery('div').toggle('fast');

Demo

Animating

.slideUp() / .slideDown() / .slideToggle()

• Allows you to hide/show/toggle the selected element(s) with a sliding motion

• jQuery('div').slideUp();

• jQuery('div').slideDown(500);

• jQuery('div').slideToggle('fast');

Demo

Animating

.fadeOut() / .fadeIn() / .fadeToggle()

• Allows you to hide/show/toggle the selected element(s) with a fading motion

• jQuery('div').fadeOut();

• jQuery('div').fadeIn(500);

• jQuery('div').fadeToggle('fast');

Demo