jQuery操作类相关的方法

曾经终败给现在 2022-03-12 01:54 273阅读 0赞

jQuery中操作类相关的方法总共有三个，下面的代码很基础，也很容易懂。部分地方做好了注释。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery操作类相关的方法</title>
        <style> *{ margin: 0; padding: 0 } .class1{ width: 100px; height: 100px; background: red; } .class2{ border: 10px solid #000; } </style>
        <script src="js/jquery.js"></script>
       	<script> $(function(){ /* 1.addClass(class|fn) 作用：添加一个类 如果要添加多个，多个类名之间用空格隔开即可 2.removeClass([class|fn]) 作用：删除一个类 如果要删除多个，多个类名之间用空格隔开即可 3.toggleClass(class|fn[.sw]) 作用：切换类 有就删除，没有就添加 */ var btns = document.getElementsByTagName("button"); btns[0].onclick = function(){ $("div").addClass("class1 class2") } btns[1].onclick = function(){ $("div").removeClass("class1 class2") } btns[2].onclick = function(){ $("div").toggleClass("class1 class2") } }) </script>
    </head>
    <body>
        <button>添加类</button>
        <button>删除类</button>
        <button>切换类</button>
        <div> </div>
    </body>
    </html>

若想查看运行效果，可复制代码。

发表评论取消回复

表情：

评论列表（有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery操作css方法

目录一、jQuery可以使用css方法来修改元素样式二、设置类的样式方法 1.添加类 2.移除类 3.切换类三、类操作与className区别四、显示隐藏

太过爱你忘了你带给我的痛/ 2024年04月03日 09:11/ 0 赞/ 90 阅读

相关 jquery 操作 checkbox 相关方法

使用 jquery 操作 checkbox ，相关方法如下 1、设置 checkbox 选中使用 prop("checked", true) 方法 <!D

左手的ㄟ右手/ 2022年12月25日 00:47/ 0 赞/ 178 阅读

相关 05-jquery-CSS 相关操作

CSS 相关操作 CSS()方法 // 获取元素的css $("h1").css("font-size");

野性酷女/ 2022年12月08日 12:50/ 0 赞/ 223 阅读

相关 C#操作Xml的相关方法

一. 两种方式 XPath XmlDocument XmlNodeList 现有 XML 文件，内容如下： <?xml version="1.0" encod

╰半橙微兮°/ 2022年08月06日 09:18/ 0 赞/ 198 阅读

相关 jquery相关操作

$("select").bind("keydown",function(event)\{ if(event.keyCode == 1

水深无声/ 2022年08月06日 05:11/ 0 赞/ 222 阅读

相关 jQuery操作CSS样式的方法

jQuery操作CSS样式的方法总共有四种，很简单，建议使用下面的第三种方法。上代码： <!DOCTYPE html> <html lang="en">

矫情吗；*/ 2022年03月12日 10:44/ 0 赞/ 338 阅读

相关 jQuery文本值相关的方法

关于jQuery文本值相关的方法其实和原生JS中的操作基本上是一样的，这里的代码都是最基础的。 <!DOCTYPE html> <html lang="en"

青旅半醒/ 2022年03月12日 10:26/ 0 赞/ 192 阅读

相关 jQuery操作类相关的方法

jQuery中操作类相关的方法总共有三个，下面的代码很基础，也很容易懂。部分地方做好了注释。 <!DOCTYPE html> <html lang="en">

曾经终败给现在/ 2022年03月12日 01:54/ 0 赞/ 274 阅读

相关 jQuery文档操作方法

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html() ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

桃扇骨/ 2022年01月22日 05:07/ 0 赞/ 281 阅读

相关 jquery radio,select相关操作

Radio ![6e3170d1-a0ea-3a86-8add-a1eb66d68c23.jpg][] 1.获取选中值，三种方法都可以： $('input:ra

分手后的思念是犯贱/ 2021年12月05日 17:53/ 0 赞/ 344 阅读