jQuery Introduction © Copyright 2014, Fred McClurg All Rights Reserved

Other General JS Libraries Prototype + Scriptaculous: MooTools: YUI (Yahoo User Interface): Dojo Toolkit: 2

What is jQuery? Defined: The most popular general purpose JavaScript library available. It provides commonly requested functionality in a standard and cross-browser compatible fashion. Website: Documentation (excellent): 3

jQuery Features Advanced element selectors Cross browser compatible DOM traversal and manipulation Display effects and animation Event handling AJAX functionality 4

Production vs Development Version Discussion: The only difference between the Production and Development version of jQuery is that the Production version is a “minified” copy of the Development version. The “minified” version has all comments, newlines, and extra spaces removed. Production Version: The Production version is recommended for most web sites. Because it is smaller, the download times are quicker. Development Version: If there is an error in the jQuery library, the Development version is useful for debugging because the code is on multiple lines and contains comments. 5

How do I use jQuery? Discussion: You include jQuery the same way you would include any external JavaScript file. Local Installation Example: <script type="text/javascript" src="js/jquery.min.js"> Content Delivery Network (CDN) Example (preferred): 6 eventViaElement.html

“Hello World” CSS Include Discussion: CSS code can specified inline via the tag or included via the link tag. Inline via tag: div#divBlock {... } Included via tag: <link rel="stylesheet" type="text/css" href="css/style.css"> 7 helloWorldViaJavaScript.html helloWorldViajQuery.html

“Hello World” CSS Content Discussion: The following JavaScript and jQuery example will use the style below for a blue DIV. Example CSS: div#divBlock { width: 300px; height: 100px; line-height: 100px; /* vertical alignment */ font-size: 50px; font-weight: bold; color: yellow; background-color: blue; text-align: center; padding: 25px; } 8 style.css

“Hello World” via JavaScript Discussion: The element is retrieved via getElementById() method. Then the HTML is set via the “innerHTML” property. Example: var theDiv = document.getElementById( "divBlock" ); theDiv.innerHTML = "Hello World"; 9 helloWorldViaJavaScript.html

“Hello World” via jQuery Discussion: The element is retrieved via “div#divBlock” selector. Then the HTML content is set via the “html” method. Example: jQuery( "div#divBlock" ).html( "Hello World" ); 10 helloWorldViajQuery.html

jQuery() and $()  All jQuery calls use the “jQuery” object. For example: jQuery( "div#divBlock" ).html( "Hello World" );  The “$” is an alias for the “jQuery” object. For example: $( "div#divBlock" ).html( "Hello World" ); 11 helloWorldViajQuery.html

12 jQuery Selectors Discussion: One of the strengths of jQuery is that it has very robust element selector specification. Documentation: Example: // all DIVs containing a (nested) paragraph $( "div:has(p)" ).addClass( "classy" ); $( "#idName" ).append( " " ); $( "p.class" ).attr( "title", "Call me Mr." ); $("h1:contains('John')").css("color", "red");

Event Handling Discussion: jQuery can also add event handlers to elements. Documentation: Example: $("p").click( function() { alert('You clicked?'); }); 13 elementEventClick.html

Window Loading Discussion: The jQuery “ready()” method takes the place of the “onload” event. Example: $(document).ready( function() { $(".quote").click( function() { alert( "What's up?" ); }); 14 windowLoadViaReadyEvent.html

Effects Discussion: The most common effects are “hide()”, “show()”, “fadeIn()”, “fadeOut()”, “toggle()”. Documentation: 15

fadeOut() Effect Example: Click to Fade $( "#fadeDiv" ).click( function() { $( "#fadeImage" ).fadeOut( "slow", function() { alert( "Fade completed" ); // animation complete }); 16 effectsFadeOut.html

toggle() Effect Example: Click to Toggle $( "#toggleDiv" ).click( function() { $("#toggleImage").toggle( "slow", function() { alert( "Toggle completed" ); }); 17 effectsToggle.html