Get and set content: Text (), HTML (), and Val ()
- 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
Example: $ ("#btn1"). Click (function () {
$ ("#test1"). Text ("Hello world!");
});
$ ("#btn2"). Click (function () {
$ ("#test2"). HTML ("<b>hello world!</b>");
});
$ ("#btn3"). Click (function () {
$ ("#test3"). Val ("Dolly Duck");
});
To set and modify properties:The attr () method is used to set the Change property value. Example: $ ("button"). Click (function () {
$ ("#w3s"). attr ({
"href": "Http://www.w3school.com.cn/jquery",
"title": "W3school jQuery Tutorial"
});});
to add new HTML 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
Delete element/content:
- Remove ()-Deletes the selected element (and its child elements)
- Empty ()-Removes child elements from the selected element
jQuery operation CSS:
- AddClass ()-adds one or more classes to the selected element, and, of course, when you add a class, you can also select multiple elements
- Removeclass ()-deletes one or more classes from the selected element
- Toggleclass ()-switch operation to add/Remove classes for selected elements
- CSS ()-Set or return style properties
jQuery Toggleclass () method:This method switches the selected element to the Add/remove class, for example: $ ("button"). Click (function () {
$ ("H1,h2,p"). Toggleclass ("Blue");});
To set CSS properties:To set the specified CSS property, use the following syntax (multiple): CSS ({"PropertyName": "Value", "PropertyName": "Value",...});
jQuery Size Method:JQuery offers several important ways to handle dimensions:
- Width ()
- Height ()
- Innerwidth ()
- Innerheight ()
- Outerwidth ()
- Outerheight ()
The width () method sets or returns the width of the element (excluding padding, borders, or margins) of the height () method to set or return the elements ' heights (excluding padding, borders, or margins) innerwidth () method returns the width of the element (including padding) innerheight () method returns the height of the element (including padding) the Outerwidth () method returns the width of the element (including padding and borders) Outerheight () method returns the height of the element (including padding and borders) Outerwidth (True) method returns the width of the element (including padding , borders, and margins) the Outerheight (True) method returns the height of the element (including padding, borders, and margins)
jquery Self-study Note (iv): JQuery DOM node operation
