JavaScript jQuery Examples (Week 14, Lesson 2) PDF

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 14. jQuery Examples Lesson 2. jQuery Examples(2) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery Effect Methods jQuery HTML&CSS Methods Learning Objectives Can explain and use the jQue...

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 14. jQuery Examples Lesson 2. jQuery Examples(2) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery Effect Methods jQuery HTML&CSS Methods Learning Objectives Can explain and use the jQuery Effect Methods. Can explain and use the jQuery HTML&CSS Methods. 1. jQuery Effect Methods 2. jQuery HTML&CSS Methods 1. jQuery Effect Methods(1) 1 jQuery Hide and Show Methods(1) Description of jQuery Hide and Show Methods Syntax Description hide() Hides the selected elements show() Shows the selected elements toggle() Toggles between the hide() and show() methods 1. jQuery Effect Methods(2) 1 jQuery Hide and Show Methods(2) Example of hide() and show() Methods - The following example demonstrates the speed parameter with hide(). Hide $("#hide").click(function(){ Show $("p").hide(1000); }); This is a paragraph $("#show").click(function(){ $("p").show(); }); 1. jQuery Effect Methods(3) 1 jQuery Hide and Show Methods(3) Example of toggle() Methods - Shown elements are hidden and hidden elements are shown. $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); Toggle between hiding and showing the paragraphs This is a paragraph with little content. This is another small paragraph. 1. jQuery Effect Methods(4) 2 jQuery Fade Methods(1) Description of jQuery Fade Methods - The following table lists all the jQuery methods for creating animation effects. Syntax Description fadeIn() Fades in the selected elements fadeOut() Fades out the selected elements fadeTo() Fades in/out the selected elements to a given opacity fadeToggle() Toggles between the fadeIn() and fadeOut() methods 1. jQuery Effect Methods(5) 2 jQuery Fade Methods(2) Example of of jQuery fadeIn() - Demonstrate fadeIn() with different parameters. $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); Click to fade in boxes 1. jQuery Effect Methods(6) 2 jQuery Fade Methods(3) Example of of jQuery fadeOut() - Demonstrate fadeOut() with different parameters. $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); }); Click to fade out boxes 1. jQuery Effect Methods(7) 2 jQuery Fade Methods(4) Example of of jQuery fadeToggle() - Demonstrate fadeToggle() with different speed parameters. $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); Click to fade in/out boxes 1. jQuery Effect Methods(8) 3 jQuery Slide Methods(1) Examples of jQuery Slide Methods - With jQuery you can create a sliding effect on elements. Syntax Description slideDown() Slides-down (shows) the selected elements slideToggle() Toggles between the slideUp() and slideDown() methods slideUp() Slides-up (hides) the selected elements 1. jQuery Effect Methods(9) 3 jQuery Slide Methods(2) Example of jQuery slideDown() Method() - The following example demonstrates the slideDown() method. #panel, #flip { padding: 5px; text-align: center; $(document).ready(function(){ background-color: #e5eecc; $("#flip").click(function(){ border: solid 1px #c3c3c3; $("#panel").slideDown("slow"); } }); #panel { }); padding: 50px; display: none; } Click to slide down panel Hello world! 1. jQuery Effect Methods(10) 3 jQuery Slide Methods(3) Example of jQuery slideUp() Method() - The following example demonstrates the slideUp() method. #panel, #flip { padding: 5px; text-align: center; $(document).ready(function(){ background-color: #e5eecc; $("#flip").click(function(){ border: solid 1px #c3c3c3; $("#panel").slideUp("slow"); } }); #panel { }); padding: 50px; } Click to slide up panel Hello world! 1. jQuery Effect Methods(11) 3 jQuery Slide Methods(4) Example of jQuery slideToggle() Method() - - The following example demonstrates the slideToggle() method. #panel, #flip { padding: 5px; text-align: center; $(document).ready(function(){ background-color: #e5eecc; $("#flip").click(function(){ border: solid 1px #c3c3c3; $("#panel").slideToggle("slow"); } }); #panel { }); padding: 50px; display: none; } Click to slide the panel Hello world! 1. jQuery Effect Methods(12) 4 jQuery Animate and Stop Method(1) Description of jQuery Animate and Stop Method - The following table lists all the jQuery methods for creating animation effects Syntax Description animate() Runs a custom animation on the selected elements stop() Stops the currently running animation for the selected elements 1. jQuery Effect Methods(13) 4 jQuery Animate and Stop Method(2) Example of jQuery animate() - Manipulate Multiple Properties - Notice that multiple properties can be animated at the same time. Start Animation $(document).ready(function(){ $("button").click(function(){ opacity: '0.5', height: '150px', width: '150px' }); }); }); 1. jQuery Effect Methods(14) 4 jQuery Animate and Stop Method(3) Example of jQuery stop() Method - The following example demonstrates the stop() method, with no para- meters. Stop Animation Click to slide Up panel $(document).ready(function(){ $("#flip").click(function(){ Hello world! $("#panel").slideUp(5000); }); $(“button").click(function(){ $("#panel").stop(); }); }); 1. jQuery Effect Methods 2. jQuery HTML&CSS Methods 2. jQuery HTML&CSS Methods(1) 1 Get and Set Content and Attributes(1) Description of jQuery Get and Set Content and Attributes - The following table lists all the methods used to manipulate the HTML and CSS. Syntax Description text() Sets or returns the text content of selected elements html() Sets or returns the content of selected elements val() Sets or returns the value attribute of the selected elements attr() Sets or returns attributes/values of selected elements 2. jQuery HTML&CSS Methods(2) 1 Get and Set Content and Attributes(2) Example of jQuery text() Method - Return the text content of all p elements. $(document).ready(function(){ $("button").click(function(){ alert($(“p”).text()); }); }); button This is a paragraph. This is another paragraph. 2. jQuery HTML&CSS Methods(3) 1 Get and Set Content and Attributes(3) Example of jQuery text() Method - Set text content for all elements. $(document).ready(function(){ $("button").click(function(){ $("p").text("Hello world!"); }); }); button This is a paragraph. This is another paragraph. 2. jQuery HTML&CSS Methods(4) 1 Get and Set Content and Attributes(4) Example of jQuery html() Method - Return the content of the p element. $(document).ready(function(){ $("button").click(function(){ alert($(“p”).html()); }); }); button This is another paragraph. 2. jQuery HTML&CSS Methods(5) 1 Get and Set Content and Attributes(5) Example of jQuery html() Method - Set content for all elements. $(document).ready(function(){ $("button").click(function(){ $("p").html("Hello world!"); }); }); button This is a paragraph. This is another paragraph. 2. jQuery HTML&CSS Methods(6) 1 Get and Set Content and Attributes(6) Example of jQuery val() Method - Return the value attribute. $(document).ready(function(){ $("button").click(function(){ $("input:text").val(); }); }); Name: button 2. jQuery HTML&CSS Methods(7) 1 Get and Set Content and Attributes(7) Example of jQuery val() Method - Set the value of the field. $(document).ready(function(){ $("button").click(function(){ $("input:text").val("Glenn Quagmire"); }); }); Name: button 2. jQuery HTML&CSS Methods(8) 1 Get and Set Content and Attributes(8) Example of jQuery attr() Method - Return the value attribute. $(document).ready(function(){ $("button").click(function(){ alert("Image width: " + $("img").attr("width")); }); }); button 2. jQuery HTML&CSS Methods(9) 1 Get and Set Content and Attributes(9) Example of jQuery attr() Method - Set the attribute and value. $(document).ready(function(){ $("button").click(function(){ $("img").attr("width", "500")); }); }); button 2. jQuery HTML&CSS Methods(10) 2 jQuery Add and Rremove Elements(1) Description of jQuery Add and Rremove Elements - With jQuery, it is easy to add and remove elements/content. Syntax Description append() Inserts content at the end of selected elements prepend() Inserts content at the beginning of selected elements after() Inserts content after selected elements before() Inserts content before selected elements remove() Removes the selected elements (including data and events) empty() Removes all child nodes and content from selected elements 2. jQuery HTML&CSS Methods(11) 2 jQuery Add and Rremove Elements(2) Example - The jQuery append() method inserts content AT THE END of the selected HTML elements. $(document).ready(function(){ $("#btn1").click(function(){ $("p").append("Appended text."); }); $("#btn2").).click(function(){ $("ol").append("Appended item"); }); }); 2. jQuery HTML&CSS Methods(12) 2 jQuery Add and Rremove Elements(3) Example of jQuery append() Method - The jQuery append() method inserts content AT THE END of the selected HTML elements. This is a paragraph. This is another paragraph. List item 1 List item 2 List item 3 Append Text Prepend List Items 2. jQuery HTML&CSS Methods(15) 2 jQuery Add and Rremove Elements(6) Example of jQuery before() and after() Method - The jQuery after() method inserts content AFTER the selected HTML elements. - The jQuery before() method inserts content BEFORE the selected HTML ele- ments. $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("Before"); }); $("#btn2").).click(function(){ $("img").after("After "); }); }); Insert before Insert after 2. jQuery HTML&CSS Methods(16) 2 jQuery Add and Rremove Elements(7) Example of jQuery remove() Method - The jQuery remove() method removes the selected element(s) and its child elements. $(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); }); }); This is a paragraph. Append Text 2. jQuery HTML&CSS Methods(17) 2 jQuery Add and Rremove Elements(8) Example of jQuery empty() Method - The jQuery empty() method removes the child elements of the selected element(s). $(document).ready(function(){ $("button").click(function(){ $("#div1").empty(); }); }); This is a paragraph. Append Text 2. jQuery HTML&CSS Methods(18) 3 jQuery Get and Set CSS Classes(1) Description of jQuery Get and Set CSS Classes - With jQuery, it is easy to manipulate the style of elements. Syntax Description addClass() Adds one or more class names to selected elements removeClass() Removes one or more classes from selected elements Toggles between adding/removing one or more classes from toggleClass() selected elements css() Sets or returns one or more style properties for selected elements 2. jQuery HTML&CSS Methods(19) 3 jQuery Get and Set CSS Classes(2) Example Stylesheet - The following stylesheet will be used for all the examples on this page..important { font-weight: bold; font-size: xx-large; }.blue { color: blue; } 2. jQuery HTML&CSS Methods(20) 3 jQuery Get and Set CSS Classes(3) Example of jQuery addClass() Method - The following example shows how to add class attributes to different elements. - You can select multiple elements, when adding classes $(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); }); This is some important text! Add classes to elements 2. jQuery HTML&CSS Methods(21) 3 jQuery Get and Set CSS Classes(4) Example of jQuery removeClass() Method - The following example shows how to remove a specific class attribute from different elements. $(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").removeClass("blue"); }); }); This is some important text! Add classes to elements 2. jQuery HTML&CSS Methods(22) 3 jQuery Get and Set CSS Classes(5) Example of jQuery toggleClass() Method - The toggleClass() method toggles between adding/removing classes from the selected elements. $(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").toggleClass("blue"); }); }); This is some important text! Add classes to elements 2. jQuery HTML&CSS Methods(23) 3 jQuery Get and Set CSS Classes(6) Example of jQuery css() Method - The css() method sets or returns one or more style properties for the selected elements. - To return the value of a specified CSS property, use the following syntax $(document).ready(function(){ $("button").click(function(){ alert( "Background color = " +$("p").css("background-color"); }); }); This is some important text! Return background-color of p 2. jQuery HTML&CSS Methods(24) 3 jQuery Get and Set CSS Classes(7) Example of jQuery css() Method - The following example will set the background-color value for ALL matched elements. $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color", "yellow"); }); }); This is some important text! Return background-color of p Learning Summary 1. jQuery Effect Methods - You can hide and show HTML elements with the hide() and show() methods with jQuery. - The jQuery fadeIn() method is used to fade in and fade out a element. - The jQuery fadeOut() method is used to fade out a visible element. - The jQuery slideDown() method is used to slide down an element. - The jQuery slideUp() method is used to slide up an element. - The jQuery animate() method is used to create custom animations. 2. jQuery HTML&CSS Methods - The text() method sets or returns the text content of the selected elements. - The html() method sets or returns the content of the selected elements. - The attr() method sets or returns attributes and values of the selected elements. Next time, Let’s learn about Week 15 Lesson 1. JavaScript Learning Summary References No. References 1 Inyong Jeong(2018). Introduction to JavaScript + jQuery. Easys Publishing. 15-392. 2 W3schools. 2024. https://www.w3schools.com 3 4 5 THANK YOU !