jQuery is a fast, small, and feature-rich javascript library. It makes things like HTML document traversal and manipulation, event handling, animation, and ajax much simpler with an easy-to-use API that works across a multitude of browsers.

WHAT CAN IT DO? Change content based on user actions Toggle CSS classes to highlight an element Makes it easy to: Find elements in the DOM Change content Listen to what the user does Animation content on the page Talk over network to fetch new content

HOW TO GET THE LIBRARY: METHOD 1 Download it from here: Site Features lots of API/documentation Load into your page: Make sure it is first script included if you also include your own js file that uses it

JQUERY IMPROVES OUR CODE EXAMPLE: OBTRUSIVE JAVASCRIPT

OUR FORM VALIDATION EXAMPLE Separate most of the JavaScript in its own.js file Styles have been separated out into a style sheet BUT….we still have calls to the functions appearing within our html in the form elements

GOAL = COMPLETE SEPARATION Idea is called Unobtrusive JavaScript Considers any JS embedded in the to be incorrect This includes attributes of HTML elements (such as onblur ) Using the jQuery library, we can achieve complete separation of style, behavior, and structure

HOW TO GET THE LIBRARY: OPTION 2 Quicker/Easier Use a Google-hosted library by grabbing the snippet from here: eed/libraries/#jquery Add snippet code in your page above your own js

JQUERY FUNCTION In General – format is: jQuery( ); Shorthand Equivalent: $( );

DON’T WANT TO DO ANYTHING UNTIL DOM FINISHES LOADING Determine using ready function The DOM Event triggers once page fully loaded

FINDING NODES (ELEMENTS) IN THE DOM Just need to use their CSS selectors To grab this and this, just use regular CSS selector that would get them

TO ACCESS TEXT INSIDE AN ELEMENT.text() Equivalent to JS.innerHTML.text() retrieves current contents.text(“new value”) sets to new value

EXAMPLE HTML jQuery Result

FIND BASED ON ID OR CLASS ID’s: $(“#whateverId”) Classes: $(“.whateverClass”)

MORE SUB-SELECTION – STILL JUST BASED ON WHAT CSS WOULD LOOK LIKE $("p a") Retrieves any links nested inside a element $("div.exampleClass") Retrieves any element with class exampleClass

EXAMPLE HTML

EXAMPLE - CONTINUED CSS jQuery Result EVERY li descendent of #favs is selected

SELECTING MULTIPLE ELEMENTS Again, just like CSS List them with comma in between Example: $(“.movies, #foods”) Selects elements with class movies or id foods

PSEUDO-CLASSES li:first  only selects 1 st list item li:last  only selects last li li:odd  only selects odd li’s li:even  only selects even li’s

PERFORM AN OPERATION Once set is retrieved, can perform operations on it Basic Syntax: $(selector).action( ) Example: $("div.exampleClass").hide(); This will hide any element with class exampleClass

CAN DAISY-CHAIN OPERATIONS tack various transformations together with additional periods Example: $("div.ex").hide().addClass("removed"); The code 1 st hides any with class ex and then adds an additional class to all of the these same elements called removed

RESPOND TO AN EVENT $(document).ready(function(){ $("selector").event(function(){ /*do whatever in response */ });

EXAMPLE $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); This is a heading This is a paragraph. This is another paragraph. Click me