Skip to content

Files

Latest commit

788443c · Jan 8, 2022

History

History
283 lines (227 loc) · 8.85 KB

05.md

File metadata and controls

283 lines (227 loc) · 8.85 KB

四、操纵

动态创建、操作和添加 HTML

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

样本:sample41.html

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://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>元素将是包装器集中唯一的元素。

一旦创建了 HTML 结构中的任何元素,我们就可以使用find()方法对其进行操作。

样本:sample42.html

<!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()方法向页面添加标记。

样本:sample43.html

<!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 创建的元素,例如 $(document.createElement('div'))

传递给 jQuery 的 HTML 字符串不能包含在

元素中可能被认为无效的元素。

传递给 jQuery 函数的 HTML 字符串必须格式良好。

在传递 jQuery HTML 时,应该打开和关闭所有的 HTML 元素。不这样做可能会导致错误,主要是在互联网浏览器中。为了安全起见,请始终关闭您的 HTML 元素,避免编写快捷 HTML——例如 $(<div />)

摸索index()方法

您可以通过将一个元素传递给 index() 方法来确定包装器集中该元素的索引。例如,假设您有一个包含网页中所有<div>元素的包装器集,并且您想知道最后一个 <div> 元素的索引。

样本:sample44.html

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

使用index()并不会真正击中要害,除非我们考虑如何将其用于事件。例如,通过点击下面代码中的<div>元素,我们可以将点击的<div>元素(使用关键字this)传递给index()方法来确定点击的<div>的索引。

样本:sample45.html

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="nav">
        <div>nav text</div>
        <div>nav text</div>
        <div>nav text</div>
        <div>nav text</div>
        </div>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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>

摸索着text()的方法

人们可能会错误地认为text() 方法只返回包装器集中第一个元素的文本节点。但是,它实际上将连接包装器集中包含的所有元素的文本节点,然后将连接的值作为单个字符串返回。确保您知道这个功能,否则您可能会得到一些意想不到的结果。

样本:sample46.html

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

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

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

样本:sample47.html

<!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()方法将包含文本节点和元素节点。检查下面的代码来理解这个概念。

样本:sample48.html

<!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 结构中只提取文本节点。

样本:sample49.html

<!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()不会从包装器集合中移除元素

当您从 DOM 中使用remove()一个 DOM 片段时,被移除的 DOM 结构中包含的元素仍然包含在包装器集中。您可以移除一个元素,对该元素进行操作,然后将该元素放回 DOM 中,所有这些都在一个 jQuery 链中。

**样本:sample50.html

<!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 包装器集中被移除。**