JQuery Operation Dom

DOM (Document Object model-): A browser, platform, language-independent interface that makes it easy to access all the standard components in a page
Classification of DOM operations:
Dom core: Dom core is not specific to JavaScript and can be used by any programming language that supports the DOM. Its use is not limited to Web pages, but can also be used to process any document written in markup language, for example: XML
HTML DOM: When scripting HTML files with JavaScript and Dom, there are many attributes that are specifically html-dom
css-dom: For CSS operations, in JavaScript, Css-dom is used primarily to get and set various properties of a style object

Internal Insert Node

Append (content): Append to the end of each matching element's interior
AppendTo (content): appends each matched element to the inner end of the specified element
Prepend (content): Inserts the contents at the beginning of the interior of each matching element
Prependto (content): inserts each matching element at the beginning of the specified element inside

External Insert Node

After (content): Inserts the contents after each matching element
Before (content): Insert contents before each matching element
InsertAfter (content): Inserts all matching elements into another, after the specified set of element elements
InsertBefore (content): Inserts all matching elements in front of another, specified set of element elements
The above method can not only insert the newly created DOM elements into the document, but also move the original DOM elements.

Find nodes

Find attribute nodes: Done with the jQuery selector.
Find attribute node: After finding the element you want, you can invoke the attr () method of the JQuery object to get its various property values

Create a Node

Create node: The factory function using JQuery $ (): $ (HTML); Creates a DOM object from the incoming HTML tag string and wraps the DOM object back as a JQuery object.
Attention:
Dynamically created new element nodes are not automatically added to the document, but need to be inserted into the document using other methods;
When creating a single element, be aware of closing the label and using the standard XHTML format. For example, create a <p> element, you can use $ ("<p/>") or $ ("<p></p>"), but you cannot use $ ("<p>") or $ ("</P>") or $ ("P")
The creation of the text node is to write the textual content directly when the element node is created; Creating an attribute node is also created when the element node is created

Delete a node

Remove (): Removes all matching elements from the DOM, and incoming parameters are used to filter elements based on jQuery expressions. When a node is removed with the Remove () method, all descendant nodes that the node contains are deleted at the same time. The return value of this method is a reference to the node that has been deleted.
Empty (): Empties the node – empties all descendant nodes (without attribute nodes) in the element.

Replication nodes

Clone (): Clones the matching DOM element, with the return value being the cloned copy. However, the new node being copied does not have any behavior at this time.
Clone (True): Copies the elements and also copies the events in the element

Replace node

ReplaceWith (): Replaces all matching elements with the specified HTML or DOM element
ReplaceAll (): Reversed ReplaceWith () method.
Note: If an event has been bound to the element before the replacement, the original binding event will disappear with the original element.

Property manipulation

attr (): Get Properties and set properties
When a parameter is passed for the method, the property specified for the acquisition of an element
When you pass two parameters for the method, the value of the specified property is set for an element
There are many ways to get and set a function implementation in JQuery. such as: attr (), HTML (), text (), Val (), Height (), Width (), CSS (), etc.
Removeattr ("Property name"): Deletes the specified attribute of the specified element

Style actions

Getting the class and setting Class:class is an attribute of the element, so getting the class and setting class can be done using the attr () method.
Append style: AddClass ()
Remove style: removeclass ()---Remove all or the specified class from the matching element
Toggle Style: Toggleclass ()---Controls the repetition of the switch on the style. If the class name exists, delete it and add it if the class name does not exist.
Determine if a style is included: Hasclass ()---Determine if the element contains a class, and if so, returns true; otherwise returns false

Set and get HTML, text, and values

Reads and sets the HTML content in an element: HTML ("<p></p>"). This method can be used for XHTML, but not for XML documents
Reads and sets the text content in an element: text (). This method can be used for both XHTML and XML documents.
Reads and sets the value in an element: Val ()---The method is similar to the Value property in JavaScript. For a text box, drop-down list box, radio This method returns the value of the element (the multiple box can only return the first value). If the dropdown list box is a multi-select, returns an array containing all the selected values

Common methods of traversing nodes

Gets the collection of all child elements that match the element: children (). This method only considers child elements regardless of any descendant elements.
Gets the collection of sibling elements immediately following the matching element: Next ();
Gets the collection of sibling elements immediately preceding the matching element: prev ()
Get all of the sibling elements before and after matching elements: siblings ()

Css-dom operation

Get and set style attributes for an element: CSS ()
Get and set element transparency: Opacity Property
Note: IE6,IE7 does not support this property, please use Firefox1.5, or Opera9 browse opacity:0.1
Gets and sets the height of the element, Width: height (), widths (). When setting a value, the default unit is PX if only the number is passed. If you need to use a different unit, pass a string such as $ ("P:first"). Height ("2em");
Gets the relative displacement of the element in the current window: offset (). Its return object contains two properties: Top, left. This method is valid only for visible elements
EM is the relative length unit. Font size relative to the text within the current object

Events in JQuery--loading DOM

After the page is loaded, the browser adds events to the DOM element via JavaScript. In regular JavaScript code, you typically use the Window.onload method, which uses the $ (document) in JQuery. Ready () method

window.onload==$ (document). Ready ()= =$ (). Ready ()

JQuery Operation Dom