jQuery

part 1


class overview

  • Homework Questions
  • jQuery Overview
  • How to Include
  • Tangent: JS Minification
  • Tangent: CDN's
  • jQuery Usage
  • DOM Selectors
  • More Selecting
  • What Selectors Return
  • jQuery Selector Functions
    • .append() / .prepend()
    • .before() / .after()
    • .text()
    • .html()
    • .attr()
  • Cool JS Thing for the Day 

jquery...

  • Is a third-party library.
  • Can be found here.
  • Is pretty small, super backwards-compatible, and insanely useful.
  • Will make your life easier.
  • Made up of a lot of utility functions.
  • Refutations can be found here. (But don't bother)

How to include

Download and include:
 <script src="JS/jquery-1.11.0.min.js"></script>
Better Method: Use the CDN:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>





Tangent: JS Minification

  • Javascript Minification reduces the filesize of your JS.
  • It also obfuscates your code, usually better for production scenarios.
  • It does NOT hide/compile/improve your code.
  • It should be tested to make sure the minification didn't jack anything up.
  • Usually implemented using Uglify & Grunt.



Online Minifier: JSCompress

Tangent: CDN's

  • Stands for Content Delivery Network.
  • Used by a lot of third party JS & CSS libraries.
  • Extremely handy for quick prototyping.
  • Not so great for production scenarios (depends on the CDN speed).
  • Most of the larger third-party libraries can be found at cdnjs.

jquery usage

Include it in your code (before you need to use it).
Reference jQuery by using the $ symbol (or jQuery variable).
Example:
$.each([1,2,3], function(index, val) {
//do something
});

DOM Selectors

  • jQuery can be used to select items from the DOM (HTML).
  • The result is an array with references to all objects that fit your selector. Sometimes one thing, sometimes many.
  • Whole lotta' jQuery functions to use on those selectors (append, text, html, css, attr, etc...)
Example usage:
var element = $('#item');
console.log(element.text());


More selecting

Channel your CSS selector memories for selector formats.
Selecting an ID
var idElement = $('#myID');
Selecting a Class
var classElement = $('.myClass');
Selecting a Tag
var tagElement = $('myTag');

Note: ID's normally return one item. Class & tags normally return multiple items.

what selectors return

  • jQuery selectors return a jQuery object.
  • A jQuery object has many different functions available to it.
  • A jQuery object is basically an Array on steroids.  
  • Best practice:
    • Only call jQuery selectors once per matching criteria, then store the value in a variable to be used. This makes your JavaScript faster, because it's not having to search the DOM multiple times.


jQuery API

.APPEND() / .PREPEND()

  • Called on a jQuery object.
  • May insert into multiple places if there are multiple elements selected.
  • append()
    • Inserts an object after the element's opening tag.
  • prepend()
    • Inserts an object before the element's closing tag.
 
 $('#items').append('an item'); $('#items').prepend('another item);
jsbin usage
append() documentation
prepend() documentation

.BEFORE() / .AFTER()

  • Called on a jQuery object.
  • May insert into multiple places if there are multiple elements selected. (be careful what you select)
  • .before()
    • Inserts an object before the element's opening tag.
  • after()
    • Inserts an object after the element's closing tag.
 
 $('#items').before('pre item'); $('#items').after('post item');
jsbin usage
.before() documentation
.after() documentation

.TEXT()

  • Gets or sets text for a jQuery object.
  • Will set text on multiple selected objects.
  • Will return concatenated text from multiple objects.
  • Escapes html.
 //using this element <div>an item</div> $('div').text(); // > an item $('div').text('nothing at all'); // <div>nothing at all</div>

text() documentation

.HTML()

  • Gets or sets the HTML inside a jQuery object.
  • Does not return the HTML surrounding the object
  • Only returns the HTML from the first selected object.
  • Sets the HTML for all selected objects.
 //using these elements <p><b>big word</b><br /></p> $('p').html(); //> <b>big word</b><br /> $('p').html('<i>italicized word</i>'); //now element is: <p><i>italicized word</i></p>
.html() documentation

.ATTR()

Returns or modifies an attribute on a selector.
Usage:
//using this attribute: <div id="item"></div>//add an attribute with two arguments  var item = $('#item');  item.attr('data-member',5);//now it looks like this: //<div id="item" data member="5"></div>//retrieve an attribute with one argument  item.attr('data-member');// > 5
.attr() documentation

cool js thing for the day

three.js
JavaScript 3D library to make WebGL experiences.
Made with Slides.com