JQuery的第二天

利用JQuery来操作样式

直接操作CSS样式
设置单个样式：
写法：$(元素).css(name, value);
//name：为需要设置的样式名称
//value：为对应的样式值

//使用案例（以下写法均能实现相同的效果）：修改id为one的盒子背景色
$("#one").css("background","gray");//将背景色修改为灰色
$("#one").css("background-color","gray");//将背景色修改为灰色
$("#one").css("backgroundColor","gray");//将背景色修改为灰色

设置多个样式：
写法：$(元素).css(obj);
//参数是一个对象，对象中包含了需要设置的样式名和样式值

//使用案例
$("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
});

获取样式:
写法：$(元素).css(name);
//name:需要获取的样式名称
注意：获取样式操作只会返回第一个元素对应的样式值。

//案例
$("div").css("background-color");
//注：若元素中有设置两个背景色，则只会返回设置的第一个背景色

隐式迭代：
1. 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

操作class类
添加样式类:
写法：$(元素).addClass(name);
//name：需要添加的样式类名，注意参数不要带点.

//例子,给所有的div添加one的样式。
$(“div”).addClass(“one”);

移除样式类：
写法：$(元素).removeClass(“name”);
//name：需要添加的样式类名，注意参数不要带点.

//例子，移除div中one的样式类名
$(“div”).removeClass(“one”);

切换样式类：
写法：$(元素).toggleClass(“name”);
//name:需要切换的样式类名，如果有，则移除该样式，如果没有，则添加该样式。

判断是否有某个样式类：
写法：$(元素).hasClass(“name”);
//name: 用于判断的样式类名，返回值为true 或 false

利用JQuery来操作属性

attr操作
设置（新增/修改）单个属性：
写法：attr（name, value）
//第一个参数：需要设置的属性名
//第二个参数：对应的属性值
//没有该属性，则新增，有，则修改属性值

设置多个属性：
写法：attr（obj）
//参数是一个对象，包含了需要设置的属性名和属性值

//用法举例
$("img").attr({
    title:"哎哟，不错哦",
    alt:"哎哟，不错哦",
    style:"opacity:.5"
});

获取属性：
写法：attr（name）
//传需要获取的属性名，返回对应的属性值

移除属性：
写法：removeAttr(name);
//参数：需要移除的属性名

prop操作
在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr()方法，只能用prop()方法。
attr()方法无法获取标签的状态值
prop(参数1) => 写一个参数： 获取属性
prop(参数1，参数2) => 写两个参数： 修改(新增)属性，参数1为属性名，参数2为属性值

//例子：
//设置属性
$(“input:checked”).prop(“checked”,true);  //复选框选中
//获取属性
$(“input:checked”).prop(“checked”);  //返回true或者false

JQuery动画

三组基本动画
显示(show)与隐藏(hide)是一组动画 => 本质：修改display：block / none
滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似 => 本质：修改高度height值
淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle) => 本质：修改透明度opacity

show(参数1，参数2，参数3)----基本动画的参数都一样
参数1（可选）：动画的执行时间，默认300毫秒
参数2（可选）：动画的运动曲线（效果），默认是swing（缓动，慢-快-慢），可以是linear 匀速
参数3（可选）：执行完动画后所要执行的回调函数

自定义动画animate
animate（{参数1}，参数2，参数3。参数4）: 自定义动画,支持用户自定义样式
参数1（必写）：是个对象，里面书写要执行动画的CSS属性，带数字
参数2（可选）：动画的执行时间，默认300毫秒
参数3（可选）：动画的运动曲线（效果），默认是swing（缓动），可以是linear 匀速
参数4（可选）：执行完动画后所要执行的回调函数
// 注意：animate自定义动画必须是数值动画，也就是CSS属性里所书写的必须是有数值的，没有数值（如背景色等）的样式是无法实现效果的

列子：
 $(‘#one’).animate({
                left: 1000,
                top: 500,
                width: 200,
                borderRadius: 50
                // backgroundColor: '#f99'    //无效果
            }, 4000, 'linear', function () {
                console.log('ok')
            })
        })

动画队列与停止动画stop
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。
要想停止动画队列，只需要在要执行的动画之前添加stop()方法即可
stop(参数1，参数2)方法：停止动画效果，停止动画队列中的一切动画
第一个参数（可选）：是否清除队列，默认为true
第二个参数（可选）：是否跳转到最终效果，默认为true

案例总结

案例1：tab栏切换

/* 
     要求：
           1、获取元素--导航栏、要显示的div
           2、为li绑定鼠标移入事件：mouseenter
           3、添加事件处理函数
             3.1、为当前li添加样式，同时去除其他兄弟li的样式
             3.2、获取当前li的索引，让对应的内容面板显示 
*/

