jQuery 样式操作

设置样式的方式

javascript

$('div').css('属性', '值')

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

操作 css 方法

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

常用以下三种形式 :

javascript

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css('color', 'red');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({"color": "white", "font-size": "20px"});

案例

htmljavascript

html


<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<body>
<div></div>
</body>

javascript

// 操作样式之 css 方法
$(function () {
    console.log($('div').css('width'));
    // $("div").css("width", "300px");
    // $("div").css("width", 300);
    // $("div").css(height, "300px"); 属性名一定要加引号

    $('div').click(function () {
        $('div').css({
            width: 400,
            height: 400,
            backgroundColor: 'red',
            // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
        });
    });
});

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

设置类样式方法

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

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

javascript

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

注意：

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

案例

htmljavascript

html

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {width: 200px;height: 200px;}
        .one {background-color: pink;transition: all .3s;}
        .two {transform: rotate(45deg);}
        .current {background-color: red;}
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
<div></div>
</body>

javascript


// 1.添加类
$('div').addClass('current');
$('div').addClass('one');

// 2.删除类
$('div').removeClass('current');

// 3.切换类
$('div').toggleClass('current');

/*默认方式会直接覆盖之前的类名*/
var one = document.querySelector('.one');
one.className = 'two';
$('.one').addClass('two'); // 这个addClass相当于追加类名 不影响以前的类名
$('.one').removeClass('two');

案例：京东商品介绍案例

参考地址：https://www.jd.com/

思路分析:

核心原理：鼠标经过左侧盒子某个小 li，就让内容区盒子相对应图片显示，其余的图片隐藏。
需要得到当前小 li 的索引号，就可以显示对应索引号的图片
jQuery 得到当前元素索引号 $(this).index()
中间对应的图片，可以通过 eq(index) 方法去选择
显示元素 show() 隐藏元素 hide()

htmlcssjavascript

html


<div class="tab">
    <div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价（50000）</li>
            <li>手机社区</li>
        </ul>
    </div>
    <div class="tab_con">
        <div class="item" style="display: block;"> 商品介绍模块内容</div>
        <div class="item"> 规格与包装模块内容</div>
        <div class="item"> 售后保障模块内容</div>
        <div class="item"> 商品评价（50000）模块内容</div>
        <div class="item"> 手机社区模块内容</div>
    </div>
</div>

html


<style>
    * {margin: 0;padding: 0;}
    li {list-style-type: none;}
    .tab {width: 978px;margin: 100px auto;}
    .tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}
    .tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}
    .tab_list .current {background-color: #c81623;color: #fff;}
    .item_info {padding: 20px 0 0 20px;}
    .item {display: none;}
</style>

javascript


<script>
    $(function () {
    // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
    $(".tab_list li").click(function () {
        // 链式编程操作
        $(this).addClass("current").siblings().removeClass("current");
        // 2.点击的同时，得到当前li 的索引号
        var index = $(this).index();
        console.log(index);
        // 3.让下部里面相应索引号的item显示，其余的item隐藏
        $(".tab_con .item").eq(index).show().siblings().hide();
    });
})
</script>

jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

显示隐藏：show() / hide() / toggle() ;
划入滑出：slideDown() / slideUp() / slideToggle() ;
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

注意：

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

显示隐藏

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

显示：
显示语法规范
js
```
show([speed, [easing], [fn]])
```
1
显示参数
1. 参数都可以省略，无动画直接显示。
2. speed: 三种预定速度之一的字符串（'slow', 'normal', 'fast'）或表示动画市场的毫秒数值
3. easing: (Optional) 用来指定切换效果，默认是 'waing', 可选参数 'liner'。
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
影藏：
影藏语法规范
js
```
hide([speed, [easing], [fn]])
```
1
影藏参数
1. 参数都可以省略，无动画直接显示。
2. speed: 三种预定速度之一的字符串（'slow', 'normal', 'fast'）或表示动画市场的毫秒数值
3. easing: (Optional) 用来指定切换效果，默认是 'waing', 可选参数 'liner'。
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
切换：
切换语法规范
js
```
toggle([speed, [easing], [fn]])
```
1
切换参数
1. 参数都可以省略，无动画直接显示。
2. speed: 三种预定速度之一的字符串（'slow', 'normal', 'fast'）或表示动画市场的毫秒数值
3. easing: (Optional) 用来指定切换效果，默认是 'waing', 可选参数 'liner'。
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

建议：平时一般不带参数，直接显示影藏即可

代码演示

htmlcssjavascript

html


<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>

html

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: cyan;
    }
</style>

javascript

$(function () {
    $('button').eq(0).click(function () {
        $('div').show(1000, function () {
            console.log('显示动画演示完毕')
        })
    })
    $('button').eq(1).click(function () {
        $('div').hide(1000, function () {
            console.log('影藏动画演示完毕')
        })
    })
    $('button').eq(2).click(function () {
        $('div').toggle(1000)
        console.log('切换动画演示完毕')
    })
    // 一般情况下，我们都不加参数直接显示隐藏就可以了
})

滑入滑出

滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;

语法规范如下:

下滑效果
下滑效果语法规范
js
```
slideDown([speed, [easing] , [fn]])
```
1
下滑效果参数
1. 参数都可以省略。
2. speed: 三种预定速度之一的字符串( “slow”, "normal”, or“fast”)或表示动画时长的毫秒数值(如:1000),
3. easing: (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
下滑效果
上滑效果语法规范
js
```
slideUp([speed,[easing],[fn]])
```
1
上滑效果参数
1. 参数都可以省略。
2. speed: 三种预定速度之一的字符串(“slow”, "normal”,or“fast”)或表示动画时长的毫秒数值(如:1000)。
3. easing: (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
滑动语法
滑动切换效果语法规范
js
```
slideToggle([speed,[easing], [fn]])
```
1
滑动切换效果参数
1. 参数都可以省略。
2. speed: 三种预定速度之一的字符串(“slow”, "normal”,or“fast”)或表示动画时长的毫秒数值(如:1000).
3. easing: (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

代码演示

html


<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
    $(function () {
        $('button').eq(0).click(function () {
            // 下滑动 slideDown()
            $('div').slideDown()
        })
        $('button').eq(1).click(function () {
            // 上滑动 slideUp()
            $('div').slideUp(500)
        })
        $('button').eq(2).click(function () {
            // 滑动切换 slideToggle()
            $('div').slideToggle(500)
        })
    })
</script>
</body>

jQuery 样式操作 ​

操作 css 方法 ​

设置类样式方法 ​

案例：京东商品介绍案例 ​

jQuery 效果 ​

显示隐藏 ​

滑入滑出 ​

jQuery 样式操作

操作 css 方法

设置类样式方法

案例：京东商品介绍案例

jQuery 效果

显示隐藏

滑入滑出