Intro to jQuery

An Easier Way?

Key Questions

  • What is jQuery
  • What is a library?
  • Why would you use jQuery?
  • Why would you not use jQuery?

What is jQuery?

jQuery is a DOM manipulation library

What is jQuery?

It comes with a bunch of useful methods to things like:

  • Select Elements
  • Manipulate Elements
  • Create Elements
  • Add Event Listeners
  • Animate Elements
  • Add Effects
  • Make HTTP Requests(AJAX)

Why Use jQuery?

  • Fixes "broken" DOM API
  • Brevity and Clarity
  • Ease of use
  • Cross-Browser Support
  • AJAX
  • Lot's of people use jQuery!

Why Not Use jQuery?

  • The DOM API is no longer "broken"
  • It doesn't do anything you can't do on your own
  • It's an unnecessary dependency
  • Performance
  • Lot's of people are moving away from jQuery!

Either way, it's worth knowing.

Adding jQuery

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="jquery.js"></script>

Download jQuery and link to it locally:

OR

Link to a CDN(a hosted copy)

Quick Preview

Here's a 30 second preview of what jQuery looks like:

//when a user clicks the button with id 'trigger'
$('#trigger').click(function(){

  //change the body's background to yellow
  $('body').css("background", "yellow");

   ///fade out all img's over 3 seconds
  $('img').fadeOut(3000, function() {

    //remove imgs from page when fadeOut is done
    $(this).remove();
  });
});

Intro to jQuery

By Colt Steele

Intro to jQuery

  • 1,721