jQueryTutorial

Clickfunction counterhtmlnumber of clicks

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: } http://www-scf.usc.edu/~csci571/Special/domexamples/ex1.html Copyright Ellis Horowitz 2013 10 Example 1: $.fadeOut(), $.delay(), $.fadeIn() JavaScript with jQuery $(function() { // when document is ready $("#fadeText").click(function() { // set a onClick handler on fadeText $("h3").fadeOut(125).delay().fadeIn(125); // fadeOut the h3 for 125 ms, delay, then fadeIn }); }); http://www-scf.usc.edu/~csci571/Special/jquery_examples/ex1.html Copyright Ellis Horowitz 2013 11 Example 2: document.getElementsByTagName JavaScript w/o jQuery function handleAllTags() { var arrayOfDocFonts; if (document.all || document.getElementById) { arrayOfDocFonts = document.getElementsByTagName("font"); } else { document.write("Unrecognized Browser Detected"); } alert("Number of font tags in this document are " + arrayOfDocFonts.length + "."); } JavaScript w/ jQuery $(function() { // when the doc is loaded, $("#countTags").click(function() { // when countTags is clicked, alert("Number of font tags in this document are " + $("font").length); // alert the number of font tags in the HTML }); }); http://www-scf.usc.edu/~csci571/Special/domexamples/ex2.html http://www-scf.usc.edu/~csci571/Special/jquery_examples/ex2.html Copyright Ellis Horowitz 2013 12 Example 3: document.getElementById().innerHTML JavaScript w/o jQuery var hits = 0; function updateMessage() { hits += 1; document.getElementById("counter").innerHTML = "Number of clicks = " + hits; } JavaScript w/ jQuery $(function() { var hits = 0; $("#updateMessage").click(function() { $("#counter").html("Number of clicks = " + ++hits); }); }); http://www-scf.usc.edu/~csci571/Special/domexamples/ex3.html http://www-scf.usc.edu/~csci571/Special/jquery_examples/ex3.html Copyright Ellis Horowitz 2013 13 Example 4: Uses innerHTML JavaScript w/o jQuery function notSupported( ) {alert('your browser is not supported');} function setInnerHTML(nm, value) { if (nm == '') return; var element=document.getElementById?document.getElementById(nm):(document.all? document.all(nm):null) if (element) { if(element.innerHTML) { element.innerHTML=value; } else notSupported( ); } else NotSupported( ); } Copyright Ellis Horowitz 2013 http://www-scf.usc.edu/~csci571/Special/dom...
View Full Document

This note was uploaded on 01/29/2014 for the course CSCI 571 taught by Professor Papa during the Spring '07 term at USC.

Ask a homework question - tutors are online