简洁易懂的jQuery：jQuery操作-js教程-PHP中文网

简洁易懂的jQuery：jQuery操作

WBOY

发布： 2023-09-03 22:09:12

原创

768人浏览过

简洁易懂的jquery：jquery操作

动态创建、操作和添加 HTML

您可以通过向 jQuery 函数传递原始 HTML 字符串来动态创建 HTML 标记。

<!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>

登录后复制

需要注意的是，使用 jQuery 函数创建 DOM 结构时，只有结构中的根元素会添加到包装器集中。在前面的代码示例中，<div> 元素将是包装器集中的唯一元素。 <p>一旦创建了 HTML 结构中的任何元素，我们就可以使用 <code>find() 方法对其进行操作。

<!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>

登录后复制

对新创建的 HTML 进行操作后，还可以使用 jQuery 的操作方法之一将其添加到 DOM 中。下面我们使用 appendTo() 方法将标记添加到页面。

<!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>

登录后复制

注释：不包含属性的简单元素 - 例如$('<div></div>') - 通过 document.createElement DOM 方法创建，而所有其他情况都依赖于 innerHTML 属性。事实上，您可以直接向 jQuery 函数传递使用 document.createElement -e.g 创建的元素。 $(document.createElement('div'))。

传递给 jQuery 的 HTML 字符串不能包含在 <div> 元素内可能被视为无效的元素。 <p>传递给 jQuery 函数的 HTML 字符串必须格式正确。</p> <p>传递 jQuery HTML 时，您应该打开和关闭所有 HTML 元素。不这样做可能会导致错误，主要是在 Internet Explorer 中。为了安全起见，请始终关闭 HTML 元素并避免编写快捷 HTML - 例如<code>$(<div></div>).

码哩写作

最懂作者的AI辅助创作工具

查看详情

摸索index()方法

您可以通过将元素传递给 index() 方法来确定包装集中元素的索引。例如，假设您有一个包含网页中所有 <div> 元素的包装集，并且您想知道最后一个 <code><div> 元素的索引。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbal:false;"> <!DOCTYPE html> <html lang="en"> <body> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { // Alerts "3" alert($('div').index($('div:last'))); })(jQuery); </script> </body> </html> </pre>

登录后复制

</div>
<p><code>index()

的使用并没有真正击中要害，直到我们考虑如何将它与事件一起使用。例如，通过点击下面代码中的 <div> 元素，我们可以将点击的 <code><div> 元素（使用关键字 <code>this）传递给 index() 方法来确定点击的

<div> 的索引。
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbal:false;">
<!DOCTYPE html>
<html lang=&quot;en&quot;>
<body>
    <div id=&quot;nav&quot;>
        <div>nav text</div>
        <div>nav text</div>
        <div>nav text</div>
        <div>nav text</div>
        </div>
            <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;></script>
            <script>  (function ($) {
      // Alert index of the clicked div amongst all div's in the wrapper set
      $('#nav div').click(function () {
          alert($('#nav div').index(this));
          // or, a nice trick...
          alert($(this).prevAll().length);
      });
  })(jQuery); </script>
</body>
</html>
</pre>登录后复制</div>
<hr>
<h2>摸索 text() 方法</h2>
<p>人们可能会错误地认为 <code>text()

方法仅返回包装器集中第一个元素的文本节点。但是，它实际上会连接包装器集中包含的所有元素的文本节点，然后将连接后的值作为单个字符串返回。确保您了解此功能，否则您可能会得到一些意想不到的结果。

<!DOCTYPE html>
<html lang="en">
<body>
    <div>1,</div>
    <div>2,</div>
    <div>3,</div>
    <div>4</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> (function ($) {
     alert($('div').text()); // Alerts "1,2,3,4"
 })(jQuery); </script>
</body>
</html>

登录后复制

使用正则表达式更新或删除字符

使用 JavaScript replace() 方法结合一些 jQuery 功能，我们可以非常轻松地更新或删除元素中包含的文本中的任何字符模式。

<!DOCTYPE html>
<html lang="en">
<body>
    <p>
        I really hate using JavaScript.     I mean really hate it!     It is the best twister
        ever!
    </p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
var $p = $('p');
      // Replace 'hate' with 'love'
      $p.text($p.text().replace(/hate/ig, 'love'));
      // Remove 'twister' and replace it with nothing
      $p.text($p.text().replace(/twister/ig, ''));   // Keep in mind that text() returns a string, not the jQuery object.
      // That is how the replace() string method is chained after using text()
  })(jQuery); </script>
</body>
</html>

登录后复制

您还可以更新从 html() 返回的字符串中包含的任何字符。这意味着您不仅可以更新文本，还可以通过正则表达式更新和替换 DOM 元素。

摸索 .contents() 方法

.contents() 方法可用于查找所有子元素节点，包括元素内部包含的文本节点。然而，有一个问题。如果检索到的内容仅包含文本节点，则所选内容将作为单个文本节点放置在包装器集中。但是，如果您要检索的内容在文本节点中包含一个或多个元素节点，则 .contents() 方法将包含文本节点和元素节点。检查下面的代码以掌握这个概念。

<!DOCTYPE html>
<html lang="en">
<body>
    <p>I love using jQuery!</p>
    <p>I love <strong>really</strong> using jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // Alerts "I love using jQuery!" because no HTML elements exist
      alert($('p:first').contents().get(0).nodeValue);
      // Alerts "I love"
      alert($('p:last').contents().get(0).nodeValue);
      // Alerts "really" but is an HTML element, not a text node
      alert($('p:last').contents().eq(1).text());
      // Alerts "using jQuery!"
      alert($('p:last').contents().get(2).nodeValue);
  })(jQuery); </script>
</body>
</html>

登录后复制

请注意，当包装集中的项目是文本节点时，我们必须使用 .get(0).nodeValue 提取值。 contents() 方法对于提取文本节点值很方便。可以使用 contents() 从 DOM 结构中仅提取文本节点。

<!DOCTYPE html>
<html lang="en">
<body>
    <p>jQuery gives me <strong>more <span>power</span></strong> than any other web tool!
    </p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){  $('p')  .find('*') // Select all nodes
      .andSelf() // Include <p>
      .contents() // Grab all child nodes, including text
      .filter(function() {return this.nodeType == Node.TEXT_NODE;}) // Remove non-text nodes
      .each(function (i, text) { alert(text.nodeValue) }); // Alert text contained in wrapper set
  })(jQuery); </script>
</body>
</html>

登录后复制

使用remove()不会从包装集中删除元素

当您使用 remove() 时，来自 DOM 的 DOM 片段已删除的 DOM 结构中包含的元素仍然包含在包装集中。您可以删除一个元素，对该元素进行操作，然后将该元素实际放回到 DOM 中，所有这些都在单个 jQuery 链中。

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

登录后复制

这里的要点是，仅仅因为您 remove() 元素并不意味着它们已从 jQuery 包装器集中删除。