Your SlideShare is downloading. ×
  • Like
  • Save
jQuery Basics for Web Producers
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQuery Basics for Web Producers


Some jQuery basics for when you're ready to add some interactivity to your HTML pages. It helps to know some CSS, but you can figure it out even if you're not a CSS pro.

Some jQuery basics for when you're ready to add some interactivity to your HTML pages. It helps to know some CSS, but you can figure it out even if you're not a CSS pro.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. jQuery Basicsfor WebProducers Adnaan Wasey Twitter @adnaanwasey
  • 2. What is jQueryjQuery is a JavaScript library that many peopleuse and like because...● Its easy to add interactivity to a page / web app● It handles the quirks of browsers● You can use it without programming knowledge● It plays nicely with other code● There is often help for your problem online
  • 3. Where does jQuery fit intoHTML/CSS/JavaScript?● HTML defines page structure and media (i.e., images, video)● CSS defines the style of the elements● JavaScript is a programming language that ties into HTML and CSS to make pages interactivejQuery adds on top of JavaScript to ease a lot of tasksthat would be cumbersome to code.With jQuery, youre working in JavaScript, so JavaScriptcode can be used along with jQuery code.
  • 4. The Two Things jQuery Does1. Selects elements or a group of elements2. Takes Action on elements: a. add or remove content or data (dynamic HTML) b. alter the style (dynamic CSS) c. add visual effects and animation (advanced CSS) d. convert elements to hotspots for interactivity (they will "listen" for "events," then act) e. analyze element content (for use with JavaScript)
  • 5. Two Steps to Get Started(Youll see these two steps at the start of every jQuery tutorial...)1. Add the library to the page.You can link to a version youve downloaded or onefrom a fast site like Google.<head> <script src=""></script></head>
  • 6. Two Steps to Get Started2. Add the starter code.This waits for the page to load. (You dont want your codeacting on elements that dont exist yet.)Your jQuery code will go in a <script> tag between thesetwo lines of code.<script> $(document).ready(function() { //YOUR CODE GOES HERE. });</script>
  • 7. Understanding a jQuery CommandThere are two parts to a jQuery command.Heres a command that will find/select anelement named popupbox, then make it visible. $("#popupbox").show(); selector action
  • 8. If You Know CSS, the SelectorTargets Just Like CSS<div id="main" class="mainstyle1"> <div id="links"> <img src="g.png" id="link1" class="linkable" /> <img src="y.png" id="link2" class="linkable" /> </div></div>You can select HTML (IDs, elements) and CSS (classes).$("#links") Selects the element with the ID links$(".linkable") Selects the element of the CSS classlinkable$("div") Selects both div elements$("div.main img")Selects the img elements within the div
  • 9. Once You Target a "Selection" YouCan Act On It1. Add or remove content or data (i.e., edit HTML) ○ html(), append(), remove()2. Alter the style (i.e., edit CSS) ○ css(), addClass()3. Visual effects and animation (Complex in CSS alone) ○ show(), hide(), fadeIn(), fadeOut(), animate()4. Create hotspots (These "listen" for "events") ○ click(), hover()5. Analyze content (For tying into other JavaScript code) ○ val(), html()(jQuerys reference guide has the complete list of these actions.)
  • 10. ActionsSome actions require parameters, some dont take any,some have optional parameters.$("#popupbox").show ( );$("#popupbox").show ( "slow" );$("#header") .html( "<h1>Title</h1>" );$(".hilite") .css ( "color", "yellow" );
  • 11. Interactivity with "Functions"For "events" (the creation of hotspots or delayed interactivity), itsoften useful to add code to the action.This is done using a "function" as a parameter (when allowed). $("#footer").click( function() { $(this).addClass("hilite"); } );this is a special kind of selector that picks the current element, inthis case the clicked element with the ID footer.
  • 12. Interactivity with "Functions"The hover() action takes two parameters, separated by acomma. The first happens when the mouse hovers over theelement, the second happens when the mouse leaves theelement. $("#header").hover( function(){$(this).addClass("hilite");} , function(){$(this).removeClass("hilite");} );
  • 13. Sample Code<!doctype html><html><head><script src=""></script><style> .hilite {background-color:yellow;} #header {outline:1px dotted black;} #main {outline:1px dotted red;} #footer {outline:1px dotted blue;}</style></head><body><div id="container"> <div id="header"><h1>Welcome!</h1></div> <div id="main"><p>This page demonstrates some HTML basics.</div> <div id="footer">&copy; 2013</div></div><script>$(document).ready(function(){ //add/remove content //$("#main").html(<div id="div0">div0</div>); //$("#main").append(<div id="div1">div1</div>); //$("#footer").remove(); //alter style //$("#header").css("color","red"); //$("#main").addClass("hilite"); //effects
  • 14. jQuery TutorialsThere are many. Here are a few:● ○ Also contains a reference for all "actions"●● A more advanced tutorial: ○ more about jQuery:●
  • 15. jQuery Basicsfor WebProducers Adnaan Wasey Twitter @adnaanwasey