1. Browser scripting jQuery Edited by: Trần Thị Mỹ Dung Ref:w3schools.com

2. What is jQuery? A library Xpath+CSS selector syntax. Containing the following features: - HTML element selections/manipulation - CSS manipulation - HTML event functions - JavaScript effects & animations - HTML DOM traversal & modification - AJAX - Utilities

3. We have to study jQuery. Why? Easy to learn. Easy to practise. We had a good knowledge of: HTML, CSS, JavaScript through the previous seminar. So jQuery is the next step. It’s very amazing. Trust me!

4. Downloading jQuery Lib Copy jQuery Lib from my laptop (latest version: jquery-1.7.1.js) Download: http://code.jquery.com/jquery-1.7.1.jshttp://code.jquery.com/jquery-1.7.1.js Link to hosted jQuery when using: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jqu ery.min.js http://ajax.microsoft.com/ajax/jquery/jquery- 1.7.1.min.js

5. Content What is jQuery? We have to study jQuery. Why? Downloading jQuery jQuery syntax jQuery practise

6. jQuery Syntax-1-Basic syntax Basic syntax : $(selector).action() A dollar sign to define jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s) Examples: $(this).hide() - hides current element $("p").hide() - hides all paragraphs $("p.test").hide() - hides all paragraphs with class="test" $("#demo").hide() - hides the element with id=“demo"

7. jQuery Syntax-2-Element Selectors Example: $("p") selects all elements. $("p.intro") selects all elements with class="intro". $("p#demo") selects all elements with id="demo". $("div#intro.head") select all elements with class="head" inside a element with id="intro"

8. jQuery Syntax-3-Attribute Selectors Example: $("[href]") select all elements with an href attribute. $("[href='#']") select all elements with an href value equal to "#". $("[href!='#']") select all elements with an href attribute NOT equal to "#". $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".

9. jQuery Syntax-4-CSS Selectors CSS PropertiesDescription $(selector).css(name)Get the style property value of the first matched element $(selector).css(name,value)Set the value of one style property for matched elements $(selector).css({properties})Set multiple style properties for matched elements $(selector).height(value)Set the height of matched elements $(selector).width(value)Set the width of matched elements Ref

10. jQuery Syntax-5-Basic Event Event methods trigger, or bind a function to an event for all matching elements. Trigger example: $("button").click() - triggers the click event for a button element. Binding example: $("button").click(function(){$("img").hide()}) - binds a function to the click event.

11. jQuery Syntax-3-jQuery Callback Syntax example: $(selector).hide(speed,callback) The callback parameter is a function to be executed after the hide effect is completed. Sample: $("p").hide(1000,function(){ alert("The paragraph is now hidden"); });

12. jQuery Syntax-4-jQuery Effects FunctionDescription $(selector).hide()Hide selected elements $(selector).show()Show selected elements $(selector).toggle()Toggle (between hide and show) selected elements $(selector).slideDown()Slide-down (show) selected elements $(selector).slideUp()Slide-up (hide) selected elements $(selector).slideToggle()Toggle slide-up and slide-down of selected elements $(selector).fadeIn()Fade in selected elements $(selector).fadeOut()Fade out selected elements $(selector).fadeTo()Fade out selected elements to a given opacity $(selector).animate()Run a custom animation on selected elements Ref

13. Practise Let’s explore all examples.explore