01 jQuery是javascript实现的一个库+jQuery 常用API

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质： 就是学习调用这些函数（方法）。
jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。



优点
 轻量级。核心文件才几十kb，不会影响页面加载速度
 跨浏览器兼容。基本兼容了现在主流的浏览器
 链式编程、隐式迭代
 对事件、样式、动画支持，大大简化了DOM操作
 支持插件扩展开发。有着丰富的第三方的插件，例如：
树形菜单、日期控件、轮播图等  免费、开源

2.jQuery 的下载 https://jquery.com/

3.jQuery 的使用

等着页面DOM加载完毕再去执行js 代码，相当于原生 js 中的 DOMContentLoaded，不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码

jQ的入口函数， 
jQuery 的顶级对象 $
.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用
jQuery 的方法。

        $(function() {
            $('div').hide();

        })

4.jQuery对象和DOM对象区别与转换

1. DOM 对象：  用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
        var mySpan = document.querySelector('span'); // mySpan 是DOM对象
        console.dir(myDiv);
2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
        $('div'); // $('div')是一个jQuery 对象
        $('span'); // $('span')是一个jQuery 对象
        console.dir($('div'));
3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
        myDiv.style.display = 'none';
        $('div').hide();



// 谷歌浏览器不能自动播放，静音以后可以muted，jQ没有play播放这个功能，所以需要转换成原生js
<video src="mov.mp4" muted></video>
1. DOM对象转换为 jQuery对象 $(myvideo)
       var myvideo = document.querySelector('video');
       myvideo.play()

2. jQuery对象 转换为DOM对象 $('video')[0].play()

5.jQuery 常用API jQuery 基础选择器

 $(function() {
            console.log($(".class"));       // class类选择器
            console.log($("#id"));          // id选择器
            console.log($(".class"));       // class类选择器
            console.log($("div"));          // 标签选择器
            console.log($("div,p,li"));     // 并集选择器，逗号分割，选取多个元素
            console.log($("li.current"));   // 交集元素
            console.log($("ul li"));        // 后代选择器，空格分割，获取所有的后代，包括孙子
            console.log($("ul>li"));        // 后代选择器, >分割，获取亲儿子，不会获取孙子

  
        })
注意：单引号和双引号包裹都可以

5.1隐式迭代（重要）

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
隐式迭代（重要）
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，
方便我们调用。

获取四个div元素 
        console.log($("div"));

        // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
        $("div").css("background", "pink");
        // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        $("ul li").css("color", "red");

5.2 jQuery 筛选选择器

$(function() {
            $("ul li:first").css("color", "red");   // 获取第一个li元素 ，
            $("ul li:last").css("color", "red");    // 获取最后一个li元素 ，
            $("ul li:eq(2)").css("color", "blue");  // 获取索引号为2的元素 索引号index 从0开始
            $("ol li:odd").css("color", "skyblue"); // 基数
            $("ol li:even").css("color", "pink");   // 偶数
        })

5.3  jQuery 筛选方法

 parent() children() find() siblings() eq()

注意一下都是方法 带括号
        $(function() {
            // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
            console.log($(".son").parent());
            // 2. 子
            // (1) 亲儿子 children()  类似子代选择器  ul>li
            // $(".nav").children("p").css("color", "red");
            // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
            $(".nav").find("p").css("color", "red");
            // 3. 兄
        });


案例：新浪下拉菜单

<ul class="nav">
        <li>
            <a href="#">微博</a>  // 导航菜单
            <ul>  // 下拉菜单
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        ....................
        </ul>

$(function() {
            // 鼠标经过
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        })

5.4兄弟元素siblings 除了自身元素之外的所有亲兄弟

        // 注意一下都是方法 带括号
        $(function() {
            // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            // 2. 第n个元素
            var index = 2;
            // (1) 我们可以利用选择器的方式选择
            // $("ul li:eq(2)").css("color", "blue");
            // $("ul li:eq("+index+")").css("color", "blue"); **********************
            // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
            // $("ul li").eq(2).css("color", "blue");
            // $("ul li").eq(index).css("color", "blue");
            // 3. 判断是否有某个类名------------------------
            console.log($("div:first").hasClass("current")); // true 有
            console.log($("div:last").hasClass("current"));


        });

