This series of blog is mainly to record the functions of jquery commonly used, if there is an incorrect place please advise, follow-up part of the update (Zouw)
3. Content operation
Example:
<p id= "Test" > This is the paragraph <b> bold </b> text </p>
<input type= "text" id= "name" value= "Mickey Mouse" ></p>
<button id= "BTN1" > Display text </button>
<button id= "BTN2" > Show html</button>
<button id= "Btn3" > Show value values in input </button>
<button id= "Btn4" > Set text </button>
<button id= "Btn5" > Settings html</button>
<button id= "Btn6" > Set value values in input </button>
1.text ()-Sets or returns the text content of the selected element
Get:
$ ("#btn1"). Click (function () {
Alert ("Text:" + $ ("#test"). Text ());
});
Output: This is the bold text in the paragraph
Set up:
$ ("#btn4"). Click (function () {
$ ("#test"). Text ("Here is the content of the setting");
});
Result: content in paragraph changed to: Here is the content of the setting
2.html ()-Sets or returns the contents of the selected element (including HTML tags)
Get:
$ ("#btn2"). Click (function () {
Alert ("HTML:" + $ ("#test"). html ());
});
Output: This is the <b> bold </b> text in the paragraph
Set up:
$ ("#btn5"). Click (function () {
$ ("#test"). HTML ("<b>hello world!</b>");
});
Result: content in paragraph changed to:Hello world! (for bold style)
3.val ()-Sets or returns the value of a form field
Get:
$ ("#btn3"). Click (function () {
Alert ($ ("#name"). Val ());
});
Output: Mickey Mouse
Set up:
$ ("#btn3"). Click (function () {
$ ("#name"). Val ("Donald Duck");
});
Result: content in input changed to Donald Duck
4. Property manipulation
. attr ()
Gets or sets the property
<a href= "http://www.baidu.com" id= "link" >www.baidu.com</a>
<button id= "btn1" > Get link Address </button>
<button id= "btn2" > Set link Address </button>
$ ("BTN2"). Click (function () {
Alert ($ ("#link"). attr ("href"));
});
Effect: Pop-up dialog box: http://www.baidu.com
$ ("BTN2"). Click (function () {
$ ("#link"). attr ("href", "http://www.google.com");
});
Effect: Change the connection address to http://www.google.com
5. Remove Content
<div id= "div" > This is some text in the Div. </div>
<button id= "BTN1" > get the contents of div and itself </button>
<button id= "BTN2" > Set content in div </button>
1.remove ()-Delete the selected element (and its child elements)
$ ("BTN1"). Click (function () {
$ ("#div"). Remove ();
});
Effect: Content in Div is removed, div itself is deleted
2.empty ()-Removes child elements from the selected element (not deleted by itself)
$ ("BTN2"). Click (function () {
$ ("#div"). empty ();
});
Effect: The contents of the div are removed, but the div remains,
Jquery Common notes (ii)