jquery Basics-Style chapter (5)

Properties and styles of jquery

(1). attr () and. Removeattr (): Each element has one or more attributes that are used to give additional information about the element or its contents.

attr () has 4 expressions　

attr (incoming property name): Gets the value of the property

Attr (property name, property value): Sets the value of the property

Attr (property name, function value): Sets the function value of the property

attr (attributes): Sets multiple attribute values for the specified element: {attribute name one: attribute value one, property name two: ' Property value two ', ...}

Removeattr () Delete method

. Removeattr (AttributeName): Removes an attribute (attribute) for each element in the matching element collection.

Advantages:

attr and Removeattr are jquery. For attribute manipulation encapsulation, the method is called directly on a JQuery object, it is easy to manipulate the property, and does not need to deliberately understand the browser's property name of the different problems.

(2). HTML () and. Text ()

. HTML () method

Gets the HTML content of the first matching element in the collection or sets the HTML content of each matching element, in 3 ways:

. HTML () does not pass in a value, which is the HTML content that gets the first matching element in the collection

. HTML (htmlstring) sets the HTML content of each matching element

. HTML (function (index, oldhtml)) is used to return a function that sets HTML content

The. Text () method

Gets the text content of each element in the matching element collection, including their descendants, or sets the text content of each element in the matching element collection to the specified text content. , there are 3 ways to use it:

. Text () Gets the merged text of each element in the matching element collection, including their descendants

. Text (TextString) used to set the content of matching elements

. text (function (index, text)) is used to return a function that sets the text content

(3). Val ()

The. Val () method

. val () No parameter, gets the current value of the first element in the matching element collection

. val (value), sets the value of each element in the matching element collection

. val (functions), a function to return the set value

Precautions:

The select element is processed through. Val (), and when no selection is selected, it returns null

The. Val () method is used to set the value of the form's field

If the select element has a multiple (multiple-selection) attribute, and at least one selection is selected, the. Val () method returns an array that contains the value of each selected selection

(4) Add style. AddClass ()

By dynamically changing the class name, you can make its modified elements render different effects. In the HTML structure, multiple classes are separated by spaces, and when a node (or a label) contains more than one class, the ClassName property of the DOM element response is not an array of class names, but a string with spaces, which makes multi-class It becomes troublesome to make. The same jquery developer also takes this into account, adding a. addclass () method to dynamically increase the class name.

. AddClass (ClassName) method

. addclass (ClassName): One or more style names to add for each matching element

. addclass (function (index, currentclass)): This function returns one or more style names to be added separated by spaces

(5) Delete style. Removeclass ()

jquery's adoption of the. addclass () method makes it easy to add styles. If you need to switch between styles, jquery also provides a handy. Removeclass (), which is the function of removing all or the specified class from the matching element

. removeclass () method

. Removeclass ([ClassName]): One or more space-delimited style names removed by each matching element

. Removeclass (Function (Index, Class)): A function that returns one or more style names that will be removed

(6) Toggle style. Toggleclass ()

When doing certain effects, it is possible to constantly switch to one style of the same node, that is, the mutual exclusion between addclass and removeclass, such as interlaced color change effect.

jquery provides a Toggleclass method for simplifying this mutually exclusive logic, dynamically adding the delete class through the Toggleclass method, executing the equivalent of AddClass once, and performing again the equivalent of Removeclass

. Toggleclass () Method: Adds or removes one or more style classes on each element of the matching element collection, depending on whether the style class exists or the value toggle property. That is, delete (add) A class if it exists (does not exist)

. Toggleclass (ClassName): one or more (separated by spaces) style class names that are used to toggle on each element in the matching element collection

. Toggleclass (className, switch): A Boolean value that determines whether a style should be added or removed

. Toggleclass ([switch]): A Boolean value that is used to determine whether a style class is added or removed

. Toggleclass (Function (Index, class, switch) [, switch]): A function that returns the name of the style class used to toggle on each element in the matching element collection. Receives the index position of the element and the element's old style class as a parameter

(7) Style operation. CSS ()

By using JavaScript to get the style property on the DOM element, we can dynamically assign the style property to the element. In jquery we want to dynamically modify the style property so that we can do it with the CSS () method.

. CSS () method: Gets the calculated value of the element style property or sets the CSS property of the element

Get:

. CSS (PropertyName): Gets the computed value of the style property of the first element in the matching element collection

. CSS (propertynames): Passing a set of arrays, returning an object result

　　　　Set up:

. CSS (propertyname, value): Set CSS

. CSS (propertyname, function): You can pass in a callback function and return to the corresponding value for processing

. CSS (properties): You can pass an object and set multiple styles at the same time

jquery Basics-Style chapter (5)