PPT JavaScript Week 13 Lesson 2 jQuery HTML & CSS Methods(2) PDF

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 13. jQuery HTML / CSS Methods Lesson 2. jQuery HTML / CSS Methods(2) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery - Add and Rremove Elements jQuery - Get and Set CSS Classes Learning Objec...

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 13. jQuery HTML / CSS Methods Lesson 2. jQuery HTML / CSS Methods(2) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery - Add and Rremove Elements jQuery - Get and Set CSS Classes Learning Objectives Can explain and use the jQuery Add and Rremove Elements Can explain and use the jQuery Get and Set CSS Classes 1. jQuery - Add and Rremove Elements 2. jQuery - Get and Set CSS Classes 1. jQuery - Add and Rremove Elements(1) 1 jQuery - Add Elements Add New HTML Content - With jQuery, it is easy to add new elements/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 jQuery methods prepend() - Inserts content at the beginning of the selected elements to add after() - Inserts content after the selected elements new content before() - Inserts content before the selected elements 1. jQuery - Add and Rremove Elements(2) 2 jQuery append() Method(1) 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"); }); }); 1. jQuery - Add and Rremove Elements(3) 2 jQuery append() Method(2) Example - 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 1. jQuery - Add and Rremove Elements(6) 4 Add Several New Elements With append() and prepend() (1) Definition and Usage - In both examples above, we have only inserted some text/HTML at the beginning/end of the selected HTML elements. - However, both the append() and prepend() methods can take an infinite number of new elements as parameters. - The new elements can be generated with text/HTML (like we have done in the examples above), with jQuery, or with JavaScript code and DOM elements. - In the following example, we create several new elements. - The elements are created with text/HTML, jQuery, and JavaScript/DOM. - Then we append the new elements to the text with the append() method (this would have worked for prepend() too) 1. jQuery - Add and Rremove Elements(7) 4 Add Several New Elements With append() and prepend() (2) Example - we create several new elements with append() and prepend(). function appendText() { var txt1 = "Text."; // Create element with HTML var txt2 = $("").text("Text."); // Create with jQuery var txt3 = document.createElement("p"); // Create with DOM txt3.innerHTML = "Text."; $("body").append(txt1, txt2, txt3); // Append the new elements } This is a paragraph. Append text 1. jQuery - Add and Rremove Elements(8) 5 jQuery after() Methods(1) Example - 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 1. jQuery - Add and Rremove Elements(9) 6 Add Several New Elements With after() and before() (1) Definition and Usage - Also, both the after() and before() methods can take an infinite number of new elements as parameters. - The new elements can be generated with text/HTML (like we have done in the example above), with jQuery, or with JavaScript code and DOM elements. - In the following example, we create several new elements. - The elements are created with text/HTML, jQuery, and JavaScript/DOM. - Then we insert the new elements to the text with the after() method (this would have worked for before() too). 1. jQuery - Add and Rremove Elements(10) 6 Add Several New Elements With after() and before() (2) Example - we create several new elements with after() and before(). function appendText() { var txt1 = "Text."; // Create element with HTML var txt2 = $("").text("Text."); // Create with jQuery var txt3 = document.createElement("p"); // Create with DOM txt3.innerHTML = "Text."; $("body").after(txt1, txt2, txt3); // Append the new elements } This is a paragraph. Append text 1. jQuery - Add and Rremove Elements(1) 7 jQuery - Remove Elements Add New HTML Content - With jQuery, it is easy to remove existing HTML elements. - To remove elements and content, there are mainly two jQuery methods. jQuery methods remove() - Removes the selected element (and its child elements) to Remove empty() - Removes the child elements from the selected element existing elements 1. jQuery - Add and Rremove Elements(2) 8 jQuery remove() Method Example - 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 1. jQuery - Add and Rremove Elements(2) 9 jQuery empty() Method Example - 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 1. jQuery - Add and Rremove Elements 2. jQuery - Get and Set CSS Classes 2. jQuery - Get and Set CSS Classes(1) 1 jQuery Get and Set CSS Classes(1) jQuery Manipulating CSS - With jQuery, it is easy to manipulate the style of elements. - jQuery has several methods for CSS manipulation. We will look at the following methods: addClass() - Adds one or more classes to the selected elements jQuery removeClass() - Removes one or more classes from the selected Manipulating elements CSS toggleClass() - Toggles between adding/removing classes from the selected elements css() - Sets or returns the style attribute 2. jQuery - Get and Set CSS Classes(2) 1 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 - Get and Set CSS Classes(3) 2 jQuery addClass() Method Example - 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 - Get and Set CSS Classes(4) 3 jQuery removeClass() Method Example - 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 - Get and Set CSS Classes(5) 4 jQuery toggleClass() Method Example - 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 - Get and Set CSS Classes(6) 5 jQuery css() Method(1) Return a CSS Property - 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 - Get and Set CSS Classes(7) 5 jQuery css() Method(2) Set a CSS Property - 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 2. jQuery - Get and Set CSS Classes(8) 5 jQuery css() Method(3) Set Multiple CSS Properties - The following example will set a background-color and a font-size for ALL matched elements $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color": "yellow", "font-size": "200%"}); }); }); This is some important text! Return background-color of p Learning Summary 1. jQuery - Add and Rremove Elements - The append() method inserts content AT THE END of the selected HTML elements. - The prepend() method inserts content AT THE BEGINNING of the selected elements. - The jQuery after() method inserts content AFTER the selected HTML elements. - The jQuery before() method inserts content BEFORE the selected HTML elements. - The remove() method removes the selected element (and its child elements). - The empty() method removes the child elements of the selected element(s). 2. jQuery - Get and Set CSS Classes - The addClass() method adds one or more classes to the selected elements. - The removeClass() removes one or more classes from the selected elements. - The toggleClass() toggles between adding/removing classes from the elements. - The css() sets or returns the style attribute. Next time, Let’s learn about Week 14 Lesson 1. jQuery Examples(1) 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 !