5.5 jQuery排他思想

 $(function() {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                // 2. 当前的元素变化背景颜色
                $(this).css("background", "pink");
                // 3. 其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
                // 链式编程
                $(this).css("color", "red").siblings().css("color", "");
            });
        })


案例：点击不同的标签，出现不同的图片

 $(function() {
            // 1. 鼠标经过左侧的小li 
            $("#left li").mouseover(function() {
                // 2. 得到当前小li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                // $("#content div").eq(index).show();
                // 4. 让其余的图片（就是其他的兄弟）隐藏起来
                // $("#content div").eq(index).siblings().hide();
                // 链式编程
                $("#content div").eq(index).show().siblings().hide();

            })
        })

5.6 jQuery操作样式之css方法

$(function() {
            console.log($("div").css("width"));
            // $("div").css("width", 300);  数字可以省略单位
            // $("div").css(height, "300px"); 属性名一定要加引号
            $("div").css({
                width: 400,
                height: 400,
                backgroundColor: "red"
                // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
            })
        })

5.7 jQuery操作样式之类方法

$(function() {
            // 1. 添加类 addClass()
            // $("div").click(function() {
            //     // $(this).addClass("current");
            // });
            // 2. 删除类 removeClass()
            // $("div").click(function() {
            //     $(this).removeClass("current");
            // });
            // 3. 切换类 toggleClass()
            $("div").click(function() {
                $(this).toggleClass("current");
            });
        })



案例：tab栏切换显示不同的内容
 $(function() {
    // 1. 点击上面的小li 当前的li添加current类 其余兄弟移除类
    $(".tab_list li").click(function() {
       // 链式编程操作
       $(this).addClass("current").siblings().removeClass("current");
       // 2. 点击的同事，得到当前小 li 的索引号
       var index = $(this).index();
       // 3. 让下面相应索引号的item 显示，其余的item隐藏
       $(".tab_con .item").eq(index).show().siblings().hide();
    })
})

// var one = document.querySelector(".one");
        // one.className = "two";      className直接更改类名
        // $(".one").addClass("two");  这个addClass相当于追加类名 不影响以前的类名
        $(".one").removeClass("two");

5.7 jQuery 效果

1. 显示隐藏效果 -----------------------------------------------------------
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]]) 切换显示隐藏效果

（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。



2. 滑动效果slide -----------------------------------------------------------
slideDown([speed,[easing],[fn]])  下滑
slideUp([speed,[easing],[fn]])    上滑
slideToggle([speed,[easing],[fn]]) 滑动切换
$(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);

            });

        });



3. 事件切换hover -----------------------------------------------------------
（1）over:鼠标移到元素上要触发的函数（相当于mouseenter） 
（2）out:鼠标移出元素要触发的函数（相当于mouseleave） 
（3）如果只写一个函数，则鼠标经过和离开都会触发它


案例：简洁版滑动下拉菜单
$(function() {
            // 鼠标经过
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                 // stop 方法必须写到动画的前面 ,停止排队
                $(this).children("ul").stop().slideToggle();
            });
        })


4. 淡入淡出效果 fade -----------------------------------------------------------
  $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);

            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);

            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);

            });


        });


案例：鼠标点击实现高亮效果
$(function() {
            //鼠标进入的时候,其他的li标签透明度：0.5 opacity
            $(".wrap li").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                // 鼠标离开，其他li 透明度改为 1
                $(this).siblings().stop().fadeTo(400, 1);
            })

        });



5. 动画效果 animate -----------------------------------------------------------
$(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })


案例：手风琴案例

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
        }
        
        ul {
            list-style: none;
        }
        
        .king {
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        
        .king ul {
            overflow: hidden;
        }
        
        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
            width: 224px;
        }
        
        .king li.current .big {
            display: block;
        }
        
        .king li.current .small {
            display: none;
        }
        
        .big {
            width: 224px;
            display: none;
        }
        
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>

</head>

js --------------------------------------------------------------------
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function() {
                // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })



        });
    </script>


html --------------------------------------------------------------------
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
           
        </ul>

    </div>




</body>

</html>