1 / 20

JQuery Getting Started

JQuery Getting Started. 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. Advantages.

gus
Download Presentation

JQuery Getting Started

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JQueryGetting 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. Advantages • 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

  4. 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.

  5. 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

  6. The DOM • jQuery is “DOM scripting” • You can add and subtract DOM elements on the fly • You can change the properties and contents of DOM elements on the fly • Document Object Model - Hierarchical (treelike) structure of a web page

  7. 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

  8. Learn jQuery • Get it @ • www.jquery.com • Installation – download the appropriate jquery.js file and put it in a folder • How to learn it • www.jquery.com • docs.jquery.com • www.visualjquery.com • www.Jqueryfordesigners.com • www.gscottolson.com/weblog/ - cheat sheet • www.javascripttoolbox.com/jquery

  9. 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

  10. 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.

  11. 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> 11

  12. 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”);} 12

  13. 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 selector which helps in finding elements in DOM tree. • $ returns array of elements. 13

  14. 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 14

  15. 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 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: http://docs.jquery.com 15

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

  17. 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 17

  18. 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; }); }); 18

  19. 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. 19

  20. 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 • http://bassistance.de/jquery-plugins/ - homepage of the author of several useful jQueryplugins. 20

More Related