Jquery Common notes (ii)

Source: Internet
Author: User

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


<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


$ ("#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)


$ ("#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


$ ("#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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.