Home > Developer > Web Develop
A very important part of JQuery is the ability to manipulate the DOM.
DOM = Document Object model
Three jQuery methods for DOM manipulation ( get content ):
Text () -Sets or returns the text content of the selected element
HTML () -Sets or returns the contents of the selected element (including HTML tags)
Val () -Sets or returns the (value) of a form field
Example 1: Obtaining the value of an input field through the JQuery Val () method
<script>$ (document). Ready (function(){ $("#btn1"). Click (function() {alert ("Text:" + $ ("#test").text ());//Popup "text: This is bold text in a paragraph" }); $("#btn2"). Click (function() {alert ("HTML:" + $ ("#test").html ());//Popup "HTML: This is the <b> bold </b> text" in the paragraph, that is, the HTML tag is also returned together });});</script><body><p id= "Test" > This is the <b> bold </b> text in the paragraph. </p><button id= "BTN1" > Display text </button><button id= "btn2" > Show html</button></body>
Example 2: Get the value of the input field through the JQuery Val () method:
<script>$ (document). Ready (function() { $ ("button"). Click (function () { alert ("value:" + $ ("#test"). Val ()); // Popup "Value: Input value" is value });}); </script><body><p> Name: <input type= "text" id= "test" value= "input value" ></p><button > Display Values </button></body>Example 3: Using the attr () method to get the property value
<script>$ (document). Ready (function() { $ ("button"). Click (function () { alert ($ ("#baidu"). attr ("href")); Popup ID is the value of the href attribute of Baidu, i.e. "http://www.baidu.com" }) ; </script><body><p><a href= "http://www.baidu.com" id= "Baidu" > link text </a></p>< button> display the value of the href attribute </button></body>Example: Use text (), HTML (), and the Val () method to set the content:
<script>$ (document). Ready (function(){ $("#btn1"). Click (function(){ $("#test1").text ("Hello world!"); }); $("#btn2"). Click (function(){ $("#test2"). HTML ("<b>hello world!</b>"); }); $("#btn3"). Click (function(){ $("#test3").val ("Runoob"); });});</script><body><p id= "Test1" > This is a paragraph. </p><p id= "Test2" > this is another paragraph. </p><p> input Box: <input type= "text" id= "test3" value= "Input input value" ></p><button id= "BTN1" > Set text </button><button id= "BTN2" > Set Html</button><button id= "Btn3" > Set value </button></body >
JQuery Learning 03--html: Capturing, setting, adding elements, deleting elements, CSS classes, CSS () methods, dimensions
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
