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

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的!!!!
当您运行上述脚本时，浏览器上将显示一个按钮。当您点击按钮时，它将从所选元素中删除该类。

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

运行后：

jQuery---JQuery remove（），removeAttr（）和removeClass（）示例区别相关推荐

jQuery与JavaScript与ajax三者的区别与联系
jQuery与JavaScript与ajax三者的区别与联系简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页 ...
13款基于jQuery Mobile的布局插件和示例
现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例 ...
jquery中this与$(this)的用法区别.
2019独角兽企业重金招聘Python工程师标准>>> jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( ...
JQuery中隐式迭代和each的区别(通过反选功能解析)
最近在学JQuery,发现它的确是个很给力的东东....不过各种符号,各种选择器,稍有点乱,还要在日后工作中经常用才能熟练起来. 今天在学习时,遇到这样一个问题,是在做checkbox的反选按钮时,两 ...
[jQuery] jQuery和Zepto的区别？各自的使用场景？
[jQuery] jQuery和Zepto的区别?各自的使用场景? 创建$的方式不同.前者略微要大,后者略微小点.场景....emmmm 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
[jQuery] jQuery与jQuery UI有啥区别？
[jQuery] jQuery与jQuery UI有啥区别? 1)jQuery是一个js库,主要提供的功能是选择器.属性修改和事件绑定等 2)jQuery UI则是在jQuery的基础上,利用jQue ...
[jQuery] jquery.extend与jquery.fn.extend的区别？
[jQuery] jquery.extend与jquery.fn.extend的区别? 1.认识jQuery extend()和jQuery.fn.extend()jQuery的API手册中,exte ...
[jQuery] jQuery的attr和prop方法有什么区别？
[jQuery] jQuery的attr和prop方法有什么区别? 一.property 固有属性. 打开控制台审查元素切换Tab至 Properties下查看固有属性二.自定义属性(固有属性列表 ...
jQuery中ready与load事件的区别
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. jQuery中ready与load事件的区别概述: 大家在工作中用jQuery的时候一定会在使用之 ...

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

jQuery---JQuery remove（），removeAttr（）和removeClass（）示例区别相关推荐

最新文章

热门文章