CT-376 jQuery Most popular javascript library today Latest version: 2.1.1

jQuery ElementsElements CssCss Effects and animationsEffects and animations AjaxAjax Cross browser compatibleCross browser compatible WidgetsWidgets EventsEvents Much more,..Much more,..

jQuery Cannot look at everything within the jQuery libraryCannot 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 autocompleteRetrieve 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 jQueryCan automatically import the latest version of jQuery

jQuery Typically:Typically: We retrieve a list of elementsWe retrieve a list of elements We perform some action on that listWe perform some action on that list

jQuery - syntax To retrieve a list of HTML elements:To retrieve a list of HTML elements: $( comma delimited list of selectors )$( comma delimited list of selectors ) Selectors can be defined by tag name, class, idSelectors can be defined by tag name, class, id

jQuery - syntax $ is another name for jQuery, a function$ is another name for jQuery, a function $( “p, h1” ) is equivalent to jQuery( “p, h1” )$( “p, h1” ) is equivalent to jQuery( “p, h1” ) Note the syntax: functionName( argumentList)Note the syntax: functionName( argumentList)

jQuery - syntax To perform some action on a list of HTML elements:To perform some action on a list of HTML elements: $( comma delimited list of selectors ).someFunction( argument list );$( comma delimited list of selectors ).someFunction( argument list );

jQuery - elements $( comma delimited list of selectors )$( comma delimited list of selectors )  returns an “array” of elements  returns an “array” of elements $( “p” ), $( “.class1” ), $(“#id44”)$( “p” ), $( “.class1” ), $(“#id44”) $( “#p2, h1,.class34, p” )$( “#p2, h1,.class34, p” )  eliminates the duplicates  eliminates the duplicates

jQuery - elements $( “p a, h2, h1.class67” )$( “p a, h2, h1.class67” ) More functionalityMore functionality $( “p:first” )  first paragraph, still returns an array$( “p:first” )  first paragraph, still returns an array $(“:contains( content)” )  elements containing content$(“:contains( content)” )  elements containing content

jQuery - elements $( “p:eq(1), p:eq(3)” )$( “p:eq(1), p:eq(3)” ) 2 nd and 4 th paragraph captured2 nd and 4 th paragraph captured Index starts at 0Index starts at 0 1  2 nd paragraph1  2 nd paragraph 3  4 th paragraph3  4 th paragraph  More details,.., on web  More details,.., on web

jQuery - html html function  equivalent to innerHTML attribute in DOMhtml function  equivalent to innerHTML attribute in DOM var elts = $( “p” );var elts = $( “p” ); elts.html( “HI” );elts.html( “HI” );  changes each paragraph’s text to HI  changes each paragraph’s text to HI

jQuery - html append function  appends to existing HTML between element tagsappend function  appends to existing HTML between element tags var elts = $( “p” );var elts = $( “p” ); elts.appends( “BYE” );elts.appends( “BYE” );  appends BYE to each paragraph  appends BYE to each paragraph

jQuery - html after function  inserts some HTML after elementsafter function  inserts some HTML after elements var elts = $( “p” );var elts = $( “p” ); elts.after( “ INSERT ” );elts.after( “ INSERT ” );  places h1 header INSERT after each paragraph  places h1 header INSERT after each paragraph

jQuery - html We can wait until the document is loaded before executing some code:We can wait until the document is loaded before executing some code: $(document).ready( function( )$(document).ready( function( ) { // some code here // some code here } );} );

jQuery - html Shorter version:Shorter version: $( function( )$( function( ) { // some code here // some code here } );} );

jQuery - html Note that the function in the previous 2 slides is anonymous.. but it does not have to beNote that the function in the previous 2 slides is anonymous.. but it does not have to be $( go ); // or $(document).ready( go );$( go ); // or $(document).ready( go ); function go( )function go( ) { // some code here // some code here }

jQuery – css class We can add or remove a css class to a list of elementsWe can add or remove a css class to a list of elements // add class blue to all paragraphs// add class blue to all paragraphs $( “p” ).addClass( “blue” );$( “p” ).addClass( “blue” ); // add classes blue and red to all paragraphs// add classes blue and red to all paragraphs $( “p” ).addClass( “blue red” );$( “p” ).addClass( “blue red” );

jQuery – css class // remove class blue for all paragraphs// remove class blue for all paragraphs $( “p” ).removeClass( “blue” );$( “p” ).removeClass( “blue” ); // toggle class blue on and off for all paragraphs// toggle class blue on and off for all paragraphs $( “p” ).toggleClass( “blue” );$( “p” ).toggleClass( “blue” );

jQuery - css css function  changing the style of elementscss function  changing the style of elements var elts = $( “p” );var elts = $( “p” ); elts.css( “background-color”, “blue” ); /* 2 parameters, attribute and value */elts.css( “background-color”, “blue” ); /* 2 parameters, attribute and value */  changes background color of each paragraph to blue  changes background color of each paragraph to blue

jQuery - css Other form of css function : 1 parameterOther form of css function : 1 parameter var elts = $( “p” );var elts = $( “p” ); elts.css( {“background-color”: “red”, “color”: “green” } ); /* 1 parameter, css style */elts.css( {“background-color”: “red”, “color”: “green” } ); /* 1 parameter, css style */  changes background color to red and foreground color to green for each paragraph  changes background color to red and foreground color to green for each paragraph

jQuery - css height and width functions  changing the size of elementsheight and width functions  changing the size of elements var elts = $( “#p2, #p3” );var elts = $( “#p2, #p3” ); elts.width( “200px”)elts.width( “200px”) elts.height( “300px” );elts.height( “300px” );  changes width and height to 200 and 300 for elements whose id is p2 or p3  changes width and height to 200 and 300 for elements whose id is p2 or p3