js代码如下：

$(function () {
            /* 
                addClass('样式类名') : 添加样式类
                removeClass('样式类名') : 移除样式类
                hasClass('样式类名') ： 判断是否有某个样式类，返回值为true / false
                toggleClass('样式类名') : 切换样式类，如果有，则移除该样式；如果没有，则添加该样式
             */
            let $divs = $('.products .main');
            $('.tab li').mouseenter(function () {
                $(this).addClass('active');                 //为当前li添加样式
                $(this).siblings().removeClass('active');   //去除其他兄弟li的样式
                // 连写
                //  $(this).addClass('active').siblings().removeClass('active');

                // 获取当前li元素的索引
                let index = $(this).index();
                // show() : 显示
                // hide() : 隐藏
                $divs.eq(index).show();                     //根据索引显示对应的内容面板
                $divs.eq(index).siblings().hide();          //隐藏其他的内容面板
                // 连写
                // $divs.eq(index).show().siblings().hide();
            })
        })

案例2：大小图切换

/* 
      思路：
           1. 获取元素 ==> a、image、des
           2. 给元素绑定事件：a绑定点击click事件
           3. 阻止a的默认跳转（阻止冒泡）：e.preventDefault();
           4. 获取当前点击的 a 的 href属性值，赋值给 #image 的 src属性 
           5. 获取当前点击的a的title属性值，赋值给p标签
*/

js代码如下：

$(function () {
	    // 1. 获取元素 ==> a、image、des
	    let $samllImg = $('#imagegallery li a');
	    let $bigImg = $('#image');
	    let $des = $('#des');
	    // console.log($samllImg);
	
	    // 2. 给元素绑定事件：a绑定点击click事件
	    $samllImg.click(function (e) {
	        // 3、阻止默认事件
	        e.preventDefault();
	        // console.log('aa');
	        // 获取a标签里的href和title属性
	        let big = $(this).attr('href');
	        let title = $(this).attr('title');
	        // console.log(big, title);
	
	        // 4、将获取到的href属性值赋值给#image的src属性
	        $bigImg.attr('src', big);
	
	        // 5、获取当前点击的a的title属性值，赋值给p标签
	
	        // js原生方法 对应的 jq函数API
	        // innerText   >>    text()
	        // innerHtml   >>    html()
	        // text()和html()，没有参数就是取值，有参数就是赋值
	        $des.html(title)
	
	    })
	    // 注：attr()方法是无法获取标签的状态值的（如checked、disabled、selected）
});

案例3：全选与全不选

/* 
       要求：
                1、单击全选复选框，让内容列表中的复选框的选中状态和全选复选框一样
                1.1、获取全选复选框的状态：prop('checked')
                1.2、获取内容列表中的复选框，设置它们的状态，让它们的状态与全选按钮的状态保存一致：prop()

                2、单击内容列表中的复选框
                2.1、获取当前被选中的复选框数量（$('#j_tb input:checked').length），与原始的复选框的数量进行比较
                2.2、如果一致，则全选复选框选中，否则取消全选
*/

js代码如下：

$(function () {
	/* 
	      注：attr()方法是无法获取标签的状态值的（如checked、disabled、selected）
	      
	      所有要想获取标签的状态值，需要用prop()方法
	      prop()方法：  
	           prop(参数1) ==> 写一个参数： 获取属性
	           prop(参数1，参数2) ==> 写两个参数： 修改(新增)属性，参数1为属性名，参数2为属性值
	*/
	    let $j_cbAll = $('#j_cbAll');
            let $j_tbs = $('#j_tb input');
            // console.log($j_cbAll, $j_tbs);

            // 1、单击全选复选框，让内容列表中的复选框的选中状态和全选复选框一样
            $j_cbAll.click(function () {
                // 1.1、获取全选复选框的状态：prop()
                let static = $(this).prop('checked');
                // console.log(static);
                // 1.2、获取内容列表中的复选框，让它们的状态与全选按钮的状态保存一致：prop()
                $j_tbs.prop('checked', static);
            });

            // 2、单击内容列表中的复选框
            $j_tbs.click(function () {
                // 2.1、获取当前被选中的复选框数量,与原始的复选框的数量进行比较
                // 获取当前被选中的复选框数量
                // :checked  可以标记当前复选框被选中
                let checkNum = $('#j_tb input:checked').length;
                // console.log(checkNum);
                // 与原始的复选框的数量进行比较
                if (checkNum == $j_tbs.length) {
                    $j_cbAll.prop('checked', true);
                } else {
                    $j_cbAll.prop('checked', false);
                }
            })
});

案例4：手风琴

