一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

jQuery简单操作②

链式编程风格

在上一篇的末尾介绍了一些筛选方法，而链式编程一般就是基于这些方法来操作的。
链式编程是什么呢？
其实就是把多行代码代表的多个操作，合并成一行代码代表多个操作的一个过程。
其目的是为了节约代码，并且代码看起来更高雅 ^_^

示例

    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    
    <script>
        $(function () {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function () {
                // 2. 让当前元素颜色变为红色
                // $(this).css("color", "red");
                
                // 3. 让其余的姐妹元素不变色 
                // $(this).siblings().css("color", "");

                // 把上面2和3的操作结合起来：我的颜色为红色, 我的兄弟的颜色为空：
                $(this).css("color", "red").siblings().css("color", "");

                // 我的兄弟变为红色,我本身不变颜色
                // $(this).siblings().css('color', 'red');
                
                // 给我的兄弟的爸爸 body 变化颜色
                // $(this).siblings().parent().css('color', 'blue');
                 
            });
        })
    </script>

jQuery样式操作

jQUery可以使用css方法来修改简单元素样式
例子
1.参数只写属性名，则返回属性值
语法格式： $(this).css("color");

            console.log($("div").css("width"));
            // 输出 200px  （结构代码就不放上来了，那样真的太水了^_^）

2.参数是属性名，属性值，逗号分隔，是设置一组样式
属性必须加引号，不加引号的属性会被认为是变量;
值如果是数字可以不用跟单位或者引号,跟了单位就需要加引号

            $(this).css('color','red');
            $("div").css("width", 300);
            // $("div").css("width", "300px"); 

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

            $(this).css({"color":"white","font-size":"20px"});
            $('div').css({
                width: 400,
                height: 400,
                backgroundColor: 'red' //css中的复合属性需要用驼峰法命名
              })

jQuery类操作

jQUery不仅可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式

1.添加类 addClass()

                $('div').click(function () {
                    $(this).addClass("类名");
                })

2.删除类 removeClass()

                $('div').click(function () {
                    $(this).removeClass("类名");
                }) 

3.切换类 toggleClass()

            $('div').click(function () {
                $(this).toggleClass("类名");
            })

一些注意点：
首先，jQuery的类操作不影响原先的类
原生js中className会覆盖元素原先里面的类名

    var one = document.querySelector(".one");
    one.className = "two";

上面的代码是原生JS的类操作，利用className操作为覆盖原先的类

而jQuery里面类操作只是对指定类进行操作，不影响原先类名

        $(".one").addClass("two");  

这个addClass相当于追加类名 不影响以前的类名

jQuery效果

1. 显示与隐藏

以下是公共结构代码

    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: blue;
        }
    </style>

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

1. 隐藏元素hide([speed],[easing],[fn])

        $("button").eq(1).click(function () {
                $("div").hide(1000, function () {
                    alert(1);
                });
           })

上面代码获取第二个按钮，绑定点击事件，点击后用1s过渡时间隐藏这个盒子，然后弹出窗口显示1

2. 显示元素show([speed],[easing],[fn])
speed : slow、normal、fast或者写动画时长毫秒(如:1000)。
easing 用来指定切换效果，默认是swing，可用参数linear。
fn ， 回调函数，在动画完成时执行的函数，每个元素执行一次

        $("button").eq(0).click(function () {
                $("div").show(1000, function () {
                    alert(1);
                });
           })

上面代码获取了第一个button按钮，绑定了点击事件，点击后显示盒子，并弹出窗口显示1


emmmmm，这个动态图我不知道怎么弄，所以这个过渡效果大家可以脑海里想象一下，哈哈哈

3.切换类toggle([speed],[easing],[fn])

        $("button").eq(2).click(function () {
                $("div").toggle(1000);
            })

但是一般情况下呢，我们不加参数，直接显示与隐藏就好了0 0

---

2. 滑动

语法：
下滑动：slideDown([speed],[easing],[fn])
上滑动：slideUp([speed],[easing],[fn])
滑动切换： slideToggle([speed],[easing],[fn])

案例：

    结构：
    <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>

3. 淡入淡出

以下是公共结构

    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>

1.淡入 fadeIn([speed],[easing],[fn])
参数也是speed、easing、fn

2.淡出 fadeOut([speed],[easing],[fn])
参数也是speed、easing、fn

3.fadeTo(speed,opacity,[easing],[fn])
渐进方式调整到指定的不透明度
参数除了speed、easing、fn，还多了一个opacity, 这个速度和透明度(0~1)要必须写