专栏首页h5学习笔记jQuery 样式操作

jQuery 样式操作

jQuery中常用的样式操作有两种:css() 和 设置类样式方法

1. 方法1: 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。

常用以下三种形式 :

// 1.参数只写属性名,则是返回属性值
var strColor = $(this).css('color');
​
// 2.  参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css('color', red');
​
// 3.  参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
​

注意:css() 多用于样式少时操作,多了则不太方便。

<script>
    //操作样式之css方法
    $(function() {
        console .1og($("div").css("width"));
        // $("div").css("width", "300px");
        // $("div").css("width", 300); 值是数字则可以不用加引号
        // $("div").css(height, "300px"); 属性名一定要加引号
        $("div" ).css({
            width: 400 ,
            height: 400,
            backgroundColor: "red" 
            // 如果是复合属性则必须采取驼峰命名法, 如果值不是数字,则需要加引号
        })
    })
</script>

2. 方法2: 设置类样式方法

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

常用的三种设置类样式方法:

// 1.添加类
$("div").addClass("current");
​
// 2.删除类
$("div").removeClass("current");
​
// 3.切换类
$("div").toggleClass("current");
​

注意:

  1. 设置类样式方法比较适合样式多时操作,可以弥补css()的不足。
  2. 原生 JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。

3. 案例:tab 栏切换

思路分析: 1.点击上部的li,当前li 添加current类,其余兄弟移除类。 2.点击的同时,得到当前li 的索引号 3.让下部里面相应索引号的item显示,其余的item隐藏

<script>
        $(function () {
            $('.tab_list li').click(function () {
                // 1.点击上面小li,当前小li添加current类,其余的li移除
                $(this).addClass('current').siblings().removeClass();
                // 2.得到点击的小li的索引号
                var index = $(this).index();
                // console.log(index);
                // 3.让下面相应索引号的item显示,其余的item隐藏
                $('.item').eq(index).show().siblings().hide();
            });
        })
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery 效果

    显示隐藏动画,常见有三个方法:show() / hide() / toggle() ;

    星辰_大海
  • 筋头云案例

    星辰_大海
  • jQuery 事件注册与事件处理

    因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是:...

    星辰_大海
  • Qt开源作品25-电池电量控件

    现在这个时代,智能手机不要太流行,满大街都是,甚至连爷爷奶奶级别的人都会用智能手机,本次要写的控件就是智能手机中的电池电量表示控件,采用纯painter绘制,其...

    feiyangqingyun
  • 没有扩容机器,抗住了70多倍的流量增长

    登录服务器一看 log,访问量增长的有点厉害啊,疑似 CC 攻击,打开了各种防护,流量还是居高不下...

    黄希彤
  • 聊天机器人中的深度学习技术(引言)

    用户1737318
  • 【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)

    之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。那么有人就会问:为什么Ang...

    用户5640963
  • 【转载】【ionic+angularjs】angularjs ui-router路由简介

    之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。那么有人就会问:为什么Angular有了自...

    用户7605975
  • 内行才能看懂的 PowerBI DAX 引擎重大更新来了

    2019年3月1日,在SqlBits大会上,微软宣布DAX引入一项重大更新:Calculation Group(暂且不做翻译)。这项更新将对PowerBI及SS...

    BI佐罗
  • 详解Parcel:快速,零配置web应用打包工具。

    译者按: 新一代Web应用打包工具Parcel横空出世,快速、零配置的特点让人眼前一亮。

    Fundebug

扫码关注云+社区

领取腾讯云代金券