jQuery

1. jQuery Getting Started

2. What is Jquery • 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

3. Trends

4. Trends

5. Advantages • Cross browser : IE / FireFox / Safari / Opera /Chrome • CSS-like syntax – easy for developers/non-developers to understand • Lightweight (compressed version) • Active developer community • Extensible - plugins 5

6. What jQuery is not… • A substitute for knowing JavaScript • jQueryis 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.

7. jQuery is a subset of Javascript Javascript jQuery

8. 5 Things jQuery Provides • 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

9. DOM

10. The DOM • jQuery is “DOM scripting” • The DOM is your html document code. • From the <!DOCTYPE> to the </html> • The DOM is "ready" when everything on the page has loaded. • Stylesheets • JavaScripts • Images

11. The DOM • “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.” Wikipedia You can add and subtract DOM elements on the fly You can change the properties and contents of DOM elements on the fly

12. DOM Ready 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… });

13. jQuery Library • Get it @ • www.jquery.com • Installation – download the appropriate jquery.js file and put it in a folder • jQuery 1.9 will be the last edition to support legacy editions of Internet Explorer. • jQuery 2.0 will no longer support IE6, 7 and 8.

14. jQuery Library • jQuery 1.9 will continue to be developed and support the older IEs. • To support older versions you can use a conditional comments, e.g. <!--[if lt IE 9]> <script src="jquery-1.9.0.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"><</script> <!--<![endif]-->

15. jQuery Syntax • $(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

16. Decoding $$$$$$ • 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 selectors which help in finding elements in DOM tree. • $ returns array of elements. 16

17. Example Html: <p>The sky is blue</p> Script: $(function(){ $("p").addClass("isBlue"); //make font in paragraph blue }); Resulting html: <p class="isBlue">The sky is blue</p>

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

19. What is a selector? • 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.

20. Example • Uses the same syntax you use to style elements in CSS! api.jquery.com/category/selectors/

21. Basic Search Selector • ID selector. Find DOM element by ID. Syntax: $("#myDiv") selects element with ID myDIV. ID search requires # to be preFixed. • Element selector: Find all DOM element by element Type. Syntax: $("div") selects all DIV in the dom tree. Notice no prefix used. • CSS selector: Find all element with a CSS class. 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 : http://docs.jquery.com/Selectors 21

22. Using JQuery • Just add reference to Jquery JavaScript file from anywhere in your code. • Document.Readyis used to attach events and many other things using JQuery. <html> <head> <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { alert(“Welcome to JQuery”); }); </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>

23. Document Ready enclosure • 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 Javascriptalert 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”);} 23

24. Example • jQuery: $("p").addClass("sophisticated"); • Before: <p> • After: <p class="sophisticated">

25. This <p> Has No Class At All! • jQuery: $("p").removeClass("sophisticated"); • Before: <p class="sophisticated"> • After: <p class="">

26. Some Basic Methods api.jquery.com/

27. Example – Show/Hide • Example – Show/Hide the old way <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of #foo</a> 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; }); }); 27

28. <div> Hide and Seek • jQuery: $("div").show(); • Before: <div style="display:none;"> • After: <div style="display:block;">

29. Example • jQuery: $("#eric").text("Is Cool"); • Before: <p id="eric">Is Lame</p> • After: <p id="eric">Is Cool</p>

30. Event handling • 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 • The 2nd part attaches a method to the given event , in this example a Click. $(document).ready(function() { $("a").click(function() { alert("Thanks for visiting!"); }); }); Read: http://docs.jquery.com

31. JQuery Events • jQuery abstracts events • .click() • .blur() • .focus() • .change() • Etc… • Attached via selectors • $(<select0r>).eventname(<functionpointer> or inline); • $("a").click(function(){ $(this).addClass(‘red’);});

32. Other JQuery Effects • .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

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

34. Considerations • 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 • $("#tableNameinput")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. 34

35. Useful jQuery links • www.jquery.com – jQuery homepage • www.learningjquery.com – jQuery tutorial blog • www.visualjquery.com – jQuery documentation • http://ui.jquery.com – jQuery user interface 35