jQuery 的 jQuery.replaceAll() 和 jQuery.replaceWith() 方法有什么区别?
jQuery.replaceAll()
replaceAll( selector ) 方法用指定的selector匹配到的元素替换匹配到的元素。
以下是此方法使用到的所有参数的描述:
- selector − 要查找并用其替换匹配元素的元素。
示例
您可以尝试运行以下代码,学习如何使用 jQuery.replaceAll() 方法。
<html> <head> <title>jQuery replaceAll() method</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function() { $("div").click(function () { $('<div class = "div"></div>').replaceAll( this ); }); }); </script> <style> .div { margin:10px; padding:12px; border:2px solid #666; width:60px; } </style> </head> <body> <p>Click on any square below to see the result:</p> <div class = "div" style = "background-color:blue;">ONE</div> <div class = "div" style = "background-color:green;">TWO</div> <div class = "div" style = "background-color:red;">THREE</div> </body> </html>
jQuery.replaceWith()
replaceWith(content) 方法用指定的 HTML 或 DOM 元素替换所有匹配的元素。这将返回刚刚替换的 jQuery 元素,该元素已从 DOM 中移除。
以下是此方法使用到的所有参数的描述:
- content − 用于替换匹配元素的内容。
示例
您可以尝试运行以下代码,学习如何使用 jQuery.replaceWith() 方法。
<html> <head> <title>jQuery replaceWith() method</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function() { $("div").click(function () { $(this).replaceWith( ('<div class = "div"></div>') ); }); }); </script> <style> .div { margin:10px; padding:12px; border:2px solid #666; width:60px; } </style> </head> <body> <p>Click on any square below to see the result:</p> <div class = "div" style = "background-color:blue;">ONE</div> <div class = "div" style = "background-color:green;">TWO</div> <div class = "div" style = "background-color:red;">THREE</div> </body> </html>
广告