javascript核心技术(二十八)jq的标签节点操作(九) class类名操作 添加 移除 判断

[复制链接]
查看: 1725|回复: 31
发表于 2023-1-26 13:24:52 | 显示全部楼层 | 阅读模式
在前面的jq节点操作中,我们并未操作class属性,是因为在jq中它专门提供了操作class属性的方法。
语法如下:
  1. $('#btn').addClass('one'); 追加class属性值
  2. $('#btn').removeClass('one'); 移除class属性值
  3. $('#btn').hasClass('one'); 判断class属性值是否存在
  4. $('#btn').toggleClass('one');//判断class属性值是否存在,存在则执行移除操作,不存在则执行添加操作
复制代码
下面我们用代码演示一下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class类名操作 添加 移除 判断是否存在</title>
    <script src="./jquery.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" id="input_t" value="hello" class="sxc beo svn">
    </div>
</body>
<script>
    $('#input_t').addClass('one');//给class追加一个值
    $('#input_t').removeClass('sxc');//移除一个class值
    var has=$('#input_t').hasClass('sxc');//判断class中是否存在该值
    $('#input_t').toggleClass('beo');//判断class中是否存在该值,如果存在则移除,否则添加
    console.log(has);
</script>
</html>

执行结果如下:

javascript核心技术(二十八)jq的标签节点操作(九) class类名操作 添加 移除 判断

javascript核心技术(二十八)jq的标签节点操作(九) class类名操作 添加 移除 判断

以上代码中,input标签的class原有sxc beo svn三个值,我们先给class添加了一个one值,又移除了一个sxc值,此时class为beo svn one。
然后我们判断sxc是否存在,显然是不存在的,返回false。
然后我们使用toggleClass方法添加一个beo值,由于beo是存在的,所以执行了移除操作,所以最终input的class有两个值:svn one。

类名操作经常用于动态的控制元素的样式,是一个非常重要的操作,请大家多多练习,务必掌握。
易博软件介绍

0

主题

10

帖子

6

积分

营销入门

Rank: 2

积分
6
发表于 2023-2-19 14:34:16 | 显示全部楼层
编程的不一定是程序员,比如我就只是业余爱好者,一个程序能够运行畅通是我最大的愿望。我甚至是最基本的VB6也没有熟悉,但为了提高实际工作中的效率,只有勉为其难的编一些小程序在工作中用。相比之下你们这些经过系统学习的人是幸运的,共同努力吧,但愿你们能成为中国的娇子。

0

主题

11

帖子

6

积分

营销入门

Rank: 2

积分
6
发表于 2023-3-3 06:07:21 | 显示全部楼层
^真是厉害啊  谢谢你的点悟

0

主题

12

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-3-13 10:39:36 | 显示全部楼层
我也相信中国有世界上最好的程序员!我是第一次到这里来,进入我眼的就是这篇文章。我现在也在学编程。我看了感触好深哦。对我真是一次极大的教育。
发表于 2023-3-23 11:15:52 | 显示全部楼层
太精辟了,谢谢

4

主题

235

帖子

130

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
130

终身会员

发表于 2023-3-28 20:09:04 | 显示全部楼层
我也看了。很多问题值得我深思

0

主题

12

帖子

6

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
6
发表于 2023-4-3 05:21:56 | 显示全部楼层
其实编程一开始并没有太多的“路”和灵感,编的程序多了,也便有了。。。。  FOR i=学习 TO 实践  Print String(i, 成功些)  Print  Next i   
发表于 2023-4-8 13:37:19 | 显示全部楼层
同样的说法,感动!我有时候有一种感觉就是经常写程序,写到一定程度就没有太大的提高了。总觉得自己学的差不多了!看了这篇文章真的惭愧越年越心虚!越感到自己的无知!  再一次谢了!发自内心的!  有了以后的想法!  还是感谢!别的什么都不说了!  

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-4-13 19:31:23 | 显示全部楼层
受益匪浅。。。。。

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-4-18 12:39:33 | 显示全部楼层
感谢楼主的肺腑之言
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|Archiver|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表