简洁易懂的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 结构时，只有结构中的根元素会添加到包装器集中。在前面的代码示例中，元素将是包装器集中的唯一元素。

一旦创建了 HTML 结构中的任何元素，我们就可以使用 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>

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

传递给 jQuery 的 HTML 字符串不能包含在元素内可能被视为无效的元素。

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

传递 jQuery HTML 时，您应该打开和关闭所有 HTML 元素。不这样做可能会导致错误，主要是在 Internet Explorer 中。为了安全起见，请始终关闭 HTML 元素并避免编写快捷 HTML – 例如$().

摸索index()方法

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

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

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

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

以上就是简洁易懂的jQuery：jQuery操作的详细内容，更多请关注双恒网络其它相关文章！

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！

云资源网 » 简洁易懂的jQuery：jQuery操作

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

你们有qq群吗怎么加入？: 当然有的，如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://www.sudo1.com/page-qun.html。

云资源网钻石

喜欢 0

分享到：

简洁易懂的jQuery：jQuery操作

动态创建、操作和添加 HTML

摸索index()方法

摸索 text() 方法

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

摸索 .contents() 方法

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

常见问题FAQ

云资源网钻石

升级SVIP会员

工作时间

动态创建、操作和添加 HTML

摸索index()方法

摸索 text() 方法

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

摸索 .contents() 方法

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

常见问题FAQ

云资源网 钻石

相关推荐

提供最优质的资源集合

升级SVIP会员

工作时间

云资源网钻石