jQueryTutorial

Cssborder 3px solid red muljple selector selector1

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: uot;div:contains('John’)").css( "text- decoration", "underline" ); •  Form var input = $(":button").addClass( "marked" ); •  Hierarchy $("form input").css( "border", "2px dotted blue" ); •  See: hTp://api.jquery.com/category/selectors Copyright Ellis Horowitz 2013 6 jQuery Basic Selectors •  •  These are examples of “Basic” selectors, based on CSS1: All Selector (“*”): selects all elements var elementCount = $("*").css("border", "3px solid red" ).length; •  Class Selector (“.class”): selects all elements with a given class $(".myClass").css("border", "3px solid red"); •  Element selector (“element”): selects all elements with the given tag name $("div").css("border", "9px solid red"); •  ID selector (“#id”): selects a single element with the given id aTribute $("#myDiv").css("border", "3px solid red"); •  •  MulJple selector (“selector1, selector2, selectorN"): selects a combined result of all the specified selectors $("div, span, p.myClass").css("border", "3px solid red"); See: hTp://api.jquery.com/category/selectors/basic- css- selectors/ Copyright Ellis Horowitz 2013 7 jQuery FuncJons •  Either aTached to the jQuery object or chained off of a selector statement. •  Most funcJons return the jQuery object they were originally passed, so you can perform many acJons in a single line. •  The same funcJon can perform an enJrely different acJon based on the number and type of parameters. Copyright Ellis Horowitz 2013 8 jQuery Examples •  Remember these examples? hTp://www- scf.usc.edu/~csci571/Special/ domexamples/ •  We’ll revisit the examples, but with jQuery instead! Copyright Ellis Horowitz 2013 9 Example 1: document.getElementById.style.color JavaScript w/o jQuery hex=255 // Initial color value. function fadetext() { if(hex>0) { //If color is not black yet hex - = 11; // increase color darkness document.getElementById("sample").style.color="rgb("+hex +","+hex+","+hex+")"; setTimeout("fadetext()",20); } else hex=255 //reset hex value...
View Full Document

Ask a homework question - tutors are online