jQuery “write less, do more”

jQuery - Introduction Simply a JavaScript library to simplify JavaScript programming itself Wraps long standard JavaScript code lines for common client script tasks into new simple function calls

jQuery - Installation Download the library from jQuery.com and include the library in the header section of HTML document as follows: Directly include the library from the Google or Microsoft CDN (Content Delivery Network):

jQuery – Basic Scripting Accessing HTML elements Set or get HTML element properties Handle HTML element events Traverse HTML elements as nodes

jQuery – Basic Scripting Structure Accessing HTML elements: $(selector).action(task); selector : HTML tag name, class, id, and DOM generic reference name action : jQuery functions represent events or properties of the element referred by selector task : script logic or call to other previously defined callback function (mostly implemented inside anonymous function)

jQuery – Basic Scripting Structure Accessing HTML elements: The most common is access to current active document after all the elements inside the document is ready $(document).ready( function() { alert("Ok document is ready…"); } ); See how the alert built-in function is called inside the anonymous function

jQuery – Basic Scripting Structure Nested HTML elements access (quite ambiguous): $(document).ready( function() { alert("Ok document is ready…"); $(selector).action( function() { other tasks... } ); } );

jQuery – Basic Scripting Structure Nested HTML elements access (less ambiguous approach): $(document).ready( function() { alert("Ok document is ready…"); myTask(); } ); function myTask { $(selector).action( function() { other tasks... } ); }

jQuery – Selector Elements The possible elements to be a selector – document – this – "html_tag_name" – ".class_name" – "#id_name" – "html_tag_name.class_name" – "html_tag_name#id_name"

jQuery – Selector Elements HTML element access examples: Acer ??? $("h2").css("color", "blue"); $("h2#htc").text("hTc"); $("h2").click( function() { $(this).css("color", "red"); } );