jQuery modifies class attributes and CSS style arrangement_jquery

Class attribute modification

The class attribute is the class attribute, which specifies the class name.
When using a class selector to specify a style, you need to specify a class name for the element, that is, the value of the class attribute.
Note that each HTML element has only one class attribute. However, the value of the class attribute can be multiple names, that is, it may contain a list of words, separated by spaces.
For specific usage methods, see: http://www.w3school.com.cn/css/css_selector_class.asp

To modify the class name with jQuery, you can either use the attr() method to modify the "class" attribute, or you can use the addClass(), removeClass(), toggleClass() and other methods.

addClass()

API: http://api.jquery.com/addClass/
The addClass() method adds the specified class name (one or more) to the matched element.
Note that for elements, the class attribute can have multiple values. This method does not remove the existing value, but appends one or more class attributes to the original one.
Using the attr() method to set the class attribute is an overwriting process; while addClass() is an appending process.
Classes are ultimately separated by spaces.
If you need to add multiple classes, separate the class names with spaces.
Starting from 1.4, the parameters of this method can also be passed into a function.

removeClass()

API: http://api.jquery.com/removeClass/
The removeClass() method removes one or more classes from the selected element. If you need to remove several classes, separate the class names with spaces.
If no parameters are passed, this method will remove all classes of the selected element.

toggleClass()

API: http://api.jquery.com/toggleClass/
The toggleClass() method switches (sets or removes) one or more classes of the selected element.
This method checks the specified class in each element, deletes it if it exists, and adds it if it does not exist.
By adding parameters, you can set only delete or only add operations.
Format:$(selector).toggleClass(class,switch)
When the switch value is true, it will only be added; when it is false, it will only be deleted.

hasClass()

API: http://api.jquery.com/hasClass/
The hasClass() method checks whether the selected element contains the specified class.
You can also use the is() method to achieve the same function. The method parameter is passed in a selector string, such as ".className".

CSS style modification

There are also some methods in jQuery that directly return or set the CSS properties of elements.

css()

API: http://api.jquery.com/css/
Read operation: Get the specified style value (one or more) of the first element in the matching element set.
Note: The operation of reading multiple style values ​​was only added in jQuery v1.9.
Writing operation: Set the value of one or more CSS properties for each element in the matching element set.
The parameter passed in can be a single key-value pair, multiple values ​​specified by PlainObject, or a function. (v1.4).

jQuery will handle some specific situations that are different in each browser. For example, W3C's cssFloat is styleFloat in IE. In jQuery, you can use float, and then jQuery will help you translate it into what each browser should have. The correct name of .
Also, jQuery will reasonably interpret multi-word attributes in CSS and DOM formats, such as .css ("background-color") and .css ("backgroundColor"), which can be processed.

height() and width()

API: http://api.jquery.com/height/ and http://api.jquery.com/width/
Height and width attributes. This width and height value does not include padding, border and margin. Unless the box-sizing attribute is used.
Note that when writing, what is set is the width and height of the content, excluding the box-sizing part.

The read operation still returns the attribute value of the first element of the collection.
The difference between .css("width") and .width() is: the former returns a value with a unit, such as 400px; the latter returns a pixel value without a unit, that is, 400.
So if the value needs to be used for some calculation, .height() and .width() are recommended.
The value read is not necessarily an integer, and if the user zooms the page, the value may be incorrect because the browser does not expose the API for this situation.
There is another inaccuracy. When the parent element of this element is hidden, the size of the element may not be read accurately.

The value type supported by write operations is string or number.
If it is a number, jQuery defaults to px as the unit.
If it is a string, in addition to numbers and units, any reasonable CSS measurement can be used, such as 100%, 50%, or auto.

position()

API: http://api.jquery.com/position/
Returns the position of the first matching element relative to the parent element (offset parent).
Only read operations.

offset()

API: http://api.jquery.com/offset/
Return the coordinates of the first matching element, or set the coordinates of each matching element. This coordinate is relative to the document.

offsetParent()

API: http://api.jquery.com/offsetParent/
Return to the parent class, only read operations.

scrollLeft() and scrollTop()

API: http://api.jquery.com/scrollLeft/ and http://api.jquery.com/scrollTop/