Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use jQuery to achieve DOM operation", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to use jQuery to achieve DOM operation"!

Back 01: node creation

1. Create an element node

There are several ways to get in touch with each other later. It is common to directly describe the structure of this node through the HTML tag string, processed by the $() function, $("html structure") [related recommendations: jQuery video tutorial]

$('')

2. Create a text node

Similar to creating element nodes, you can describe the text content directly

$('I am a text node')

3. Create an attribute node

In the same way as creating an element node

$("I am a text node") back 02: node insertion

1, .append (), .appendTo () *

The selector describes append () to append content to each matching element appendTo () appends all matching elements to another, specified set of elements $(A) .append (B); / adds B to A (as the last child of A) $(A) .appendto (B); / / adds A to B (as the last child of B)

2. After (), .before () *

Selector description after () add content after specified element before () add content before specified element $(A) .after (B); / / add B $(A) .before (B) after A; / / add B before A

3. .prepend (), .prependTo () *

Selector description prepend () specifies a content within the element prependTo () specifies that the element is preceded to the interior of another element $(A) .prepend (B); / / add B to A (as the first child of A) $(A) .prependto (B); / / add A to B (as the first child of B)

4, .insertAfter (), .insertBefore ()

Selector description insertAfter () inserts content after the specified element insertBefore () inserts content in front of the specified element $(A) .insertAfter (B); / inserts An into the back of B $(A) .insertBefore (B); / / inserts An into the front 03 of B: node deletion

1, .empty ()

This method is mainly used to clear all child nodes of the specified element, such as:

Brother Yao

If we remove all the elements of the div through the empty method, it just clears the internal html code, but the markup remains in the DOM.

/ / process $('.hello') .empty () via empty; / / result:

2. Remove () *

Remove the element itself, including child nodes, events, and other information.

/ / process $('.btn') .remove () via remove; / / result: the node no longer exists and the event will be destroyed

3. Detach ()

Detach is literally easy to understand. Let a web element be hosted. That is, the element is removed from the current page, but the memory model object for the element is retained.

The official jQuery documentation states:

This method does not remove matching elements from the jQuery object, so you can use them again in the future. Unlike remove (), all bound events, additional data, and so on are preserved.

The sentence $("div"). Detach () removes the object, but the display effect is gone. But it still exists in memory. When you append, you are back in the document stream. It shows up again.

Of course, it's important to note here that the detach method is JQuery-specific, so it can only handle events or data bound through JQuery's methods.

Var li = $(".list li:eq (2)") .detach (); setTimeout () = > {$(".list") .append (li);}, 3000); No.04: node replication and replacement

1. Clone ()

Cloning nodes is a common operation of DOM, and jQuery provides a clone method specifically for handling dom clones.

The clone () method deeply copies a collection of all matching elements, including all matching elements, subordinate elements of matching elements, and text nodes.

The clone method is relatively simple to clone the node, but it should be noted that if the node has other processing such as events or data, we need to pass a Boolean ture to specify through clone (ture). This is not only to clone the simple node structure, but also to clone the accompanying events and data.

$("div"). On ('click', function () {/ / execute operation}) / / clone handles a $("div") .clone () / / only the structure is cloned, and the event is lost / / clone handles two $("div") .clone (true) / / structure, event and data are all cloned

2, .replaceWith (), .replaceAll () *

$(A) .replaceWith (B); / / replace A with B $(A) .replaceAll (B); / / replace B with A.

3. Wrap ()

If you want to wrap an element in another element, that is, add a parent element to it, JQuery provides a wrap method for such processing.

Hello, world!

$('p'). Wrap ('') / / result: / *

Hello, world!

, /

4. Unwrap ()

This method is in contrast to the wrap method, which removes the parent element of the matching element collection, leaving itself (and sibling elements, if any) in its original place.

5. .wrapAll ()

Wrap is for a single dom element. If you want to wrap the elements in the collection with other elements, that is, add a parent element to them, JQuery provides a wrapAll method for such processing. For example, there are two p elements on the page. If you want to add a common parent class div for the two p elements, this is achieved by the following code:

$('p'). WrapAll ('')

6. .wrappers ()

