Simple and easy-to-understand jQuery: jQuery operations-JS Tutorial-php.cn

Simple and easy-to-understand jQuery: jQuery operations

Dynamicly create, manipulate and add HTML

You can dynamically create HTML markup by passing a raw HTML string to a jQuery function.

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){
      alert($('<div><a></a></div>').get(0).nodeName); // Alerts "DIV"
      alert($('<div><a></a></div>').length); // Alerts "1" <div> is in the wrapper set
      alert($('<div><a></a></div><div><a></a></div>').length); // Alerts "2" <div> are in the set
  })(jQuery); </script>
</body>
</html>

Copy after login

It should be noted that when using jQuery functions to create a DOM structure, only the root element in the structure will be added to the wrapper set. In the previous code example, the <div> element would be the only element in the wrapper set.

Once any element in the HTML structure is created, we can operate on it using the find() method.

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        (function ($) {
            $('<div><a></a></div>')
                 .find('a')
                .text('jQuery')
                .attr('href', 'http://www.jquery.com');
        })(jQuery); </script>
</body>
</html>

Copy after login

After manipulating the newly created HTML, you can also use one of jQuery's manipulation methods to add it to the DOM. Below we use the appendTo() method to add the markup to the page.

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){  $('<div><a></a></div>')
      .find('a')
      .text('jQuery')
      .attr('href', 'http://www.jquery.com')
      .end().appendTo('body'); // end() is used to exit the find() method
  })(jQuery); </script>
</body>
</html>

Copy after login

Note: Simple elements that do not contain attributes - for example $('<div>

HTML strings passed to jQuery cannot be contained within <div> elements which may be considered invalid.

When passing jQuery HTML, you should open and close all HTML elements. Failure to do so may result in errors, primarily in Internet Explorer. To be safe, always close HTML elements and avoid writing shortcut HTML - for example $(<div />).

Exploring the index() method

You can determine the index of an element in the wrapped set by passing the element to the index() method. For example, suppose you have a wrapper set that contains all <div> elements in a web page, and you want to know the index of the last <div> element.

index() doesn't really hit home until we consider how to use it with events. For example, by clicking on the <div> element in the code below, we can pass the clicked <div> element (using the keyword this) to index() method to determine the index of the clicked <div>.

Exploring the text() method

People may mistakenly believe that the text() method only returns the text node of the first element in the wrapper set. However, it actually concatenates the text nodes of all elements contained in the wrapper set and returns the concatenated value as a single string. Make sure you understand this feature or you may get some unexpected results.

Use regular expressions to update or delete characters

Using JavaScript replace() method combined with some jQuery functionality, we can very easily update or remove any character pattern in the text contained in the element.

You can also update any characters contained in the string returned from html(). This means you can not only update text, but also update and replace DOM elements via regular expressions.

Exploring .contents() method

.contents() method can be used to find all child element nodes, including text nodes contained within the element. However, there is a problem. If the retrieved content contains only text nodes, the selection will be placed in the wrapper set as a single text node. However, if the content you are retrieving contains one or more element nodes within a text node, the .contents() method will contain both text nodes and element nodes. Check the code below to grasp this concept.

Please note that when the item in the wrapper set is a text node, we must use .get(0).nodeValue to extract the value. contents() The method is convenient for extracting text node values. You can use contents() to extract only text nodes from the DOM structure.

Using remove() will not remove elements from the packed set

When you use remove(), elements contained in the DOM structure from which the DOM fragment has been removed are still included in the wrapper set. You can remove an element, perform operations on that element, and then actually put the element back into the DOM, all within a single jQuery chain.

The point here is that just because you remove() elements doesn't mean they have been removed from the jQuery wrapper set.

The above is the detailed content of Simple and easy-to-understand jQuery: jQuery operations. For more information, please follow other related articles on the PHP Chinese website!