jquery properties, traversal, and HTML operations

I. Property operations

1.. attr () and. Removeattr ()

Each element has one or more attributes that are used to give additional information about the element or its contents. For example: In an IMG element, SRC is the attribute of the element that is used to mark the address of the image.

There are 3 main DOM methods of operation characteristics, getattribute method, setattribute method and RemoveAttribute method, even if there are still many problems in actual operation, we will not say it first. With a attr () and removeattr () in jquery, it's all done, including compatibility issues.

jquery uses the attr () method to get and set element properties, attr is an abbreviation for attribute (attribute), which is often used in jquery DOM operations attr ()

attr () has 4 expressions

1. attr (incoming property name): Gets the value of the property $ (selector). attr (attribute)
2. Attr (property name, property value): Sets the value of the property $ (selector). attr (attribute,value)
3. Attr (property name, function value): Sets the function value of the property $ (selector). attr (attribute, Functions(index,oldvalue))
4. attr (attributes): Sets multiple attribute values for the specified element: {attribute name one: attribute value one, property name two: ' Property value two ', ...} $ (selector). attr ({attribute:value, attribute:value ...})

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, call the method directly on a JQuery object, it is easy to manipulate the property, and do not need to deliberately understand the browser's property name of the different problems

Note the issue:

There is a conceptual distinction in DOM:attribute and property are translated as "attributes", and "JS Advanced Programming" is translated into "attributes" and "attributes". Simply understood, attribute is the property of the DOM node's own

For example: The usual ID, class, title, align, etc. in HTML:

<div id= "Immooc" title= "" ></div>

While property is this DOM element as an object, its additional content, such as TagName, NodeName, NodeType, defaultchecked, and defaultselected use. Prop () method for value or assignment, etc.

To get attribute, you need to use attr to get the property you need to use prop
2, HTML () and. Text ()

Reading, modifying the HTML structure of an element, or the textual content of an element is a common DOM operation, and jquery provides 2 convenient ways to handle this. html () with . 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:

1. . HTML () does not pass in a value, which is the HTML content that gets the first matching element in the collection
2. . HTML (htmlstring) sets the HTML content of each matching element
3. . HTML (function (index, oldhtml)) is used to return a function that sets HTML content

Precautions:

The. htm () method is used internally by the DOM's innerHTML property to handle, so one of the most important issues to be aware of in terms  of Setup and acquisition is the entire HTML content (not just text 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:

1. . Text () Gets the merged text of each element in the matching element collection, including their descendants
2. . Text (TextString) used to set the content of matching elements
3. . text (function (index, text)) is used to return a function that sets the text content

Precautions:

The. Text () result returns a string containing the merged text for all matching elements

The similarities and differences between HTML and. Text:

1. The. Html method operation is the same as the. text, except that it is specific to the processing object
2. . HTML handles the content of elements,. Text handles textual content
3. . HTML can only be used in HTML documents, and. Text can be used in both XML and HTML documents
4. If the object you are working with has only one child text node, the result of HTML processing is the same as text.
5. Firefox does not support the InnerText property, using a similar textcontent property, the. Text () method combines support for 2 properties, so it can be compatible with all browsers

3,. Val ()

One of the. Val () methods in jquery is primarily used to manipulate the values of form elements, such as input, select, and textarea.

The. Val () method

1. . val () No parameter, gets the current value of the first element in the matching element collection
2. . val (value), sets the value of each element in the matching element collection
3. . val (functions), a function to return the set value

Precautions:

1. The select element is processed through. Val (), and when no selection is selected, it returns null
2. The. Val () method is used to set the value of the form's field
3. 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

summary of differences between. html (),. Text (), and. Val ():

1. . HTML (),. Text (),. Val () Three methods are used to read the contents of the selected element; HTML () is used to read the elements of the HTML content (including HTML tags),. Text () is used to read the plain text content of the element, including its descendant elements,. val () is A value that is used to read the form element's "value". where the. html () and. Text () methods cannot be used on form elements, whereas. val () can only be used on form elements, and the. html () method only reads the first element when used on more than one element; the. val () method is the same as. html () If it is applied on more than one element. Only the value of the first FORM element can be read, but. Text () is different from theirs, and if. Text () is applied on more than one element, the textual content of all the selected elements is read.
2. . HTML (htmlstring),. Text (TextString), and. Val (value) Three methods are used to replace the contents of the selected element, and if three methods are applied on more than one element at the same time, the contents of all the selected elements will be replaced.
3. . HTML (),. Text (),. Val () can use the return value of the callback function to dynamically change the contents of multiple elements.

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 gets an array that is not a class name, but a string containing spaces. This makes multi-class operations cumbersome. The same jquery developer also takes this into account, adding a. addclass () method for dynamically increasing class names

