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

首页

web前端

js教程

简洁易懂的jQuery：jQuery操作

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 03, 2023 pm 10:09 PM

选择器 (selector)动画 (animation)事件 (event)

简洁易懂的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>).

摸索index()方法

您可以通过将元素传递给 index() 方法来确定包装集中元素的索引。例如，假设您有一个包含网页中所有 index() 方法来确定包装集中元素的索引。例如，假设您有一个包含网页中所有 <div> 元素的包装集，并且您想知道最后一个 <code><div> 元素的包装集，并且您想知道最后一个元素的索引。<p> <pre class='brush:php;toolbar: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> <code>index() 的使用并没有真正击中要害，直到我们考虑如何将它与事件一起使用。例如，通过点击下面代码中的 <div> 元素，我们可以将点击的 <code><div> 元素（使用关键字 <code>this）传递给 index() 方法来确定点击的 <div> <code>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>

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

使用 JavaScript html() 方法结合一些 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>

您还可以更新从

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

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

.get(0).nodeValue 提取值。 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>

请注意，当包装集中的项目是文本节点时，我们必须使用

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

当您使用 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>

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

以上是简洁易懂的jQuery：jQuery操作的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

See all articles