1. Access to content and attributes
Text ()-Sets or returns the textual content of the selected element
HTML ()-Sets or returns the contents of the selected element (including HTML markup)
Val ()-Sets or returns the value of a form field
attr ()-Get Properties
Example 1: To obtain content through the text () and HTML () method.
<! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("#btn1"). Click (function () {
Alert ("Text:" + $ ("#test"). Text ());
});
$ ("#btn2"). Click (function () {
Alert ("HTML:" + $ ("#test"). html ());
});
});
</script>
<body>
<p id= "Test" > This is the <b> bold </b> text in the paragraph. </p>
<button id= "BTN1" > Display text </button>
<button id= "BTN2" > Show html</button>
</body>
Example 2. Obtain the value of the form input field through the JQuery Val () method:
<! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("button"). Click (function () {
Alert ("Value:" + $ ("#test"). Val ());
});
});
</script>
<body>
<p> Name: <input type= "text" id= "test" value= "Mickey Mouse" ></p>
<button> Display Value </button>
</body>
Example 3. Demo attr () method to obtain attribute href
<! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("button"). Click (function () {
Alert ($ ("#w3s"). attr ("href"));
});
});
</script>
<body>
<p><a href= "http://www.w3school.com.cn" id= "w3s" >W3School.com.cn</a></p>
<button> Show href value </button>
</body>
2. Setting content and properties
Text ()-Sets or returns the textual content of the selected element
HTML ()-Sets or returns the contents of the selected element (including HTML markup)
Val ()-Sets or returns the value of a form field
attr ()-Setting properties
Example 1. Set the content through the text (), HTML (), and Val () methods:
<! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script
<script>
$ (document). Ready (function () {
$ ("#btn1"). Click (function () {
$ ("#test1"). Text ("Hello world!");
});
$ ("#btn2"). Click (function () {
$ ("#test2"). HTML ("<b>hello world!</b>");
});
$ ("#btn3"). Click (function () {
$ ("#test3"). Val ("Dolly Duck");
});
};
</script>
<body>
<p id= "Test1" > This is a paragraph. </p>
<p id= "Test2" > this is another paragraph. </p>
<p>input field: <input type= "text" id= "test3" value= "Mickey Mouse" ></P>
< Button id= "BTN1" > Set text </button>
<button id= "btn2" > Setting html</button>
<button id= "Btn3" > Setting value </button>
</body>
Example 2.text (), HTML (), and Val () callback functions
The above three JQuery methods: Text (), HTML (), and Val () also have callback functions. The callback function consists of two parameters: the subscript for 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 the 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 +");
});
});
Example 3. Setting Properties-attr ()
The JQuery attr () method is also used to set/change property values.
The following example shows how to change the value of the href attribute in a link (set):
Instance
$ ("button"). Click (function () {
$ ("#w3s"). attr ("href", "http://www.w3school.com.cn/jquery");
});
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.w3school.com.cn/jquery",
"title": "W3school jQuery Tutorial"
});
});
callback function for example 4.attr ()
The JQuery Method attr () also provides callback functions. The callback function consists of two parameters: the subscript for 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.
Instance
$ ("button"). Click (function () {
$ ("#w3s"). attr ("href", function (I,origvalue) {
return origvalue + "/jquery";
});
});
3. Adding elements
Append ()-Inserts the 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 ()-Inserts content before the selected element
Cases
$ ("P"). Append ("Some appended text.");
$ ("P"). Prepend ("Some prepended text.");
Cases
<! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script>
function AppendText ()
{
var txt1= "<p>Text.</p>"; Create a new element in HTML
var txt2=$ ("<p></p>"). Text ("text."); Create new elements in JQuery
var txt3=document.createelement ("P");
Txt3.innerhtml= "Text." To create text from the DOM
$ ("Body"). Append (TXT1,TXT2,TXT3); Append new Element
}
</script>
<body>
<p>this is a paragraph.</p>
<button onclick= "AppendText ()" > Append text </button>
</body>
4. Delete Element
Remove ()-Deletes the selected element (and its child elements)
Empty ()-Deletes a child element from the selected element
Filter for deleted elements
The JQuery Remove () method can also accept a parameter that allows you to filter the deleted elements.
This parameter can be the syntax of any jQuery selector.
The following example deletes all <p> elements of the class= "italic":
Instance
$ ("P"). Remove (". Italic");
5. Class operation
AddClass ()-add one or more classes to the selected element
Removeclass ()-deletes one or more classes from the selected element
Toggleclass ()-Toggle operation of the Add/Remove class to the selected element
CSS ()-Sets or returns style properties
Example 1.
$ ("button"). Click (function () {
$ ("H1,h2,p"). AddClass ("Blue");
$ ("div"). AddClass ("important");
});
Example 2.
$ ("button"). Click (function () {
$ ("H1,h2,p"). Removeclass ("Blue");
});
Example 3.
$ ("button"). Click (function () {
$ ("H1,h2,p"). Toggleclass ("Blue");
});
6.css () method
Example 1: Returns the Background-color value of the first matching element:
$ ("P"). CSS ("Background-color");
Example 2; Set CSS properties
Grammar:
CSS ("propertyname", "value");
Set Background-color values for all matching elements:
$ ("P"). CSS ("Background-color", "yellow");
$ ("P"). css ({"Background-color": "Yellow", "font-size": "200%"});
7. Size
Width ()
Height ()
Innerwidth ()
Innerheight ()
Outerwidth ()
Outerheight ()
The width () method sets or returns the breadth of the element (excluding the inner margin, border, or outer margin).
The height () method sets or returns the elevation of the element (excluding the inner margin, border, or outer margin).
The Innerwidth () method returns the width of the element, including the inner margin.
The Innerheight () method returns the height of the element, including the inner margin.
The Outerwidth () method returns the width of the element (including the inner margin and border).
The Outerheight () method returns the height of the element (including the inner margin and border)
Cases
$ (". Btn1"). Click (function () {
$ ("P"). width ();
});Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
