Jquery Common notes (ii)

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)