jQuery---JQuery remove（），removeAttr（）和removeClass（）示例区别

来源：互联网发布：在墨尔本生活知乎编辑：程序博客网时间：2024/06/11 17:42

JQuery remove（）方法
remove（）方法与detach（）方法相同，它从DOM中删除所选元素，包括所有文本和子节点。但是，它不会将与DOM中匹配的元素集合中的已删除元素相关联的所有数据和事件完全保留。它恢复元素数据，而不是其事件处理程序。与元素关联的所有事件和数据都将被删除。

JQuery Remove（）语法
$(selector).remove();
它不包含任何参数。

JQuery Remove（）示例

<!doctype html><head><title>JQuery Remove Method</title><script src="/引入/jquery-1.11.0.min.js"></script></head><h2>JQuery Remove Method Example</h2><script type="text/javascript">`   $(document).ready(function(){     $("button").click(function(){       $("h3,h4").remove();      });   });</script><body>   <button>Click to remove the elements</button>   <h3>Hello world!!!</h3>   <h4>Welcome to JQuery!!!</h4></body></html>

如上面的程序所示，我们使用$（document）.ready中的代码，它是一个在文档准备就绪时触发的事件。一旦页面文档对象模型准备好执行
JavaScript代码，它将运行。 $（“button”）。click（function（））行定义点击按钮时发生的点击事件。
$（“H3，H4”）删除（）。行定义了从DOM中删除所选元素的remove（）方法。
当我们运行上述脚本时，浏览器上将出现一个按钮。如果我们点击按钮，所有元素都将从DOM中删除。

当您运行上述示例时，您将获得以下输出：
运行前

运行后
这里写图片描述

JQuery removeAttr（）方法

它用于从匹配元素集合中的所选元素中删除属性。它使用可以直接在jQuery对象上调用的removeAttribute（）函数。它将删除在removeAttr（）方法的参数中指定的属性。

JQuery removeAttr（）语法

$(selector).removeAttr(attribute);
它包含称为attribute的参数是必需参数，它指定要删除的一个或多个属性。

JQuery removeAttr（）示例

<!doctype html><head><title>JQuery Remove Attribute</title><script src="/引入/jquery-1.11.0.min.js"></script></head><h2>JQuery Remove Attribute Example</h2><script type="text/javascript">   $(document).ready(function(){      $("#myattribute").click(function(){        $("h4").removeAttr("style");      });   });</script><body>       <button id="myattribute">Remove the attribute</button>        <h4 style="background:orange;">Welcome to JQuery!!!!</h4></body></html>

如上面的程序所示，我们使用$（document）.ready中的代码，它是一个在文档准备就绪时触发的事件。一旦页面文档对象模型准备好执行JavaScript代码，它将运行。
$（“＃myattribute”）。click（function（））语句定义单击按钮时发生的点击事件。
$（“H4”）removeAttr（“风格”）。行定义了removeAttr（）方法从所选元素中删除属性。在这里，它将删除在h4标签中指定的样式属性。
执行上述脚本后，一个按钮将在浏览器上显示。当您点击按钮时，它将从所选元素中删除该属性。点击按钮之前，该行的背景颜色将为橙色。当您点击按钮时，背景颜色将被删除。

当您运行上述示例时，您将获得以下输出：
运行前：
这里写图片描述
运行后：

JQuery removeClass（）方法

JQuery提供了一个名为removeClass（）的方法来从匹配元素集中的选定元素中删除CSS类。在参数中定义的类名称将从所选元素中删除。假设没有定义类名，那么它将从DOM中删除所有的类。

JQuery removeClass（）语法

$(selector).removeClass(classname);
它具有称为classname的参数是必需参数，它从每个匹配元素中删除一个或多个css类。

JQuery removeClass（）示例

<!doctype html><head><title>JQuery Remove Class</title><script src="http://code.jquery.com/jquery-1.11.0.min.js"></script></head><h2>JQuery Remove Class Example</h2><style type="text/css">   .highlight   {      background:green;   }</style><script type="text/javascript">   $(document).ready(function(){      $("#myremoveclass").click(function(){        $("h4").removeClass("highlight");      });   });</script><body>       <button id="myremoveclass">Remove Class</button>        <h4 class="highlight">Welcome to JQuery!!!!</h4></body></html>

如上面的程序所示，我们使用$（document）.ready中的代码，它是一个在文档准备就绪时触发的事件。一旦页面文档对象模型准备好执行JavaScript代码，它将运行。
$（“＃myremoveclass”）。click（function（））语句定义单击按钮时发生的点击事件。
$（“H4”）removeClass（“高亮”）。行定义了从所选元素中删除CSS类的removeClass（）方法。在这里，它将从DOM中删除名为highlight的类。
该亮点类包含的背景颜色为绿色行欢迎JQuery的!!!!
当您运行上述脚本时，浏览器上将显示一个按钮。当您点击按钮时，它将从所选元素中删除该类。

当您运行上述示例时，您将获得以下输出：
运行前：
这里写图片描述
运行后：

阅读全文

0 0