jquery comes--text (), HTML (), Val (), attr (), capture content/attributes, set content/attributes, callback function

Capture get Content –text (), HTML (), and Val ()

Three jquery methods for DOM operations: text (): Sets or returns the contents of the selected element HTML (): Sets or returns the contents of the selected element (including HTML markup) val (): Sets or returns the value of a form field

Example 1.
Get content through the text () and HTML () methods:

<script>
$ (document). Ready (function () {
  $ ("#btn1"). Click (function () {
    alert ("Text:" + $ ("#test") . text ();
  });
  $ ("#btn2"). Click (function () {
    alert ("HTML:" + $ ("#test"). HTML ());
  });
</script>
<p id= "Test" > This is the <b> bold </b> text in the paragraph. </p>
<button id= "BTN1" > Display text </button>
<button id= "BTN2" > Display html</button>

Example 2.
Get the value of the input field through the Val () method:

<script>
$ (document). Ready (function () {
  $ ("button"). Click (function () {
    alert (value: + $ (#test). Val ());
  };
}
); </script>

<p> Name: <input type= "text" id= "test" value= "Rookie Tutorial" </p>
<button> Display value </ Button>

Get Property –attr ()

role: Used to get property values

Cases.
How to get the value of the href attribute in a link:

<script>
$ (document). Ready (function () {
  $ ("button"). Click (function () {
    alert ($ ("#runoob"). attr ("href"))
;}; </script>

<p><a href= "http://www.runoob.com" id= "Runoob" > Rookie course </a></p>
<button> displays the value of the href attribute </button>

Set up set Content –text (), HTML (), and Val () text (): Sets or returns the textual content of the selected element HTML (): Sets or returns the contents of the selected element (including HTML markup) Val (): Sets or returns the value of a form field

Cases.

<script>
   $ (document). Ready (function () {
      $ ("#btn1"). Click (function () {
         $ (#test1). Text ("Hello Nico ");
      $ ("#btn2"). Click (function () {
         $ ("#test2"). HTML ("
 
callback functions for text (), HTML (), and Val () 
The callback function has two parameters: the subscript for the current element in the selected element list and the original (old) value. Then return the string you want to use with the new value of the function

Cases.

<script>
$ (document). Ready (function () {
  $ ("#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 +") ";
}";}); </script>

<p id= "test1" >gg</p>
<p id= "test2" >hh</p>
<button id= " BTN1 > Show new/Old text </button>
<button id= "BTN2" > Show new/Old html</button>
 
Set Properties-attr () 
Function: Set/change property value

Cases.

<script>
$ (document). Ready (function () {
  $ ("button"). Click (function () {
     $ ("#th"). attr ("name", " Nico ");
      Alert ($ ("#th"). attr ("name"
);}); </script>

<p><a href= "#" id= "th" name= "hh" >Hello</a></p>
<button> Modification href value </button>
 
The attr () method also allows you to set multiple properties at the same time

Cases.
To set multiple properties:

<script>
 $ (document). Ready (function () {
     $ ("button"). Click (function () {
        $ ("#ha"). attr ({
        "name": "Nico",    //Modify Property name
        "title": "QQ"      //Set property title
        });
     $ ("#ha"). Text ($ ("#ha"). attr ("title");//Modify the link name by modifying the title value
     }
); </script>

<p><a href= "#" id= "Ha" >hello nico</a></p>
<button>change </button>
 
callback function for attr () 
Cases.

<script> $ (document). Ready (function () {$ ("button"). Click (function () {$ (#ha). A
            TTR ("href", function (i, origvalue) {return origvalue + "/ditu";
        /* or return "http://www.sohu.com"; */});
/*$ ("#ha"). attr ("href", "http://www.baidu.com");
}); </script> <p><a href= "http://www.baidu.com" id= "Ha" >hello nico</a></p> <button> Modify the href value </button>