jQuery 源码分析 Class 操作 - 文章教程

jQuery 源码分析 Class 操作

发布于 2021-08-08 字数 2373 浏览 871 评论 0

jQuery 中 Class 操作相关的方法

jQuery 中共提供了四个操作 Class 的方法,除了 toggleClass 外,其他从方法名就可以知道方法是干嘛的,下文会分别举具体例子

.addClass(className):添加className
.removeClass(className):删除className
.hasClass(className):是否有className
.toggleClass(className):如果没有className,则添加className;如果有,则删除className

.addClass:添加 Class

3 种用法,直接上例子

$('#aa').addClass('green'); // 添加green类
$('#cc').addClass('red green'); // 添加red green类

// index:元素在集合中的位置,从0开始
// className:元素当前className
// 返回值:添加到元素上的class
$('div').addClass(function(index, className){
    if(index>1){
        return 'red';
    }else{
        return 'green';
    }
});

.removeClass:删除 Class

$('#aa').removeClass('green'); // 添加green类
$('#aa').removeClass('red green'); // 添加red green类
$('#aa').removeClass();  // 删除所有class

// index:元素在集合中的位置,从0开始
// className:元素当前className
// 返回值:从元素上删除的class
$('div').removeClass(function(index, className){
    if(index>1){
        return 'red';
    }else{
        return 'green';
    }
});

.hasClass:是否有某个类

直接上例子;下面例子中需要注意的是:只要集合中的任意一个元素(div)有 red 类,它就返回 true

$('div').hasClass('red'); // 是否存在div,它有red类

// .toggleClass:切换类

$('div').toggleClass('red'); // 切换red类
$('div').toggleClass('red green'); // 切换red、green类,相当于连续调两次toggleClass,分别传入red、green

var flag = false;
$('div').toggleClass('red', flag); // 如果flag为true,添加red类;否则,删除red类

$('div').toggleClass(function (index, className) {
  // 参数参照 .addClass
  if (index > 1) {
    return 'red'; // 这里返回的类会被拿去toggle~~~
  } else {
    return 'green';
  }
});

$('div').toggleClass(function (index, className, flag) {
  // 跟上面的区别在于多了一个flag,其实就是本例子最后一个参数false
  if (index > 1) {
    return 'red';
  } else {
    return 'green';
  }
}, false);

写在后面

Class 操作的源码比较简单,字符串查找、相加、替换神马的,只要了解基本的正则,熟悉 jQuery.fn.each 就问题不大,这里就略过了。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
81903 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0