jquery的class样式相关操作方法总结

目录

• JavaScript原生类样式操作
  • 获取类名
  • 添加类名
  • 替换类名
  • 删除类名
• jQuery类样式操作
  • 使用attr获取和设置样式
  • 添加样式 addClass()
  • 删除样式 removeClass()
  • 切换样式 toggleClass()
  • 判断样式是否存在 is()/hasClass()

JavaScript原生类样式操作

原生的方法比较简单，因为只有一个className来操作。首先获取DOM对象，其次使用className属性来获取类，获取到的是字符串，==所以对类的操作就是对字符串的操作。==

1. 获取类名

var obj = document.getElementById("example");
var name = obj.className;
console.log(name)  //"add"

2. 添加类名

var obj = document.getElementById("example");  //'add'
obj.className += " done hello"; //记得前面要用空格隔开，可以添加单个或者多个
console.log(obj.className)  //"add done hello"

3. 替换类名
   （这个比较适用于操作单个类名）

var obj = document.getElementById("example");
//obj.className --> 'add hello'
obj.className = obj.className.replace("add","done"); //替换指定类  'done hello'
obj.className = "done";  //清空所有类用done替换  'done'

4. 删除类名

var obj = document.getElementById("example");  //'add done'
obj.className = obj.className.replace("add","");  //删除指定类  ' done'
obj.className = "";  //删除所有类  ''

jquery的class样式相关操作方法

使用attr获取和设置样式

因为class是html标签中的一个属性，所以可以根据attr()获取样式，也可以设置样式值。

获取样式

方法

$div.attr("class");

栗子

$("#example").attr("class");

//输出：add done

2.jpg
6.png

设置样式

当然一开始也可以根据addClass()设置样式值。我觉得attr去设置样式存在的必要性，是在于当不确定现在这个标签中有什么类的时候，要修改成特定的类就可以直接覆盖。

方法1

$div.attr("class","done");

栗子

$("#example").attr("class","done");

2.jpg
7.jpg

如果要设置多个类，那么中间使用空格即可。

方法2

$div.attr("class","hi hello");

栗子

$div.attr("class","hi hello");

2.jpg
8.jpg

添加样式

添加类可以称之为追加类，因为不会覆盖原来的类，只是在原来的基础上添加新类。

追加的类有以下两个特性：

1. 如果添加多个class，那么对样式进行合并显示
2. 如果不同的class添加了同一样式属性，后者覆盖前者。

添加单个样式

方法

$div.addClass(类名)

栗子

$("#example").addClass("done");

1.jpg
2.jpg

添加多个样式

方法

$div.addClass(类名1 类名2 ...)
参数多个类名中间空格隔开
or
$div.addClass(类名1).addClass(类名2)

栗子

$("#example").addClass("done hide");
or
$("#example").addClass("done").addClass("hide");

1.jpg
3.jpg

删除样式

删除单个样式

方法

$div.removeClass(类名)

栗子

$("#example").removeClass("done");

3.jpg
4.jpg

删除多个样式

方法

$div.removeClass(类名1 类名2)
or
$div.removeClass(类名1).removeClass(类名2)

栗子

$("#example").removeClass("done hide");
or
$("#example").removeClass("done").removeClass("hide");

3.jpg
1.jpg

删除所有样式

方法

$div.removeClass()
不加参数

栗子

$("#example").removeClass();

3.jpg
5.jpg

切换样式

总的来说是toggleClass();但是里面的参数略有不同。

形式1

$div.toggleClass("类名1 类名2",[true/false])

1. 前面的那个参数是要切换的类名，可以是单个，也可以是空格隔开的多个。
2. 后面的那个参数是可选的，如果填写了true，与这个div执行addClass()的效果相同。
3. 如果填写了false，与这个div执行removeClass()的效果相同。

栗子1

    $("#example").toggleClass("done hello");

栗子2

    $("#example").toggleClass("done",true);
    //相当于addClass("done");
    $("#example").toggleClass("done",false);
    //相当于removeClass("done");

形式2

$div.toggleClass(function(index,className){ return toggleClass},[true/false])

1. 前面是一个函数，第一个参数是序号，从0开始，第二个参数是对应的类的名字。
   
2. 此函数必须返回需要切换的类名，否则会报错。
3. 后面的那个参数是可选的，如果填写了true，与这个div执行addClass()的效果相同。
   
4. 如果填写了false，与这个div执行removeClass()的效果相同。

栗子1

$("#example").toggleClass(function(index,className){
    //如果没有done类的时候
    if(className == 'add'){
        $(this).prev().css("color","yellow");
        return "done";
    //如果有done类的时候        
    }else{
        $(this).prev().css("color","white");
        return "done";
    }
});

栗子2

$("#example").toggleClass(function(index,className){
    //相当于addClass();
},true);

$("#example").toggleClass(function(index,className){
    //相当于removeClass();
},false);

判断样式

下面的方法1和方法2的效果相似，方法1中的is不仅仅可以判断样式，而方法2中的hasClass是专门判断样式的。

方法1

$div.is(".类名")
返回boolean值: true存在 / false不存在

栗子

$("#example").is(".add");  //记得前面要加.

3.jpg
5.jpg

方法2

$div.hasClass(类名)
返回boolean值: true存在 / false不存在
里面不加类名的时候默认为false:
$("#example").hasClass() --> false

栗子

$("#example").hasClass("done");
$("#example").hasClass("add"); 

1.jpg 10.jpg

基本上zepto和jquery在关于class样式操作方面，并没有什么区别。

---

@version1.0——2018-8-27——创建《jquery的class样式相关操作方法总结》
@version1.1——2018-8-29——修改名称《javascript、jquery的class样式相关操作方法总结》，并添加javascript的class样式方法总结部分

©burning_韵七七