Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I JQuery Part I Jongwook Woo, PhD California State University, Los Angeles Computer Information System Department

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Content njQuery HOME njQuery Intro njQuery Syntax njQuery Selectors

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System What is jQuery? njQuery is a library of JavaScript Functions. ma lightweight "write less, do more" JavaScript library. nThe jQuery library contains the following features: mHTML element selections mHTML element manipulation mCSS manipulation mHTML event functions mJavaScript Effects and animations mHTML DOM traversal and modification mAJAX mUtilities

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System jQuery Example nAdding the jQuery Library to Your Pages mstored as a single JavaScript file, –containing all the jQuery methods. mIt can be added to a web page with the following mark- up: Please note that the tag should be inside the page's section. nBasic jQuery Example mThe following example: the jQuery hide() method, –hiding all elements in an HTML document.

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System jQuery Example (Cont’d) $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); This is a heading This is a paragraph. This is another paragraph. Click me

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System jQuery Download nTwo versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading). mBoth versions can be downloaded from jQuery.com.jQuery.com nAlternatives (hosted jQuery lib) to Downloading mGoogle mMicrosoft

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System jQuery Syntax nBasic syntax is: $(selector).action() mA dollar sign to define jQuery mA (selector) to "query (or find)" HTML elements mA jQuery action() to be performed on the element(s) nExamples: m$(this).hide() - hides current element m$("p").hide() - hides all paragraphs m$("p.test").hide() - hides all paragraphs with class="test" m$("#test").hide() - hides the element with id="test"

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Selectors njQuery Element Selectors muses CSS selectors to select HTML elements. m$("p") selects all elements. m$("p.intro") selects all elements with class="intro". m$("p#demo") selects all elements with id="demo". njQuery Attribute Selectors muses XPath expressions to select elements with given attributes. m$("[href]") select all elements with an href attribute. m$("[href='#']") select all elements with an href value equal to "#". m$("[href!='#']") select all elements with an href attribute NOT equal to "#". m$("[href$='.jpg']") –select all elements with an href attribute that ends with ".jpg".

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Selectors (Cont’d) njQuery CSS Selectors mused to change CSS properties for HTML elements. mThe following changes the background-color of all p elements to yellow: –$("p").css("background-color","yellow");

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Selectors More Examples SyntaxDescription $(this)Current HTML element $("p")All elements $("p.intro")All elements with class="intro" $("p#intro")All elements with id="intro" $("p#intro:first")The first element with id="intro" $(".intro")All elements with class="intro" $("#intro")The first element with id="intro" $("ul li:first")The first element of each $("[href$='.jpg']")All elements with an href attribute that ends with ".jpg" $("div#intro.head")All elements with class="head" inside a element with id="intro"

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System The Document Ready Function nprevent any jQuery code from running before the document is finished loading (is ready). $(document).ready(function(){ // jQuery functions go here... }); nsome examples of actions that can fail if functions are run before the document is fully loaded: mTrying to hide an element that doesn't exist mTrying to get the size of an image that is not loaded