CHAPTER 5 jQuery อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1

Content jQuery Introduction jQuery Get Started jQuery Syntax jQuery Selectors jQuery Event Methods jQuery Effects - Hide and Show jQuery Effects - Fading jQuery Effects - Sliding jQuery Effects - Animation 2

Content jQuery Stop Animations jQuery Callback Functions jQuery - Chaining jQuery - Get Content and Attributes jQuery - Set Content and Attributes jQuery - Add Elements jQuery - Remove Elements jQuery - Get and Set CSS Classes jQuery - css() Method 3

jQuery Introduction What is jQuery? jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. The jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities 4

jQuery Get Started Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google 5 Downloading jQuery Download => jQuery.com The jQuery library is a single JavaScript file, and you reference it with the HTML

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

jQuery Syntax (cont.) The Document Ready Event $(document).ready(function(){ // jQuery methods go here... }); 7

jQuery Selectors jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.CSS Selectors 8

jQuery Selectors (cont.) The element Selector Example $(document).ready(function(){ $("button").click(function(){ $("p").hide();//use elements }); }); 9 The #id Selector Example $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); //use id #test }); });

jQuery Selectors (cont.) The.class Selector Example $(document).ready(function(){ $("button").click(function(){ $(".test").hide();//use class.test }); }); 10 More Examples of jQuery Selectors SyntaxDescription $(“*")Selects all elements $(this)Selects the current HTML element $("p.intro")Selects all elements with class="intro" $("p:first")Selects the first element

jQuery Event Methods What are Events? 11 Mouse EventsKeyboard EventsForm EventsDocument/Window Events clickkeypresssubmitload dblclickkeydownchangeresize mouseenterkeyupfocusscroll mouseleave blurunload jQuery Syntax For Event Methods $("p").click(function(){ // action goes here!! });

jQuery Event Methods (cont.) Commonly Used jQuery Event Methods click() Example $("p").click(function(){ $(this).hide(); }); dblclick() Example $("p").dblclick(function(){ $(this).hide(); }); 12

jQuery Event Methods (cont.) Commonly Used jQuery Event Methods mouseenter() Example $("#p1").mouseenter(function(){ alert("You entered p1!"); }); mouseleave() Example $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); 13

jQuery Event Methods (cont.) Commonly Used jQuery Event Methods mousedown() Example $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); mouseup() Example $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); 14

jQuery Event Methods (cont.) Commonly Used jQuery Event Methods hover() Example $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); focus() Example $("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); 15

jQuery Event Methods (cont.) Commonly Used jQuery Event Methods focus() And blue() $("input").focus(function(){ $(this).css("background-color", “red"); }); $("input").blur(function(){ $(this).css("background-color", “green"); }); 16

jQuery Effects - Hide and Show jQuery hide() and show() Syntax: $(selector).hide(speed,callback); Example $("#hide").click(function(){ $("p").hide(1000); }); $("#show").click(function(){ $("p").show(500); }); 17

jQuery Effects - Hide and Show (cont.) jQuery toggle() With jQuery, you can toggle between the hide() and show() methods with the toggle() method. Example $("button").click(function(){ $("p").toggle(); }); 18

jQuery Effects - Fading With jQuery you can fade elements in and out of visibility. jQuery Fading Methods fadeIn() fadeOut() fadeToggle() fadeTo() 19

jQuery Effects - Fading (cont.) jQuery fadeIn() And fadeOut() Method Syntax: $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); Example $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); 20

jQuery Effects - Fading (cont.) jQuery fadeToggle() Method Syntax: $(selector).fadeToggle(speed,callback); Example $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); 21

jQuery Effects - Fading (cont.) jQuery fadeTo() Method The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1). Syntax: $(selector).fadeTo(speed,opacity,callback); Example $("button").click(function(){ $("#div1").fadeTo("slow", 0.15); $("#div2").fadeTo("slow", 0.4); $("#div3").fadeTo("slow", 0.7); }); 22

jQuery Effects - Sliding jQuery Sliding Methods With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() 23

jQuery Effects - Sliding (cont.) jQuery slideDown() And slideUp() Method Syntax: $(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); Example $("#flip").click(function(){ $("#panel").slideDown(); }); 24

jQuery Effects - Sliding (cont.) jQuery slideToggle() Method Syntax: $(selector).slideToggle(speed,callback); Example $("#flip").click(function(){ $("#panel").slideToggle(); }); 25

jQuery Effects - Animation jQuery Animations - The animate() Method Syntax: $(selector).animate({params},speed,callback); Example $("button").click(function(){ $("div").animate({left: '250px'}); }); *remember to first set the CSS position property of the element to relative, fixed, or absolute! 26

jQuery Effects - Animation (cont.) jQuery Animations - The animate() Method Syntax: $(selector).animate({params},speed,callback); Example $("button").click(function(){ $("div").animate({left: '250px'}); }); *remember to first set the CSS position property of the element to relative, fixed, or absolute! 27

jQuery Stop Animations jQuery stop() Method Syntax: $(selector).stop(stopAll,goToEnd); Example $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); 28 #panel, #flip { padding: 5px; font-size: 18px; text-align: center; background-color: #555; color: white; border: solid 1px #666; border-radius: 3px; } #panel { padding: 50px; display: none; }

jQuery Callback Functions syntax: $(selector).hide(speed,callback); Example with Callback $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); 29

jQuery - Chaining jQuery Callback Functions syntax: $(selector).hide(speed,callback); Example with Callback $("button").click(function(){ $("#p1").css("color", "red").slideUp(2000).slideDown(2000); }); 30

jQuery - Get Content and Attributes Get Content - text(), html(), and val() Example $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $("#btn3").click(function(){ alert("Value: " + $("#test2").val()); }); 31

jQuery - Get Content and Attributes (cont.) Get Attributes - attr() Example $("button").click(function(){ alert($("#w3s").attr("href")); }); 32

jQuery - Set Content and Attributes Set Content - text(), html(), and val() Example $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html(" Hello world! "); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); 33

jQuery - Set Content and Attributes (cont.) Set Attributes - attr() Example $("button").click(function(){ $("#w3s").attr("href"," "); }); 34

jQuery - Add Elements Add New HTML Content We will look at four jQuery methods that are used to add new content: append() - Inserts content at the end of the selected elements prepend() - Inserts content at the beginning of the selected elements after() - Inserts content after the selected elements before() - Inserts content before the selected elements 35

jQuery - Add Elements (cont.) jQuery append() Method Example $("p").append("Some appended text."); 36 jQuery prepend() Method Example $("p").prepend("Some prepended text."); jQuery after() and before() Methods Example $("img").after("Some text after"); $("img").before("Some text before");

jQuery - Remove Elements jQuery remove() Method Example $("#div1").remove(); 37 jQuery empty() Method Example $("#div1").empty(); Filter the Elements to be Removed Example $("p").remove(".test,.demo");

jQuery - Get and Set CSS Classes Example Stylesheet.blue { color: blue; } 38 jQuery addClass() Example $("button").click(function(){ $("h1, h2, p").addClass("blue"); }); jQuery romoveClass() Example $("button").click(function(){ $("h1, h2, p").removeClass("blue"); }); Or use toggleClass() $("h1, h2, p").toggleClass("blue");

jQuery - css() Method Return a CSS Property $("p").css("background-color"); 39 Set a CSS Property $("p").css("background-color", "yellow"); Set Multiple CSS Properties $("p").css({"background-color": "yellow", "font- size": "200%"});

40 THE END