Third, jquery operation Dom

The DOM(Document Object model) provides a structured representation of the document, which can be used to change the content and presentation of the document. In practice, the DOM is more like a bridge, which enables cross-platform, cross-language standard access.

The DOM is inseparable from the JavaScript scripting technology, DOM in the client-side technology is based on the technology, through which we can easily access, retrieve, manipulate any element of the document. Therefore, the learning number JavaScript scripting technique is an important condition for mastering DOM objects.

document is documentation, and when we create a page and load it into a browser, the DOM model creates a document file based on the content of that page.

object, which is a set of data sets with values that have independent attributes. For example, we call the new page a Document object, the feature associated with the object is called the object property, and the function that accesses the object is called an object method.

Model that is, in a page document, the elements and content of the page are presented in a tree-like model, which is presented in a way that is implemented by node.

Operation of element attributes

In jquery, you can perform get, set, delete operations on the attributes of an element, and you can perform get and set operations on element properties through the attr () method, while the Removeattr () method can easily delete a defined property.

1. Get the attributes of an element

The syntax for getting the attributes of an element is as follows:

attr (name)

Where the parameter name represents the name of the property.

2. Setting the attributes of an element

The attr () method can not only get the attribute values of an element, but also set the attributes of the element, with the following formatting properties:

attr (Key,value)

Where the parameter key represents the name of the property, and value represents the property.

If you want to set more than one property, you can also implement it through the attr () method, which has the following syntax format:

attr ({key0:value0,key1:value1})

The attr () method can also bind a function (), which uses the value returned by the function as the property value of the element, with the syntax formatted as follows:

attr (key,fuction (index))

Where the parameter index is the index number of the current element, the entire function returns a string as the attribute value of the element.

3. Delete element properties

After you set the attributes of an element by using the attr () method in jquery, you can use the Removeattr () method to remove the attributes of an element using the syntax format:

REMOVEATTR (name)

Where the parameter name is the name of the element property.

Getting and setting elements

1. Get and set element content

In jquery, the methods for manipulating element content include HTML () and text (). The former is similar to the innerHTML property in JavaScript, which is to get or set the content of the element, which resembles the InnerText property in JavaScript, which is to get or set the text content of the element. The difference between the format and the function of the two is as shown in the table:

the difference between the HTML () and the text () methods

Syntax format	Parameter description	Function description
HTML ()	No parameters	The HTML content used to get the element
HTML (val)	The Val parameter is the HTML content of the element	The HTML content used to set the element
Text ()	No parameters	Used to get the text content of an element
Text (val)	The Val parameter is the text content of the element	Gets the text content of the set element

The HTML () method supports only XHTML documents, not XML documents, and text () supports HTML documents as well as XML documents.

2. Get and set the value of an element

In jquery, to get the value of the element ton is implemented by the Val () method, whose syntax format is as follows:

Val (Val)

Where Val is the value of the element if it is not taken with the parameter Val, and vice versa, it is the value of the element that is assigned to the element, that is, the setting. This method is commonly used to get or set the value of an object in the glossary.

In addition, multiple option values in the Select table set can be obtained through the Val () method, which has the following syntax format:

Val (). Join (",")

In the Val (val) method, if there are arguments, its arguments can also be in the form of an array, that is, Val (array), whose function is to set the element to be selected. So

$ (": Radio"), Val (["Radio2", "Radio3"])

The code means: the value of Radio2 and Radio3 is selected.

Element style manipulation

In the page, the element style actions include: Set style directly, add CSS category, category toggle, delete category.

1. Setting element styles directly

In jquery, you can use the CSS () method to set the style value for a given element, with the syntax in the following form:

CSS (Vame,value)

Where name is the style name and value is the style.

2. Add element CSS Category

Add the name of the element class by using the AddClass (Class) method, which has the following syntax:

AddClass (Class)

Where the parameter class is the name of the category, you can also increase the name of more than one category, just separate the space, its syntax format is

AddClass (class0 Class1 ...)

Note: Use the AddClass () method to append the style category to myopia, that is, it also preserves the original category.

3. Toggle element Category

Use the Toggleclass () method to toggle between different element categories with the following syntax:

Toggleclass (Class)

Where class is the category name, the function is to delete the element category when the element contains a CSS category with the name class, otherwise add a CSS category for that name.

4. Delete CSS element categories

corresponding to the AddClass () method of the added category, the Removeclass () methods are used to delete a category with the following syntax:

Removeclass ([class])

Where class is the category name, the name is optional. When the name is selected, delete the category with the name class, separated by a space when there are multiple categories. If the name is not selected, all categories in the element are deleted.

Page element manipulation

If you want to add an element to the page, you only need to find the ancestor node of the element, and after the creation of the element through $ (HTML), it is added to the node.

1. Creating a Node element

The function $ () is used to dynamically create page elements with the following syntax:

$ (HTML)

Where the parameter HTML represents the HTML tag string used to dynamically create DOM elements, that is, if you want to create a div tag dynamically in the page and set its contents and properties, you can add the following code:

var $div = $ ("<div title= ' jquery idea ' >write less do more</div>"); $ ("Body"). Append ($div);

After executing the above code, a div tag is created in the body of the page document, with the content "Write less does more", and the value of the property title is "jquery Idea".

Note: The function $ (HTML) just completes the creation of DOM elements, adding to the page also need to be with the Forbidden City elements and but the insertion or append operation, while in the creation of the DOM element is to pay attention to whether the character mark is completely closed, otherwise not achieve the desired effect.

2. Internal Insertion Node

Dynamically creating elements in a page requires an INSERT or append operation on the node. And in jquery, there are a number of ways to achieve this function, append () method myopia one of them. According to the order of inserting elements, it can be divided into two methods: internal and external. Each of these methods is described in more detail below.

