Javascript Week 13 Lesson 1 jQuery HTML & CSS Methods PDF

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 13. jQuery HTML / CSS Methods Lesson 1. jQuery HTML / CSS Methods(1) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery - Get and Set Content jQuery - Get and Set Attributes Learning Objectives...

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 13. jQuery HTML / CSS Methods Lesson 1. jQuery HTML / CSS Methods(1) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery - Get and Set Content jQuery - Get and Set Attributes Learning Objectives Can explain and use the jQuery Get and Set Content Can explain and use the jQuery Get and Set Attributes 1. jQuery - Get and Set Content 2. jQuery - Get and Set Attributes 1. jQuery - Get and Set Content(1) 1 Get and Set Content and Attributes Concept of jQuery DOM Manipulation - jQuery contains powerful methods for changing and manipulating HTML elements and attributes. - One very important part of jQuery is the possibility to manipulate the DOM. - jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes. DOM = Document Object Model Concept of The DOM defines a standard for accessing HTML and DOM XML documents 1. jQuery - Get and Set Content(2) 2 Get and Set Content - text(), html(), and val() (1) Concept of Get and Set Content - Three simple, but useful, jQuery methods for DOM manipulation text() - Sets or returns the text content of selected elements jQuery methods html() - Sets or returns the content of selected elements for DOM (including HTML markup) manipulation val() - Sets or returns the value of form fields 1. jQuery - Get and Set Content(3) 2 Get and Set Content - text(), html(), and val() (2) Example of Get Content - The following example demonstrates how to get content with the jQuery text() and html() methods. $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); Show HTML. 1. jQuery - Get and Set Content(4) 2 Get and Set Content - text(), html(), and val() (3) Example of Get Content - The following example demonstrates how to get the value of an input field with the jQuery val() method. $(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); }); }); Name: Show Value 1. jQuery - Get and Set Content(5) 2 Get and Set Content - text(), html(), and val() (4) Example of Set Content - The following example demonstrates how to set content with the jQuery text(), html(), and val() methods. $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("Hello world!"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); 1. jQuery - Get and Set Content(6) 2 Get and Set Content - text(), html(), and val() (5) Example of Set Content - The following example demonstrates how to set content with the jQuery text(), html(), and val() methods. This is another paragraph. Input filed: Set Text Set Value 1. jQuery - Get and Set Content(7) 3 jQuery text() Method(1) Definition and Usage - The text() method sets or returns the text content of the selected ele- ments. - When this method is used to return content, it returns the text content of all matched elements (HTML markup will be removed). - When this method is used to set content, it overwrites the content of ALL matched elements. - Tip: To set or return the innerHTML (text + HTML markup) of the sele- cted elements, use the html() method. 1. jQuery - Get and Set Content(8) 3 jQuery text() Method(2) Syntax - Return text content Syntax $(selector).text() - Set text content Syntax $(selector).text(content) - Set text content using a function Syntax $(selector).text(function(index,currentcontent)) 1. jQuery - Get and Set Content(9) 3 jQuery text() Method(3) Example - 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. 1. jQuery - Get and Set Content(10) 3 jQuery text() Method(4) Example - 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. 1. jQuery - Get and Set Content(11) 3 jQuery text() Method(5) Example - Set text content of the p elements using a function. $(document).ready(function(){ $("button").click(function(){ $("p").text(function(n){ return "This p element has index: " + n; }); }); }); button This is a paragraph. This is another paragraph. 1. jQuery - Get and Set Content(12) 4 jQuery html() Method(1) Definition and Usage - The html() method sets or returns the content (innerHTML) of the sele- cted elements. - When this method is used to return content, it returns the content of the FIRST matched element. - When this method is used to set content, it overwrites the content of ALL matched elements. - Tip: To set or return only the text content of the selected elements, use the text() method. 1. jQuery - Get and Set Content(13) 4 jQuery html() Method(2) Syntax - Return content Syntax $(selector).html() - Set content Syntax $(selector).html(content) - Set content using a function Syntax $(selector).html(function(index,currentcontent)) 1. jQuery - Get and Set Content(14) 4 jQuery html() Method(3) Example - Return the content of the p element. $(document).ready(function(){ $("button").click(function(){ alert($(“p”).html()); }); }); button This is another paragraph. 1. jQuery - Get and Set Content(15) 4 jQuery text() Method(4) Example - Set content for all elements. $(document).ready(function(){ $("button").click(function(){ $("p").html("Hello world!"); }); }); button This is a paragraph. This is another paragraph. 1. jQuery - Get and Set Content(16) 4 jQuery text() Method(5) Example - Set content of the p elements using a function. $(document).ready(function(){ $("button").click(function(){ $("p").html(function(n){ return "This p element has index: " + n; }); }); }); button This is a paragraph. This is another paragraph. 1. jQuery - Get and Set Content(17) 5 jQuery val() Method(1) Definition and Usage - The val() method returns or sets the value attribute of the selected elements. - When used to return value: This method returns the value of the value attribute of the FIRST matched element. - When used to set value: This method sets the value of the value attribute for ALL matched elements. - Note: The val() method is mostly used with HTML form elements. 1. jQuery - Get and Set Content(18) 5 jQuery val() Method(2) Syntax - Return the value attribute Syntax $(selector).val() - Set the value attribute Syntax $(selector).val(value) - Set the value attribute using a function Syntax $(selector).val(function(index,currentvalue)) 1. jQuery - Get and Set Content(19) 5 jQuery val() Method(3) Example - Return the value attribute. $(document).ready(function(){ $("button").click(function(){ $("input:text").val(); }); }); Name: button 1. jQuery - Get and Set Content(20) 5 jQuery val() Method(4) Example - Set the value of the field. $(document).ready(function(){ $("button").click(function(){ $("input:text").val("Glenn Quagmire"); }); }); Name: button 1. jQuery - Get and Set Content(21) 5 jQuery val() Method(5) Example - Set the value attribute using a function. $(document).ready(function(){ $("button").click(function(){ $("input:text").html(function(n, c){ return c + "Sunny"; }); }); }); Name: button 1. jQuery - Get and Set Content 2. jQuery - Get and Set Attributes 2. jQuery - Get and Set Attributes(1) 1 Get and Set Attributes - attr() (1) Example of Get Attributes - The jQuery attr() method is used to get attribute values. - The following example demonstrates how to get the value of the href attribute in a link. $(document).ready(function(){ $("button").click(function(){ alert($("#url").attr("href")); }); });