jQuery.md

jQuery

Objectives:

• Describe why jQuery exists
• Describe the difference between javascript and jQuery
• Include jQuery locally or from a CDN
• Include jquery from a source local to the project
• Describe that $ is a function that returns a jQuery object
• Write syntactically valid document ready statements
• Explain what $(fn) / $(document).ready(fn) does and why it’s useful
• Describe what a jQuery object is
• Wrap a DOM element in jQuery
• Describe the difference between a raw DOM element and a jQuery-wrapped element
• Unwrap a jQuery object with .get() and []
• Describe the arguments for and against using jQuery on a project
• Describe that jQuery is an expensive function call, and that care should be taken to minimize how many times you “re-jQueryify” the same element

---

Definition

jQuery is a Javascript library. It is used to assist in the traversal and manipulation of the DOM, including normalizing browser inconsistencies / saving developers time

---

Including jQuery on your page

There are a few ways to include the jQuery library. One is through a CDN and another could be by adding it locally to your application.

• You can download the source yourself at the jQuery download page. Grab the latest minified version as this will make the loading time faster.

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

• You can add a script tag that references the jQuery CDN:

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

---

Document Ready

Before your jQuery can operate it must make sure that the DOM is loaded and ready. This is done with the Document Ready callback.

Exercise

• Create an index.html file with a basic HTML skeleton
  • HTML, HEAD, BODY etc.
• Create an app.js file and include it in your index.html
• In that app.js file create a function that fires off an alert when the page is ready.
  • Use the jQuery docs to figure out how to implement that
  • Try using both styles of callbacks.

---

$()

You can test out that you have jQuery loaded properly by typing jQuery into your console. If it returns function n(a, b) that means it's been loaded successfully. You can accomplish the same thing with $ as well, and the shorthand namespace you will reference when using jQuery. Much in the same way that the _ is used in Underscore.

• $() is a function

---

### Selectors & Methods

• Parameter can be any selector expression
  • Same as main CSS selectors, in string form.
    • Element: $('div')
    • Class: $('.highlight')
    • ID: $('#special-cat')
    • Psudeo: $('.nav-item:focus')

jQuery selectors are very similar to the selectors we get in plain old javascript. They add some nice abstractions like visibility, first and last. But your best bet for getting comfortable with selection is to get comfortable with javascript selectors, then understand how jQuery improves on them.

var button = document.querySelector('button');
var button = $('button');

button.addEventListener('click', function(e) {  });
button.on('click', function() {  });

Chaining

• you can chain multiple methods in a row
  • $(".class-selector").addpendChild("div").innerHTML("stuff and stuff")

Exercise 1

Go to jQuery API and pick a method or a selector to learn. Once you have chosen one claim it in chat. Spend the next ~5-10min experimenting with your choice and get a working sample. You will then share your sample with the class and explain what your method or selector does and how to use it.

Wrapping jQuery

• Unwrap a jQuery object with .get() and []
• Wrap a DOM element in jQuery
• Describe the difference between a raw DOM element and a jQuery-wrapped element

Pass jQuery an argument of div: $('div') and what the function returns to you are DOM elements wrapped in jQuery. This array like object is a collection of references to those elements in the DOM, known as a jQuery object.

Let's go back to our example and wrap up some divs.

$('h1') // [<h1>header</h1>]
$('h1')[0] // <h1>header</h1>

$('h1')[0].fadeOut();
$('h1').fadeOut();

foo = $("div");
foo instanceof jQuery
foo instanceof Array

bar = $("div").get();
bar instanceof jQuery
bar instanceof Array

Implicit Iteration

On a page with 5 divs $('div') will return a collection (jQuery object intance). You can then call a method on that collection, like .hide(). jQuery is smart enough to understand that you want that method applied to each item in the collection, and not on the jQuery object itself.

• Methods called on jQuery objects are applied to all item in the collection.
  • no need to setup iteration.
  • Reduces lines of code.

---

Lesson Resources:

• jQuery Cheatsheet
• jQuery API
• jQuery object
• jQuery document-ready
• jQuery download
• Codecademy - jQuery

---