(JavaScript学习记录)：jQuery 样式操作

• 写在前面：参考哔哩哔哩黑马程序员pink老师教程 
• 地址：https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4

目录

jQuery 样式操作

操作 css 方法

设置类样式方法

案例：tab 栏切换

类操作与className区别

jQuery 样式操作

操作 css 方法

• jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
• 参数只写属性名，则是返回属性值

$(this).css(''color'');

• 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(''color'', ''red'');

• 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号。

$(this).css({ "color":"white",
            "font-size":"20px"});

案例

设置类样式方法

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

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

• 移除类

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

• 切换类

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

案例

案例：tab 栏切换

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

    
    
    
    
    
    



    

        

            

                
商品介绍
                
规格与包装
                
售后保障
                
商品评价（50000）
                
手机社区
            
        
        

            

                商品介绍模块内容
            
            

                规格与包装模块内容
            
            

                售后保障模块内容
            
            

                商品评价（50000）模块内容
            
            

                手机社区模块内容
            

        
    
    

类操作与className区别

• 原生 JS 中 className 会覆盖元素原先里面的类名。
• jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。