The path of jquery (ii) Notes

JQuery-get content and properties http://www.runoob.com/jquery/jquery-dom-get.htmlGet Content-text (), HTML (), and Val ()

Three simple and practical jQuery methods for DOM manipulation:

• Text ()-Sets or returns the text content of the selected element
• HTML ()-Sets or returns the contents of the selected element (including HTML tags)
• Val ()-Sets or returns the value of a form field

The following example shows how to get the content using the JQuery text () and HTML () methods:

$ ("#btn1"). Click (function () {
Alert ("Text:" + $ ("#test"). Text ());
});
$ ("#btn2"). Click (function () {
Alert ("HTML:" + $ ("#test"). html ());
});

Get Property-attr ()

The JQuery attr () method is used to get the property value.

The following example shows how to get the value of the href attribute in the link:

Instance $ ("button"). Click (function () {
Alert ($ ("#w3s"). attr ("href"));
}); JQuery-set content and properties http://www.runoob.com/jquery/jquery-dom-set.htmlSet Content-text (), HTML (), and Val ()

We will use the three same methods in the previous chapter to set the content:

• Text ()-Sets or returns the text content of the selected element
• HTML ()-Sets or returns the contents of the selected element (including HTML tags)
• Val ()-Sets or returns the value of a form field

The following example shows how to set the content by using the text (), HTML (), and Val () methods:

Instance $ ("#btn1"). Click (function () {
$ ("#test1"). Text ("Hello world!");
});
$ ("#btn2"). Click (function () {
$ ("#test2"). HTML ("<b>hello world!</b>");
});
$ ("#btn3"). Click (function () {
$ ("#test3"). Val ("Dolly Duck");
}); The callback function for text (), HTML (), and Val ()

The three jQuery methods above: Text (), HTML (), and Val () also have a callback function. The callback function consists of two parameters: the subscript of 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.

The following example shows the text () and HTML () with a callback function:

Instance $ ("#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 +") ";
});
});

The attr () method also allows you to set multiple properties at the same time.

The following example shows how to set the href and title properties at the same time:

Instance $ ("button"). Click (function () {
$ ("#w3s"). attr ({
"href": "Http://www.w3cschool.cc/jquery",
"title": "W3Schools jQuery Tutorial"
});
}); callback function for attr ()

The JQuery Method attr () also provides a callback function. The callback function consists of two parameters: the subscript of 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.

The following example shows the attr () method with a callback function:

Instance $ ("button"). Click (function () {
$ ("#w3s"). attr ("href", function (I,origvalue) {
return origvalue + "/jquery";
});
}); JQuery-add Element http://www.runoob.com/jquery/jquery-dom-add.htmlAdd a new HTML content

We'll learn the four jQuery methods for adding new content:

• Append ()-inserts content at the end of the selected element
• Prepend ()-Inserts content at the beginning of the selected element
• After ()-Inserts the content after the selected element
• Before ()-insert content before selected element

$ ("P"). Prepend ("Some prepended text.");

Adding several new elements through the Append () and prepend () methods

In the example above, we only insert the text/html at the beginning/end of the selected element.

However, the Append () and prepend () methods can receive an unlimited number of new elements through parameters. You can use JQuery to generate text/html (as in the example above), or through JavaScript code and DOM elements.

In the following example, we create a number of new elements. These elements can be created by text/html, JQuery, or javascript/dom. We then append these new elements to the text (as valid for prepend () using the Append () method:

instance function AppendText ()
{
var txt1= "<p>Text.</p>"; Create element with HTML
var txt2=$ ("<p></p>"). Text ("text."); Create with JQuery
var txt3=document.createelement ("P"); Create with DOM
Txt3.innerhtml= "Text.";
$ ("P"). Append (TXT1,TXT2,TXT3); Append the new elements
} JQuery after () and before () methods

The JQuery after () method inserts content after the selected element.

The JQuery before () method inserts content before the selected element.

Instance $ ("img"). After ("Some text after");

$ ("img"). Before ("Some text before"); add several new elements through the After () and before () methods

The After () and before () methods can receive an unlimited number of new elements through parameters. You can create new elements through text/html, JQuery, or javascript/dom.

In the following example, we create several new elements. These elements can be created by text/html, JQuery, or javascript/dom. We then use the After () method to insert these new elements into the text (as valid for Before ()):

instance function Aftertext ()
{
var txt1= "<b>i </b>"; Create element with HTML
var txt2=$ ("<i></i>"). Text ("Love"); Create with JQuery
var txt3=document.createelement ("Big"); Create with DOM
Txt3.innerhtml= "jquery!";
$ ("img"). After (TXT1,TXT2,TXT3); Insert new elements after img
} JQuery-Delete element http://www.runoob.com/jquery/jquery-dom-remove.html

With JQuery, it's easy to delete existing HTML elements.

Delete element/content

To delete elements and content, you can typically use the following two JQuery methods:

• Remove ()-Deletes the selected element (and its child elements)
• Empty ()-Removes child elements from the selected element

JQuery Remove () method

The JQuery Remove () method deletes the selected element and its child elements.

Instance $ ("#div1"). Remove (); JQuery Empty () method

The JQuery Empty () method deletes the child elements of the selected element.

Instance $ ("#div1"). empty ();

The path of jquery (ii) Notes