Common methods for jquery operations on dom_jquery

Jquery's operation on dom is also very necessary.

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

· text() - Set or return the text content of the selected element

· html() - Sets or returns the content of the selected element (including HTML tags)

· val() - Sets or returns the value of the form field

2. attr() gets the attribute . Of course, these two can also be modified by setting the values ​​yourself,

3. Adding html content . Adding new HTML content

We will learn four jQuery methods for adding 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

4. Delete elements/content
If you need to delete elements and content, you can generally use the following two jQuery methods:

· remove() - Delete the selected element (and its child elements)

· empty() - delete the child element from the selected element


5.jQuery operation CSS
jQuery has several methods for performing CSS operations. We will study the following:

· addClass() - Add one or more classes to the selected element

· removeClass() - Remove one or more classes from the selected element

· toggleClass() - Add/remove classes to selected elements

· css() - Set or return style attributes


Example
$("h1,h2,p").addClass("blue"); First of all, we know that when adding styles to multiple tags, we use ',' to separate them. Blue must be a set.Blue{} class selector

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

$("h1,h2 ,p").toggleClass("blue"); If there is a style, it will be removed. If there is no style, it will be added


6. Set multiple CSS properties
such as To set multiple CSS properties, please use the following syntax:

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


7.jQuery size methods
jQuerywidth() and height() methods

width() method sets or returns the width of the element (excluding padding, border or outer edge distance). The

height() method sets or returns the height of an element (not including padding, borders, or margins).

jQueryinnerWidth() and innerHeight() methods

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

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

jQueryouterWidth() and outerHeight() methods

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

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