Common Methods of jquery dom operations

Jquery's operations on dom are also very important.

1. Three simple and practical jQuery methods for DOM operations:

· Text ()-set or return the text content of the selected Element

· Html ()-set or return the content of the selected element (including HTML tags)

· Val ()-set or return the value of a form field

2. attr () Get attributes. Of course, these two values can also be modified by yourself,

3. Add html content. Add new HTML content

We will learn the four jQuery methods used to add new content:

· Append ()-insert content at the end of the selected Element

· Prepend ()-insert content at the beginning of the selected Element

· After ()-insert content after the selected Element

· Before ()-insert content before the selected Element

4. Delete elements/Content

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

· Remove ()-delete the selected element (and its child element)

· Empty ()-delete a child element from the selected Element

5. Operate CSS using jQuery

JQuery has several methods to perform CSS operations. We will learn the following:

· AddClass ()-add one or more classes to the selected Element

· RemoveClass ()-deletes one or more classes from the selected Element

· ToggleClass ()-Adds or deletes the selected element to/from the switch operation.

· Css ()-set or return style attributes

Example

$ ("H1, h2, p"). addClass ("blue"); first, we know that we use ',' to separate Multiple labels. Blue must be a set. Blue {} class selector

$ ("H1, h2, p"). removeClass ("blue ");

$ ("H1, h2, p"). toggleClass ("blue"); removed if there is a style, and added if there is no style

6. set multiple CSS attributes

To set multiple CSS attributes, use the following syntax:

Css ({"propertyname": "value", "propertyname": "value ",...});

7. jQuery size Method

JQuerywidth () and height () Methods

The width () method is used to set or return the width of an element (excluding the padding, border, or margin ).

The height () method sets or returns the height of an element (excluding the padding, border, or margin ).

JQueryinnerWidth () and innerHeight () Methods

The innerWidth () method returns the width (including the padding) of the element ).

The innerHeight () method returns the height of the element (including the padding ).

JQueryouterWidth () and outerHeight () Methods

The outerWidth () method returns the width of the element (including the padding and border ).

The outerHeight () method returns the height of an element, including the padding and border ).