Jquery: getting set values and adding elements

Jquery: getting set values and adding elements
A very important part of jQuery DOM operations is the ability to operate the DOM. JQuery provides a series of DOM-related methods, which makes it easy to access and manipulate elements and attributes. Tip: DOM = Document Object Model (Document Object Model) provides three simple and practical jQuery methods for DOM operations: text (), html (), and val: text ()-set or return the text content of the selected element html ()-set or return the content of the selected element (including HTML tags) val () -setting or returning the value of a form field the following example shows how to obtain the content through the jQuery text () and html () Methods: instance $ ("# btn1 "). click (function () {alert ("Text:" + $ ("# test "). text () ;}); $ ("# btn2 "). click (function () {alert ("HTML:" + $ ("# test" example .html () ;}); the following example demonstrates how to use jQuery val () method to obtain the value of the input field: instance $ ("# Btn1 "). click (function () {alert ("Value:" + $ ("# test "). val () ;}); The get Attribute-attr () jQuery attr () method is used to obtain the attribute value. The following example shows how to obtain the value of the href attribute in the link: instance $ ("button "). click (function () {alert ($ ("# w3s "). attr ("href");}); jQuery sets content and attributes-text (), html (), and val () we will use three identical methods in the previous chapter to set the content: text ()-set or return the text content of the selected element html () -set or return the content of the selected element (including HTML tags) val ()-set or return the value of a form field. The following example shows how to use text (), html () and the val () method to set the content: instance

$("#btn1").click(function(){  $("#test1").text("Hello world!");});$("#btn2").click(function(){  $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){  $("#test3").val("Dolly Duck");}); 

 

Text (), html (), and val () callback functions. The preceding jQuery methods include text (), html (), and val (). They also have callback functions. The callback function consists of two parameters: the subscript of the current element in the list of selected elements and the original (old) value. Then return the string you want to use with the new value of the function. The following example demonstrates text () and html () with callback functions: instance

$("#btn1").click(function(){  $("#test1").text(function(i,origText){    return "Old text: " + origText + " New text: Hello world!    (index: " + i + ")";  });});$("#btn2").click(function(){  $("#test2").html(function(i,origText){    return "Old html: " + origText + " New html: Hello <b>world!</b>    (index: " + i + ")";  });});

 

The set attribute-attr () jQuery attr () method is also used to set/change the attribute value. The following example shows how to change (SET) the value of the href attribute in the link: instance $ ("button "). click (function () {$ ("# w3s "). attr ("href", "http://www.w3school.com.cn/jquery") ;}); the attr () method also allows you to set multiple attributes at the same time. The following example shows how to set the href and title attributes simultaneously: instance $ ("button "). click (function () {$ ("# w3s "). attr ({"href": "http://www.w3school.com.cn/jquery", "title": "W3School jQuery Tutorial"}) ;}; callback function of attr () jQuery method attr (), callback functions are also provided. The callback function consists of two parameters: the subscript of the current element in the list of selected elements and the original (old) value. Then return the string you want to use with the new value of the function. The following example demonstrates the attr () method with a callback function: instance $ ("button "). click (function () {$ ("# w3s "). attr ("href", function (I, origValue) {return origValue + "/jquery" ;}); jQuery-adds an element through jQuery, you can easily add new elements/content. To add new HTML content, we will learn the four jQuery methods used to add new content: append ()-insert content prepend () at the end of the selected element () -insert content after () at the beginning of the selected element-insert content before () after the selected element-insert content before the selected element jQuery append () method jQuery append () the method inserts content at the end of the selected element. Instance $ ("p"). append ("Some appended text."); jQuery prepend () method inserts content at the beginning of the selected element. Instance $ ("p "). prepend ("Some prepended text. "); Using the append () and prepend () Methods to add several new elements in the above example, we only insert text/HTML at the beginning/end of the selected element. However, the append () and prepend () methods can receive an infinite number of new elements through parameters. You can use jQuery to generate text/HTML (as in the preceding example), or use JavaScript code and DOM elements. In the following example, we create several new elements. These elements can be created using text/HTML, jQuery, or JavaScript/DOM. Then We append these new elements to the text using the append () method (which is equally valid for prepend (): instance

Function appendText () {var txt1 = "<p> Text. </p> "; // create a new element var txt2 in HTML = $ (" <p> </p> "). text ("Text. "); // create a new element var txt3 = document with jQuery. createElement ("p"); // create a new element named txt3.innerHTML = "Text. "; $ (" p "). append (txt1, txt2, txt3); // append a new element}

 

JQuery after () and before () Methods jQuery after () Methods insert content after the selected element. The jQuery before () method inserts content before the selected element. Instance $ ("img "). after ("Some text after"); $ ("img "). before ("Some text before"); The after () and before () methods are used to add several new elements. The after () and before () methods can receive an infinite number of new elements through parameters. You can use text/HTML, jQuery, or JavaScript/DOM to create new elements. In the following example, we create several new elements. These elements can be created using text/HTML, jQuery, or JavaScript/DOM. Then we use the after () method to insert these new elements into the text (which is equally valid for before (): instance

Function afterText () {var txt1 = "<B> I </B> "; // create a new element in HTML var txt2 =$ ("<I> </I> "). text ("love"); // create a new element var txt3 = document through jQuery. createElement ("big"); // create a new element named txt3.innerHTML = "jQuery! "; $ (" Img "). after (txt1, txt2, txt3); // Insert new elements after img}