jQuery page elements operating elements of the content of the operation

1: html () and text () and use the difference between

. 1  <! DOCTYPE HTML > 
2  < HTML > 
. 3  
. 4  < head > 
. 5      < Meta charset = "UTF-. 8" > 
. 6      <-! Style id #id a binding element to the control element -> 
. 7      < style type = "text / CSS" > 
. 8          #btn { 
. 9              background-Color : AliceBlue ; 
10              width : 100px ; 
. 11              height : 50px ; 
12 is         }
13         
14         button {
15             background-color: brown;
16             width: 100px;
17             height: 100px;
18         }
19         
20         h1 {
21             font-style: initial;
22         }
23     </style>
24     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 
25      </ Script > 
26 is  </ head > 
27  < Script > 
28      $ ( function () {
 29          // $ ( 'Button') all bound Button 
30          $ ( ' #btn ' ) .click ( function ( ) {
 31 is              // a acquires the content returned to jQuery $ () function. # id as $ () function returns the parameter jQuery object. 
32              the console.log (($ ( ' #my_div ' ) .html ( )))
 33 is          })
 34 is  
35          $ ( ' # btn1 ' ) .click (function () {
 36              Alert ($ ( ' #my_div ' ) .text ())
 37 [          })
 38 is  
39          $ ( ' # btn2 ' ) .click ( function () {
 40                  $ ( ' #show ' ) .html ( ' <h1> html content provided </ h1 of> ' )
 41 is              })
 42 is              // text () shows a plain text, HTML tags can not handle 
43 is          $ ( ' # btn3 ' ) .click ( function () {
 44 is              $ ( '#show ' ) .text ( ' <h1 of> text setting content </ h1 of> ' )
 45          })
 46 is      })
 47  </ Script > 
48  Val
 49  
50  < body > 
51 is      < div ID = "my_div" > 
52 is          < P > difference between the HFC network and the ADSL network. </ P > 
53 is      </ div > 
54 is      < div ID = "Show" > 
55          display < br >
56      </div > 
57 is      <-! HTML () is similar to Dom innerHTML: not only the contents but also the read element reads the HTML code which includes a sub-tag -> 
58      < Button ID = "BTN" type = "Button " > using HTML () reads the contents </ Button > < br > 
59      <-! text () is similar to the plain text can be read innerText -> 
60      < Button ID =" btn1 " type =" Button " > text () reads </ Button > < br > 
61 is      < Button ID = "btn2" type="button">Using HTML () to set the content </ Button > < br > 
62 is      < Button ID = "btn3" type = "Button" > using text () to set the content </ Button > < br > 
63 is  </ body > 
64  
65  < / HTML >

2: val () method for reading a form field or set value, the method returns the value of the field when there is no parameter when the parameter is set to the parameter field value.

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
 7 </head>
 8 
 9 <body>
10     <form>
11         <input type="text" />
12         < Button ID = "btn1" > read the content </ Button > 
13 is          < Button ID = 'btn2' > Write SUMMARY </ Button > 
14          < div ID = "Show" > </ div > 
15      </ form > 
16      < Script > 
. 17          $ ( function () {
 18 is              $ ( ' # btn1 ' ) .click ( function () {
 . 19                  // read input box contents, $ (:Property) 
20                 $ ( ' Div ' ) .text ($ ( ' : text ' ) .val ())
 21 is              })
 22 is              $ ( ' # btn2 ' ) .click ( function () {
 23 is                  $ ( ' : text ' ) .val ( ' Val parameter used to set the contents ' )
 24              })
 25          })
 26 is      </ Script > 
27  </ body > 
28  
29  </ HTML >

jQuery page elements operating elements of the content of the operation

Guess you like