If you want to wrap all the child elements within the elements in the collection with other elements and treat them as children of the specified element, JQuery provides a wrapInner method for this processing. Let's look at examples:

Hello, Worldwide Hello, worldview $('div'). WrapInner ('

') / / the result is: / *

Hello, world!

Hello, world!

* / 05 return: node traversal

1. Children () *

JQuery is a collection object, and if you want to quickly find the first-level child elements in the collection, you can use the children () method. Note here: the .children (selector) method returns all child elements of each element in the matching element set (only sons, which can be understood here as a father-son relationship).

one

Tip: jQuery is a collection object, so children is the first-level child element that matches each element in the collection.

2. Find () *

Find is similar to children, except that children is a parent-child relationship lookup and find is a descendant relationship lookup (including a parent-child relationship).

one

If the code is $("div"). Find ("li"), at this time, li and div are grandparents, which can be quickly found by the find method.

Tip:

Find is the descendant of traversing each element in the current collection of elements. As long as it meets the requirements, no matter they are sons or grandchildren.

Unlike other tree traversal methods, selector expressions are required for .find (). If we need to implement the retrieval of all descendant elements, we can pass the wildcard selector *.

Find traverses only in future generations, not itself.

3. .parent () *

If you want to quickly find the parent of each element in the collection (which can be understood as a father-son relationship), you can use the parent () method at this time. Because it is a parent element, this method only looks up one level.

one

Find the parent element div, $(ul). Parent () of ul, which is such a simple expression

4. Please ()

JQuery is a collection object, and if you want to quickly find all the grandparents of each element in the collection, you can use the parents () method. In fact, it is also similar to the difference between find and children, parent will only find one level, parents will look up to find the ancestor node.

one

Find the grandparent element div on the li node, where you can use the $("li") .parents () method

5. Closest ()

With the selected element as the center, you can look inside through the find and children methods.

The closest () method accepts a selector string that matches the element. Starting with the element itself, it matches the parent element step by step on the DOM tree, and returns the ancestor element that matches first. For example, in the an element, look up all the li elements, which can be expressed as follows: $("a"). Closet ("li').

Tip: jQuery is a collection object, so closest is the ancestor element that matches each element in the collection.

The starting position is different: .closest starts with the current element. resume starts with the parent element

The goal of traversal is different: .closest to find the specified target, .closest traverses to the document root element, closest looks up until it finds a match, stops searching until it finds a match, parents finds the root element, and adds the matching element to the collection

The result is different: .closest returns a jquery object containing zero or one element, while parents returns a jquery object containing zero or one or more elements.

6, .next (), .nextAll () *

.next (): this method is used to match the next element of the current element.

.nextAll (): finds all sibling elements after the current element.

7, .prev (), .roomAll () *

.prev (): this method is used to match the previous element of the current element.

.roomAll (): finds all sibling elements before the current element

8. .siblings () *

This method is used to match all sibling elements of the current element.

Back 06: filter

1. .eq (index) *

Gets the Nth jQuery object in the current chain operation and returns the jQuery object. When the parameter is greater than or equal to 0, it is selected in the forward direction. For example, 0 represents the first and 1 represents the second. When the parameter is negative, it is selected in reverse. For example,-1 is the last. For more information, please see the following example.

2, .first (), .last () *

.first (): gets the first element in the set of matching elements.

.last (): gets the last element in the matching element collection.

3. Filter ()

Filters out a collection of elements that match the specified expression. This method is used to narrow the scope of the match. Separate multiple expressions with commas.

4. Is ()

Detects a collection of matching elements based on a selector, DOM element, or jQuery object, and returns true if at least one of the elements matches the given expression. If no element matches, or if the expression is invalid, 'false' is returned.

Note: all expressions are supported only in jQuery 1.3. In previous versions, if complex expressions were provided, such as hierarchical selectors such as +, ~, and >, true was always returned

5. Not ()

Removes elements that match the specified expression from the collection of matching elements

6. Map (callback)

A new jQuery object is generated by matching each element in the current collection with a function.

7. Has ()

Filter descendant elements in the set of matching elements that have matching selectors or DOM elements.

At this point, I believe you have a deeper understanding of "how to use jQuery to achieve DOM operations", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.