Getting Started

 jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.  jQuery is designed to change the way that you write JavaScript. 2

 Cross browser : Latest version supports:  IE / FireFox / Safari / Opera /Chrome?  CSS-like syntax – easy for developers/non- developers to understand  Lightweight (compressed version)  Active developer community  Extensible - plugins 3

 A substitute for knowing JavaScript  jQuery is very useful, but you should still know how JavaScript works and how to use it correctly. This means more than Googling a jQuery/JavaScript tutorial and calling yourself an expert.  The answer to every problem  There is still plenty of functionality built into JavaScript that should be utilized! Don’t turn every project into a quest to ‘jQuery-ize’ the problem, use jQuery where it makes sense. Create solutions in environments where they belong.

jQuery Javascript

 Select DOM (Document Object Model) elements on a page – one element or a group of them  Set properties of DOM elements, in groups (“Find something, do something with it”)  Creates, deletes, shows, hides DOM elements  Defines event behavior on a page (click, mouse movement, dynamic styles, animations, dynamic content)  AJAX calls

 Strings and numbers - basic pieces of information  Variables - where to store pieces of information  Functions - how to call reusable pieces of code  Callbacks - functions that get called in response to something else  Arrays - store a list of values (like a list of variables)  Objects - understand a little bit about these  Conditionals - controlling what parts of a program executes

 Strings and numbers - basic pieces of information  Variables - where to store pieces of information  Functions - how to call reusable pieces of code  Callbacks - functions that get called in response to something else  Arrays - store a list of values (like a list of variables)  Objects - understand a little bit about these  Conditionals - controlling what parts of a program executes

 Similar to CSS - the less 'inline' the better. (Generalization)  Downright Bad: Include as an event  Even Less Good: Include in the tag  Less Good: Include in the tag  Best: Include external.js file

 jQuery is “DOM scripting”  The DOM is your html document code.  From the to the  The DOM is "ready" when everything on the page has loaded. Stylesheets JavaScripts Images

 “The Document Object Model (DOM) is a cross-platform and language- independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use.” Wikipediacross-platformlanguageobjects HTMLXHTMLXML You can add and subtract DOM elements on the fly You can change the properties and contents of DOM elements on the fly

