CT-376 jQuery
Most popular javascript
library today
http://jquery.com
Latest version: 2.1.1
jQuery
•
•
•
•
•
•
•
•
Elements
Css
Effects and animations
Ajax
Cross browser compatible
Widgets
Events
Much more, ..
jQuery
• Cannot look at everything within
the jQuery library
• Retrieve elements, change
element content, css, some
special effects, ajax, some
interactions, some widgets, in
depth focus on autocomplete
jQuery - import
• Can automatically import the
latest version of jQuery
• <script type = “text/javascript”
src =
http://code.jquery.com/jquerylatest.min.js></script>
jQuery
• Typically:
• We retrieve a list of elements
• We perform some action on that
list
jQuery - syntax
• To retrieve a list of HTML
elements:
• $( comma delimited list of
selectors )
• Selectors can be defined by tag
name, class, id
jQuery - syntax
• $ is another name for jQuery, a
function
• $( “p, h1” ) is equivalent to
jQuery( “p, h1” )
• Note the syntax: functionName(
argumentList)
jQuery - syntax
• To perform some action on a list
of HTML elements:
• $( comma delimited list of
selectors ).someFunction(
argument list );
jQuery - elements
• $( comma delimited list of
selectors )
•  returns an “array” of elements
• $( “p” ), $( “.class1” ), $(“#id44”)
• $( “#p2, h1, .class34, p” )
•  eliminates the duplicates
jQuery - elements
• $( “p a, h2, h1 .class67” )
• More functionality
• $( “p:first” )  first paragraph,
still returns an array
• $(“:contains( content)” ) 
elements containing content
jQuery - elements
•
•
•
•
•
•
$( “p:eq(1), p:eq(3)” )
2nd and 4th paragraph captured
Index starts at 0
1  2nd paragraph
3  4th paragraph
 More details, .., on web
jQuery - html
• html function  equivalent to
innerHTML attribute in DOM
• var elts = $( “p” );
• elts.html( “HI” );
•  changes each paragraph’s
text to HI
jQuery - html
• append function  appends to
existing HTML between element
tags
• var elts = $( “p” );
• elts.appends( “BYE” );
•  appends BYE to each
paragraph
jQuery - html
• after function  inserts some
HTML after elements
• var elts = $( “p” );
• elts.after( “<h1>INSERT</h1>” );
•  places h1 header INSERT
after each paragraph
jQuery - html
• We can wait until the document
is loaded before executing some
code:
• $(document).ready( function( )
•{
• // some code here
• } );
jQuery - html
•
•
•
•
•
Shorter version:
$( function( )
{
// some code here
} );
jQuery - html
• Note that the function in the previous
2 slides is anonymous .. but it does
not have to be
• $( go ); // or $(document).ready( go );
• function go( )
• {
• // some code here
• }
jQuery – css class
• We can add or remove a css
class to a list of elements
• // add class blue to all
paragraphs
• $( “p” ).addClass( “blue” );
• // add classes blue and red to all
paragraphs
• $( “p” ).addClass( “blue red” );
jQuery – css class
• // remove class blue for all
paragraphs
• $( “p” ).removeClass( “blue” );
• // toggle class blue on and off for
all paragraphs
• $( “p” ).toggleClass( “blue” );
jQuery - css
• css function  changing the
style of elements
• var elts = $( “p” );
• elts.css( “background-color”,
“blue” ); /* 2 parameters,
attribute and value */
•  changes background color of
each paragraph to blue
jQuery - css
• Other form of css function : 1
parameter
• var elts = $( “p” );
• elts.css( {“background-color”: “red”,
“color”: “green” } ); /* 1 parameter,
css style */
•  changes background color to red
and foreground color to green for
each paragraph
jQuery - css
• height and width functions 
changing the size of elements
• var elts = $( “#p2, #p3” );
• elts.width( “200px”)
• elts.height( “300px” );
•  changes width and height to
200 and 300 for elements whose
id is p2 or p3