jquery操作元素的类名

要努力奋斗鸭

已于 2023-07-08 19:05:12 修改

阅读量802

点赞数 1

文章标签： jquery 前端 javascript

于 2023-06-29 20:28:49 首次发布

本文链接：https://blog.csdn.net/weixin_52512511/article/details/131463290

版权

1.addClass()添加类名

语法：元素集合.addClass(需要添加的类名)

执行这个方法会给元素集合里的所有元素添加指定的类名

如果元素已经有相同的类名就不再添加没有才会加

html:

<button class="add">添加类名</button>
<div class="box"></div>
<div></div>
<div></div>
<div></div>
<div></div>

css:

 div{
        width: 100px;
        height: 100px;
        background-color: #0a3aab;
        margin: 10px;
      }
 .box{
        border: 1px solid red;
   }

js:
  
 console.log($('.add'))  //打印出来的是jquery元素 类数组
 console.log($('.add')[0])  //拿到的是dom元素

 $('.add')[0].onclick = function(){
      $('div').addClass('box')
}

等同于
//$('.add').click(function(){
      $('div').addClass('box')
})

2.removeClass()移除类名

语法：元素集合.removeClass(你要删除的类名)

执行这个方法会给元素集合里的所有元素移除指定的类名

html: 

 <button class="del">移除类名</button>
 <div class="box"></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>

css:

 div{
        width: 100px;
        height: 100px;
        background-color: #0a3aab;
        margin: 10px;
      }
.box{
        border: 1px solid red;
      }

js:

 $('.del')[0].onclick=function(){
         $('div').removeClass('box')
   }

3.toggle()切换类名

语法：元素集合.toggleClass(你要切换的类名)

html:

 <button class="toggle">切换类名</button>
 <div class="box"></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>

css:

  div{
        width: 100px;
        height: 100px;
        background-color: #0a3aab;
        margin: 10px;
      }
  .box{
        border: 1px solid red;
      }

js:

 $('.toggle')[0].onclick=function(){   //一般做日间夜间模式
            $('div').toggleClass('box')
        }

4.hasClass() 判断是否有类名

执行这个方法会返回一个布尔类型

如果元素几个里面有一个元素有这个类名就返回return 都没有就返回false

html:

<button class="has">判断有没有类名</button>
<div class="box"></div>
<div></div>
<div></div>
<div></div>
<div></div>

div{
        width: 100px;
        height: 100px;
        background-color: #0a3aab;
        margin: 10px;
      }
.box{
        border: 1px solid red;
      }

js:  

$('.has').click(function(){
          alert( $('div').hasClass('box'))
   })

综合代码：

<!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>Document</title>
    <script src="jquery.min.js"></script>
    <style>
      div{
        width: 100px;
        height: 100px;
        background-color: #0a3aab;
        margin: 10px;
      }
      .box{
        border: 1px solid red;
      }
    </style>
</head>
<body>
    <button class="add">添加类名</button>
    <button class="del">移除类名</button>
    <button class="toggle">切换类名</button>
    <button class="has">判断有没有类名</button>

    <div class="box"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        // console.log($('add')[0])
        //jquery操作元素的类名
        //1 addClass() 添加类名
        //执行这个方法会給元素集合里的所有元素添加指定的类名
        //如果元素已经有相同的类名 就不再添加 没有才会加
        $('.add')[0].onclick = function(){
             $('div').addClass('box')
        }
        console.log($('.add'))  //打印出来的是jquery元素 类数组
        console.log($('.add')[0])  //拿到的是dom元素
        // $('.add').click(function(){
        //    $('div').addClass('box')
        // })


        //2 removeClass()移除类名
        //执行这个方法会给元素集合里的所有元素移除指定的类名
        $('.del')[0].onclick=function(){
            $('div').removeClass('box')
        }

        //3 toggle()切换类名
        $('.toggle')[0].onclick=function(){   //一般做日间夜间模式
            $('div').toggleClass('box')
        }

        //4 hasClass() 判断是否有类名
        //执行这个方法会返回一个布尔类型
        //如果元素几个里面有一个元素有这个类名就返回return 都没有就返回false
        //  $('.has')[0].onclick=function(){  
        //    alert( $('div').hasClass('box'))
        // }

        $('.has').click(function(){
          alert( $('div').hasClass('box'))
        })

    </script>
</body>
</html>

jquery操作元素的类名

要努力奋斗鸭

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery操作元素的类名

如果元素几个里面有一个元素有这个类名就返回return 都没有就返回false。语法：元素集合.removeClass(你要删除的类名)语法：元素集合.toggleClass(你要切换的类名)语法：元素集合.addClass(需要添加的类名)执行这个方法会给元素集合里的所有元素添加指定的类名。执行这个方法会给元素集合里的所有元素移除指定的类名。如果元素已经有相同的类名就不再添加没有才会加。2.removeClass()移除类名。1.addClass()添加类名。jquery操作元素的类名。
复制链接

扫一扫