jQuery

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 •

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( “INSERT” ); •  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