jQuery第2天知识点：jQuery 样式操作、jQuery 属性操作

最新推荐文章于 2024-04-02 19:19:38 发布

库库好困

最新推荐文章于 2024-04-02 19:19:38 发布

阅读量209

点赞数

分类专栏：四：jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/m0_46597922/article/details/106601767

版权

本文深入探讨jQuery的样式操作，包括添加、移除和切换类，并通过tab栏切换案例进行实战演示。同时，详细讲解jQuery如何设置和获取元素自定义属性值，以美女相册案例展示attr()方法的应用。

摘要由CSDN通过智能技术生成

今天知识点不多，一直在讲第一天的案例，加深印象

一、jQuery 样式操作

设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。

1. 添加类

$(“div”).addClass(''current'');

2.移除类

$(“div”).removeClass(''current'');

3.切换类

$(“div”).toggleClass(''current'');

代码演示

<body>
    <div id="box" class="aa bb ee">hhh 大飞哥</div>
    <div id="box" class="aa bb">hhh 大飞哥</div>
    <div id="box" class="aa bb">hhh 大飞哥</div>
    <div id="box" class="aa bb">hhh 大飞哥</div>

    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function() {
    
            // 添加类名：addClass(类名)  可以以空格隔开添加多个类名
            // $('div').addClass('cc ff hh');

            // // 移除类名：removeClass(类名) 可以以空格隔开删除多个类名
            // $('div').removeClass('hh');

            // // 判断是否有指定的类名：hacClass()
            //     // 如果有就返回true 没有就返回 false
            // console.log( $('div').hasClass('ee') );
            
            // // 切换类名 toggleClass()
            //     // 如果有就移除，没有就添加
            // $('div').toggleClass('aa');

            // 判断标准：
            // 只要有一个元素有指定的类名，就返回 true
            // 所有的元素都没有指定的类名，就返回false
            console.log( $('div').hasClass('ee') );
        })
    </script>
</body>

案例：tab 栏切换

分析：
① 点击上部的li，当前li 添加current类，其余兄弟移除类。
② 点击的同时，得到当前li 的索引号
③ 让下部里面相应索引号的item显示，其余的item隐藏

  <style type="text/css">
    * {
    
      margin: 0;
      padding: 0;
    }
    
    ul {
    
      list-style: none;
    }
    
    .wrapper {
    
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }
    
    .tab {
    
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }
    
    .tab li {
    
      position: relative;
      float: left;
      width: 80px;
      height<

最低0.47元/天解锁文章

库库好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery第2天知识点：jQuery 样式操作、jQuery 属性操作

今天知识点不多，一直在讲第一天的案例，加深印象一、jQuery 样式操作设置类样式方法作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。1. 添加类$(“div”).addClass(''current'');2.移除类$(“div”).removeClass(''current'');3.切换类$(“div”).toggleClass(''current'');代码演示<body> <div id="box" cla
复制链接

扫一扫

专栏目录