JQuery Basics Course: Introduction to DOM Operations in JQuery

An interface that is independent of browser, platform and language. This interface provides easy access to all standard components in the page.

DOM Core: DOM Core is not exclusive to JavaScript, any programming language that supports DOM can use it. Its use is not limited to processing web pages, but can also be used to process any document written in a markup language, such as XML.

HTML DOM: When writing scripts for HTML files using JavaScript and DOM, there are many properties specific to HTML-DOM.

CSS-DOM: For CSS operations, in JavaScript, CSS-DOM is mainly used to obtain and set various attributes of the style object.

1. Find nodes

Please see the " Basic Selector " above.

2. Create a node

Use JQuery’s factory function to create a new node: var $newNode = $(“

Hello

> ;");, and then insert the new node into the specified element node.

3. Insert node

Insert the newly created node or the obtained node into the specified position.

“$node.append($newNode)”, appends the end to the end of each matching element. For example, "$("p").append("Hello");" will add "Hello" to the end of "p".

“$newNode.appendTo($node)”, appends the new element to the end of each matching element.

“$node.prepend($newNode)”, appends the beginning to the end of each matching element. For example, "$("p").prepend("Hello");" will add "Hello" to the beginning inside "p".

“$newNode.prependTo($node)”, appends the new element to the beginning of each matching element.

“$node.after($newNode)” inserts content after each matching element, which is a parallel brother. For example, "$("p").after("Hello");" inserts "Hello" after "p". They are brothers.

“$newNode.insertAfter($node)”, inserts the new element after each matching element.

“$newNode.before($node)”, insert content before each matching element. For example, "$("p").before("Hello");" inserts "Hello" in front of "p". They are brothers. .

“$node.insertBefore($newNode)”, inserts a new element before each matching element.

Note: If the inserted node is not newly created, the insertion will become a move operation. Therefore, cloned nodes should be used before inserting such nodes.

4. Delete nodes

Delete all matching elements from the DOM. For example, "$("p").remove(".hello");" deletes the p element whose class attribute value is hello, as well as all elements below it.

Clear all matching elements from the DOM. For example, "$("p").empty();" clears all p elements and all elements below it.

5. Copy the node

Clone the matching DOM element. For example, "$("p").clone();" returns the cloned copy, but does not have any behavior. If you want to clone DOM events together, you should use "$("p").clone(true);".

6. Replace node

Replace all matching elements with the specified HTML or DOM elements. For example, $("p").replaceWith("Paragraph. "); replaces all p elements with "Paragraph. ".

      

and replacewith back: $ ("& lt; b & gt; paragraph. & Lt;/b & gt;"). Replaceall ("p");

7. Wrap node

wrap(): Wrap the specified node with other tags. This method is useful when additional structured markup needs to be inserted into the document without destroying the semantics of the original document. For example, "$("p").wrap("

");". Each p element is wrapped into a

.

wrapAll(): Wrap all matching elements with one element. The wrap() method wraps all elements individually. For example, "$("p").wrapAll("

");" wraps all p elements into

.

wrapInner(): Wrap the sub-content (including text nodes) of each matching element with other structured tags. For example, "$("p").wrapInner("");", is wrapped by each p element.

8. Attribute setting

attr(): Get attributes and set attributes.

When a parameter is passed to this method, the specified attribute is obtained for an element. For example, "$("img").attr("src");" gets the src attribute value of the img element.

When two parameters are passed to this method, the value of the specified attribute is set for an element. For example, "$("img").attr("src","test.jpg");", set the src attribute value of the img element to test.jsp.

There are many methods in jQuery that are functions that implement getting and setting. Such as: attr(), html(), text(), val(), height(), width(), css(), etc.

removeAttr(): Remove the specified attribute of the specified element.

9. Style operation

You can set or get the css style through "attr()".

: addclass (). For example, "$("p").addClass("selected");" adds the "selected" style to all P elements.

Remove style: removeClass() --- Remove all or specified classes from matched elements. For example, "$("p").removeClass("selected");" deletes "selected" in all P elements.

Switch styles: toggleClass() --- Control repeated switching on styles. Removes the class name if it exists, adds it if the class name does not exist. For example, "$("p").toggleClass("selected");", among all P elements, if the "selected" style exists, delete the "selected" style, otherwise add the "selected" style.

Determine whether it contains a certain style: hasClass() --- Determine whether the element contains a certain class, and return true; otherwise, return false. For example, "$(this).hasClass("protected")" determines whether the current node has the "protected" style.

10. Set or get HTML, text and value

Read and set the HTML content in an element: html(), this method can be used for XHTML , but not for XML documents.

Read and set the text content in an element: text(). This method can be used for both XHTML and XML documents.

Read and set the value in an element: val(), this method is similar to the value attribute in JavaScript. For text boxes, drop-down list boxes, and radio button boxes, this method can return the value of the element (multi-select boxes can only return the first value). If it is a multi-select drop-down list box, returns an array containing all selected values.

11. Commonly used methods for traversing nodes

Get the set of all child elements of the matching element: children(). This method only considers first-level child elements and not any descendant elements.

Get the set of sibling elements immediately following the matching element (but there is only one element in the set): next().

Get the set of sibling elements immediately before the matching element (but there is only one element in the set): prev().

Get all sibling elements before and after the matching element: siblings().

12.CSS-DOM operation

Get and set the style attribute of the element: css().

Getting and setting element transparency: opacity() attribute.

Get and set element height and width: height(), width(). When setting a value, if only numbers are passed, the default unit is px. If you need to use other units, you need to pass a string, such as "$("p:first").height("2em")";

Get the element's height in the current window Relative displacement: offset(). The object it returns contains two properties: top and left. This method only works on visible elements.

The above is the detailed content of JQuery Basics Course: Introduction to DOM Operations in JQuery. For more information, please follow other related articles on the PHP Chinese website!