. AddClass (ClassName) method

1. . addclass (ClassName): One or more style names to add for each matching element $ (selector). addclass (class)
2. . addclass (function (index, currentclass)): This function returns one or more spaces separated by the style name to be added $ (selector). addclass (function( Index,oldclass))

Precautions:

The. AddClass () method does not replace a style class name. It simply adds a style class name to the element

Simple description: Add a newclass style to the P element

<p class= "Orgclass" >$ ("P"). addclass ("Newclass")

Then the class of P element is actually class= "Orgclass Newclass" style will only continue to increase on the original class, separated by a space

5. Delete the 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

1. . Removeclass ([ClassName]): One or more space-separated style names $ (selector) are removed for each matching element. removeclass (class)
2. . Removeclass (Function (Index, Class)): A function that returns one or more style names that will be removed $ (selector). Removeclass (function (index, Oldclass))

Precautions

If a style class is a parameter, only such a class is removed from the collection of matching elements. If no style name is used as a parameter, all style classes 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)

1. . Toggleclass (ClassName): one or more (separated by spaces) style class names that are used to toggle on each element in the matching element collection
2. . Toggleclass (className, switch): A Boolean value that determines whether a style should be added or removed
3. . Toggleclass ([switch]): A Boolean value that is used to determine whether a style class is added or removed
4. . 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

Precautions:

1. Toggleclass is a mutually exclusive logic, that is, by determining the corresponding element on the existence of the specified class name, if any, delete, if not, add
2. Toggleclass will retain the original class name and add it, separated by a space

Second, HTML operation

function	Description
$ (selector). HTML (content)	Change the (internal) HTML of the selected element
$ (selector). Append (content)	Append content to the (internal) HTML of the selected element
$ (selector). prepend (content)	HTML "Preset" (prepend) content to the selected element (internal)
$ (selector). After (content)	Add HTML after the selected element
$ (selector). Before (content)	Add HTML before the selected element

Third, traverse

The JQuery traversal function includes methods for filtering, finding, and concatenating elements.

function	Description
. Add ()	Adds an element to the collection of matching elements.
. Andself ()	Adds the previous set of elements in the stack to the current collection.
. Children ()	Gets all the child elements of each element in the matching element collection.
. Closest ()	Starting with the element itself, it is progressively matched to the ancestor element and returns the first matching ancestor element.
. Contents ()	Gets the child elements of each element in the matching element collection, including the text and comment nodes.
. each ()	Iterates over the JQuery object and executes the function for each matching element.
. End ()	Ends the most recent filter operation in the current chain and returns a collection of matching elements to the previous state.
. EQ ()	Reduces the collection of matching elements to a new element at the specified index.
. Filter ()	Reduces the set of matching elements to a new element that matches the selector or the return value of the matching function.
. Find ()	Gets the descendants of each element in the current matching element collection, filtered by the selector.
. First ()	Reduces the collection of matching elements to the first element in the collection.
. has ()	Reduces the collection of matching elements to a collection of descendants that contain a particular element.
. is ()	Checks the current set of matching elements based on the selector, and returns true if at least one of the matching elements exists.
. Last ()	Reduces the collection of matching elements to the last element in the collection.
. Map ()	Passes each element in the current matching collection to the function, producing a new JQuery object that contains the return value.
. Next ()	Gets the sibling element adjacent to each element in the matching element collection.
. Nextall ()	Gets all the sibling elements after each element in the matching element collection, optionally filtered by selectors.
. Nextuntil ()	Get all the sibling elements after each element until you encounter the element that matches the selector.
. Not ()	Removes an element from the collection of matching elements.
. OffsetParent ()	Gets the first parent element used for positioning.
. Parent ()	Gets the parent element of each element of the current matching element collection, optionally filtered by the selector.
. Parents ()	Gets the ancestor element of each element in the current matching element collection, optionally filtered by the selector.
. Parentsuntil ()	Gets the ancestor element of each element in the current matching element collection until it encounters an element that matches the selector.
. Prev ()	Gets the previous sibling element immediately adjacent to each element in the matching element collection, optionally filtered by the selector.
. Prevall ()	Gets all sibling elements before each element in the matching element collection, optionally filtered by selectors.
. Prevuntil ()	Get all of the sibling elements before each element until you encounter the element that matches the selector.
. Siblings ()	Gets the sibling elements of all elements in the matching element collection, optionally filtered by the selector.
. Slice ()	Reduces the collection of matching elements to a subset of the specified range.

jquery properties, traversal, and HTML operations