In order to make sure that jQuery can find the element you asked it for, your browser needs to have loaded it (the DOM needs to be ready). Q. How can I be sure my code runs at DOM ready? A. Wrap all your jQuery code with the document ready function: $(document).ready(function(){ // insert jQuery code here… }); Or

Html: Hello World! I'm Eric Script: $(function(){ $("p").addClass("isCool"); //keep telling yourself that.. }); Resulting html: Hello World! I'm Eric

$(function(){ // = $(document).ready(function(){ }); $ Initiates the jQuery function $ = jQuery ("p") Grabs a DOM element using a CSS selector. Selector is in quotes. Creates a jQuery “Collection”.addClass("isCool"); Built in method that adds a class to the jQuery Collection Class is in quotes. ends with a semicolon.

 Uses the same syntax you use to style elements in CSS! $("p") $("div") $("#foo") id="foo" $(".foo") class= "foo" api.jquery.com/category/selectors/

 jQuery: $("p").addClass("sophisticated");  Before:  After: jsbin.com/ecayo3/18#slide22

 jQuery: $("p").removeClass("sophisticated") ;  Before:  After: jsbin.com/ecayo3/18#slide22

 jQuery: $("div").show();  Before:  After:

 jQuery: $("#eric").text("Is Cool");  Before: Is Lame  After: Is Cool jsbin.com/ecayo3/18#slide25

$("p").addClass("sophisticated").text("Hello World!").show();

$("#eric").click(function(){ $(this).text("Is Cool"); // this = #eric alert("Take that High School!"); }); $("#eric").click(function(event){ $(this).text("Is Cool“); // this = #eric alert("Take that High School!"); event.preventDefault(); //Prevents default action });

Show a hidden element.show() wrap an element with.wrap(" ") Select parent.parent("p") Get/Set innerHTML.html() Get/Set Value.val() api.jquery.com/

 Get   Installation – download the appropriate jquery.js file and put it in a folder  How to learn it   docs.jquery.com    - cheat sheet 

 $(selector).function(…) or $.function(…) or $(selector).function1(…).function2(…).functionN(…);  $() or jQuery()  JQuery objects are created by jQuery() or $()  jQuery object is a wrapper for a selected node or group of DOM nodes  $(“p”) is a JQuery object containing all the “p” elements in the document  selector  reference to an element or many different elements on in a document  Function - any jQuery supported method or plugin.  (…) refers to function parameters  Functions can be chained in sequence

 Think CSS!  jQuery has a built in DOM transversal engine.  $(selector) returns a list of elements on the page that match the “selector”.  Example: $(“input”) will return a list of ALL input elements on the page.

 Just add reference to Jquery JavaScript file from anywhere in your code.  Document.Ready is used to attach events and many other things using JQuery. $(document).ready(function() { alert(“Welcome to JQuery”); }); jQue ry 28

 Document -> Ready is equivalent to body onload method and is executed when entire page and resources have been loaded in the DOM.  If you run the above code you will get a Javascript alert box on document load.  Look at the structure of the document.ready, it accepts a method as a parameter.  Look between the method braces $(document).ready(function() { alert(“Welcome to JQuery”); }); function(){ alert(“Welcome to JQuery”);} 29

 By default, jQuery uses "$" as a shortcut for "jQuery“  $ is nothing but a shorthand notation for find method in JQuery. You can also use Jquery("") instead of $ ("") however use $ as it will be consistent.  $ accepts search selector. There are many search selector which helps in finding elements in DOM tree.  $ returns array of elements. 30

 ID selector. Find DOM element by ID. ID selector Syntax: $("#myDiv") selects element with ID myDIV. ID search requires # to be preFixed.  Element selector: Find all DOM element by element Type. Element selector: Syntax: $("div") selects all DIV in the dom tree. Notice no prefix used.  CSS selector: Find all element with a CSS class. CSS selector: Syntax: $(".myClass") select all element with myClass. CSS class requires a dot.  You can also mix and match.  $(“div.main”) // tag and class  $(“table#data”) // tag and id  $(“#content,.menu”) // find by id + by class  $(“h1, h2, h3, div.content”) // multiple combination  Read : 31

 Events in Jquery are bound to elements inside the document.ready method. The elements get bound when document.ready is fired.  $("a").click has 2 parts. 1st selector, 2nd event. The 1st part finds the element on which method is to be attached and 2nd part attaches method on the give event, in this example a Click.  Look at the syntax, event accepts a method as a parameter. $(document).ready(function() { $("a").click(function() { alert("Thanks for visiting!"); }); Read: 32

 jQuery abstracts events .click() .blur() .focus() .change()  Etc…  Attached via selectors  $( ).eventname( or inline);  $("a").click(function(){ $(this).addClass(‘red’);}); 33

.css(‘property’, ‘value’) .css({‘prop1’:‘value1’, ‘prop2’:’value2’…})  E.g..css(‘color’, ‘red’)  $(“div”).show(); // just show  $(“div”).show(“slow”); // reveal slowly, slow=600ms  $(“div”).hide(“fast”); // hide fast, fast=200ms  $(“div”).toggle(100); // hide or show in 100ms  $(“div”).slideUp();  $(“div”).slideDown(“fast”);  $(“div”).slideToggle(1000);  $(“div”).fadeIn(“fast”);  $(“div”).fadeOut(“normal”);  $(“div”).fadeTo (“fast”, 0.5); // fade to a custom opacity 34

 Example – Show/Hide the old way Click here to toggle visibility of #foo function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }  Example – Show/Hide with jQuery $().ready(function(){ $("a").click(function(){ $("#more").toggle("slow"); return false; }); 35

 Jquery can have performance implication dependent on how you write code.  Generalization is good but excess is bad. Remember every $/Find search using attribute /element,parses the DOM for elements and excessive use can cause the browse to hang.  Use ID selector as much as possible or at least use nested selector using the ID as parent. To search all input element  $( " input " ) will perform slower than  $( " #tableName input " ) which will be faster.  Use JQuery methods only to change properties, get values and modify attribute s, to avoid cross browser issues.  Remember JQuery offers abstraction to provide a common interface for all cross browser method and members. 36

 – Book Website  - A guide to the basics of jQuery  - Learn how to make your websites interactive and create animations by using jQuery. 37