The external insert method is as shown in the table:

methods for inserting nodes externally

Syntax format	Parameter description	Function description
Append (content)	Content indicates what to append to the target	Inserts content inside the selected element
Append (function (index,html))	Returns the content appended to the target through the function functions	Inserts the contents of the function returned inside the selected element
AppendTo (content)	Content indicates what is appended	Appends the selected element to another set of elements in the set
Prepend (content)	Content represents the insertion of the preceding contents within the target element	Think of the internal front content of each selected element
Prepend (function (index,html))	Returns the content appended to the inside of the target element through the function functions	Inside of the selected element, the preceding Insert function returns
Prependto (content)	Content represents a jquery expression for selecting elements	Place the selected element in front of another set of elements

2. External insertion Node

The internal insert method is as shown in the table:

methods for inserting nodes internally

Syntax format	Parameter description	Function description
After (content)	Content represents what is inserted behind the target element	Insert content after the selected element is outside
After (function)	Returns the content appended to the target outside of the destination by using function functions	Inserts the contents of the function returned after the selected element outside
Before (Contont)	Content represents the insertion of contents preceding the target element	Insert content before the selected element
Before (function)	Content represents the insertion of the preceding contents within the target element	Inserts the content returned from the function function to the outer face of the selected element
InsertAfter (content)	Content represents what is inserted behind the target element	Inserts the selected element behind another drawn element
InsertBefore (Contont)	Content represents the insertion of contents preceding the target element	Inserts the selected element in front of another drawn element

4. Copying ELEMENT nodes

On the page, there is something you need to copy an element node to another node, such as the shopping and design of a shopping site. In traditional JavaScript, you need to write more complex code, and in jquery, the amount can be easily implemented by means of clone (), which has the following syntax:

Clone ()

Its function is to copy the matching DOM elements and select the elements that are successful for replication. The method of myopia replicates the element itself, and the new element after being copied does not have any element behavior. If you need to replicate all the behavior of the calcium element during replication, you can do so by using the method clone (True), which is in the following format:

Clone ()

Where the parameter is set to True, all event handling of the element can be copied

5. Replacing ELEMENT nodes

In jquery, if you want to replace a node in an element, you can use both replacewith () and ReplaceAll (), which have the following syntax formats:

ReplaceWith (content)

The function of this method is to replace all selected elements with the developed HTML or DOM elements, where the content of the parameters is replaced by the selected element.

ReplaceAll (content)

The function of this method is to replace all the selected elements with the elements that make selector, where the parameter selector is the element that needs to be replaced.

Note: Both the replacewith () and the ReplaceAll () methods can implement the substitution of element nodes, the most important of which is the order of substitution characters, which replace the selected element with the character in parentheses, which replaces the selected element in parentheses with a string. Once the substitution is complete, all occurrences of the replaced element will disappear.

6. Package element Node

In jquery, not only can the element node be replaced by a method, but also a set node can be wrapped on demand, and the parcel of the node is also an important item in the DOM object, with all the methods associated with the parcel node as shown in the table:

Parcel Element Node

Syntax format	Parameter description	Function description
Wrap (HTML)	The HTML parameter is a string code that is used to generate the element and wrap the selected element	Wrap all the selected elements in other string codes.
Wrap (Elem)	The Elem parameter is used to wrap the DOM element of the selected element	Wrap all selected elements in other DOM elements.
Wrap (FN)	The FN parameter is a function of the wrapping element	Wrap the selected elements with the code returned by the function functions.
Unwrap	No parameters	Removes the parent element or package tag for all elements
Wrapall (HTML)	The HTML parameter is a string code that is used to generate the element and wrap the selected element	Wrap all selected elements together with a single DOM element
Wrapall (Elem)	The Elem parameter is used to wrap the DOM element of the selected element	Wrap all selected elements in a single DOM element.
Wrapinner (HTML)	The HTML parameter is a string code that is used to generate the element and wrap the selected element	Wraps the child content of all selected elements (including text nodes) in string code.
Wrapinner (Elem)	The Elem parameter is used to wrap the DOM element of the selected element	Wrap the word content of all selected elements (including the extra node) with DOM elements.
Wrapinner (FN)	The FN parameter is a function of the parcel structure	Wrap the word contents of all selected elements (including text nodes) with the code returned by FN

Note: In the above table, the Wrap (HTML) and Wrapinner (HTML) methods are commonly used, which include external elements, which contain text characters inside the elements.

7. Traversing elements

In a DOM element operation, something needs to do the same for all elements of the consent tag. In traditional JavaScript, it is relatively complex to get the total length of an element and then to decrement the total length of the for-loop statement, to access one of the elements, and in jquery, you can use the each () method to implement the traversal of the element directly. The syntax format is as follows:

each (callback)

Where the parameter callback is a function, the function can also accept a formal parameter index, the secondary parameter is the need to traverse the element (starting from 0), if you need to access the attributes in the element, you can use the parameter index, with the This keyword to implement the element property set or get.

8. Delete page elements

Deleting extra or specified page elements is necessary when the DOM is manipulating the page, and jquery provides two ways to delete elements, remove () and empty (). Strictly speaking, the empty () method is not a real deletion, and using this method, it is possible to clear all and all of the descendant elements contained in the node, not to delete and the elements.

The syntax format for the Remove () method is as follows:

Remove ([expr])

Where expr is an optional lewies, if the parameter is accepted, the parameter is a jquery expression that filters the element, and the expression obtains the developed element and deletes it.

The syntax format for the empty () method is as follows:

Empty ()

Its function is to empty the selected page element or all descendant elements.

Third, jquery operation Dom