/* 
       要求：
                1、获取li元素，添加背景图片
                2、为li添加鼠标移入事件：鼠标移入，当前li的宽度变为800px，其它li的宽度变为100px
                2.1、遍历，给所有的li元素都添加上对应的图片
                3、鼠标移出事件：鼠标移出，所用li恢复回宽度为240px的状态
*/

js代码如下：

$(function () {
            // 1、获取li元素，添加背景图片
            let $lis = $('#box li');
            // 遍历，给所有的li元素都添加上对应的图片
            for (let i = 0; i < $lis.length; i++) {
                $lis.eq(i).css({
                    'background-image': `url(./images/${i + 1}.jpg)`,
                    'background-position': 'center',
                    'background-size': 'cover'
                })
            }
            // 2、为li添加鼠标移入事件：鼠标移入，当前li的宽度变为800px，其它li的宽度变为100px
            $lis.mouseenter(function () {
                /* 
                    动画对列：在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行
                            完成了才会去执行 。
                    所以要添加stop()方法，来停止动画队列中的一切动画
                */
                // stop() : 停止动画效果（停止动画队列中的一切动画）
                $(this).stop().animate({
                    'width': 800
                });
                $(this).siblings().stop().animate({
                    'width': 100
                });
            })

            // 3、鼠标移出事件：鼠标移出，所用li恢复回宽度为240px的状态
            $lis.mouseleave(function () {
                $lis.stop().animate({
                    'width': 240
                });
            })

        });
        

案例5：音乐导航

/* 
       要求：
                    1、获取元素
                    2、为li元素绑定事件
	                    2.1、鼠标移入：背景变黄（span标签上移到li标签上）
	                    2.2、鼠标移出：背景恢复（span标签移出li标签）
                    3、鼠标移到对应的li上，播放相应的音乐
	                    3.1 获取当前li元素的索引
	                    3.2 让对应索引位置的音乐播放
*/

js代码如下：

$(function () {
            // 1、获取元素
            let $lis = $('.nav li');
            let $span = $('.nav li span');
            let $audios = $('.mp3 audio');

            // 2、为li元素绑定事件
            // 2.1、鼠标移入：背景变黄（span标签上移到li标签上）
            $lis.mouseenter(function () {
                $(this).find('span').stop().animate({
                    'top': 0
                })

                // 3、鼠标移到对应的li上，播放相应的音乐
                // 3.1 获取当前li元素的索引
                let index = $(this).index();
                // 3.2 让对应索引位置的音乐播放
                // $audios.eq(index).play();    //报错： jq中没有封装play()这个函数

                // jq并没有封装原生的所的功能，例如多媒体，意味着音乐播放需要使用原生方式来调用
                // 播放音乐：play(),play只有本次播放结束之后，才会播放下一首
                // load():重新加载，会中止当前的播放
                $audios[index].load();
                $audios[index].play();
            })

            // 2.2、鼠标移出：背景恢复（span标签移出li标签）,即让对应的黄色区域隐藏，它是位移动画，所以使用animate
            $lis.mouseleave(function () {
                $(this).find('span').stop().animate({
                    'top': 60
                })
            })
        });
        

案例6：京东轮播图

/* 
       要求：
                1、获取元素，绑定事件
	                1.1、鼠标移入，显示箭头
	                1.2、鼠标移出，隐藏箭头
                2、为箭头按钮绑定事件，动画效果：fadeIn() 淡入、fadeOut() 淡出
	                2.1、点击左箭头，显示上一张图片
	                2.2、点击右箭头，显示下一张图片
*/

js代码如下：

$(function () {
            // 1、获取元素，绑定事件
            let $slider = $('.slider');
            let $arrow = $('.arrow');
            let $lis = $('li');
            let $arrow_left = $('.arrow-left');
            let $arrow_right = $('.arrow-right');

            // 1.1、鼠标移入，显示箭头
            $slider.mouseenter(function () {
                $arrow.show();
            });

            // 1.2、鼠标移出，隐藏箭头
            $slider.mouseleave(function () {
                $arrow.hide();
            })

            // 2、为箭头按钮绑定事件，动画效果：fadeIn()、fadeOut()
            let index = 0;    // 获取索引，默认为0

            // 2.2、点击右箭头，显示下一张图片
            $arrow_right.click(function () {
                index++;
                if (index > $lis.length - 1) {
                    index = 0;
                }
                $lis.eq(index).fadeIn().siblings().fadeOut();
            })

            // 2.1、点击左箭头，显示上一张图片
            $arrow_left.click(function () {
                index--;
                if (index < 0) {
                    index = $lis.length - 1;
                }
                $lis.eq(index).fadeIn().siblings().fadeOut();
            })
        })