简洁易懂的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> 元素将是包装器集中的唯一元素。
一旦创建了 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>
注释：不包含属性的简单元素 - 例如$('<div>
document.createElement DOM 方法创建，而所有其他情况都依赖于 innerHTML 属性。事实上，您可以直接向 jQuery 函数传递使用 document.createElement -e.g 创建的元素。 $(document.createElement('div'))。
传递给 jQuery 的 HTML 字符串不能包含在 <div> 元素内可能被视为无效的元素。
传递给 jQuery 函数的 HTML 字符串必须格式正确。
传递 jQuery HTML 时，您应该打开和关闭所有 HTML 元素。不这样做可能会导致错误，主要是在 Internet Explorer 中。为了安全起见，请始终关闭 HTML 元素并避免编写快捷 HTML - 例如$(<div />).
摸索index()方法
您可以通过将元素传递给 index() 方法来确定包装集中元素的索引。例如，假设您有一个包含网页中所有 index() 方法来确定包装集中元素的索引。例如，假设您有一个包含网页中所有 <div> 元素的包装集，并且您想知道最后一个 <div> 元素的包装集，并且您想知道最后一个
<!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>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操作的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何使用源地图调试缩小JavaScript代码？
Mar 18, 2025 pm 03:17 PM
本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。
console.log输出结果差异：两次调用为何不同？
Apr 04, 2025 pm 05:12 PM
深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...
初学者的打字稿，第2部分：基本数据类型
Mar 19, 2025 am 09:10 AM
掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型 与JavaScript一样，TypeScript中的null
