jQuery

jQuery简述

jQuery是一个的JavaScript库，即内部是用JS实现的，它的出现使得网页中的DOM、事件、动画、Ajax等操作变得更加简单，“写更少的代码做更多的事”是其开发理念。
库就是一组代码，这组代码中包含了一些已经定义好的对象和函数。只需要将库引入到页面中，即可直接使用这些对象和函数。库中的代码通常是为了解决一些我们开发中的一些不便。jQuery中的代码就是为了简化原生JS的操作，同样一个功能使用原生JS你也许要编写五行代码，使用jQuery一行就可以搞定，（只是自己写的代码少了，实际的代码量会比用原生JS写的代码量多）。同时jQuery还可以帮助我们处理掉浏览器的兼容问题。

特点

JQuery —— 一个过时的库
所有的库都是为了解决我们开发时的痛点而存在的。jQuery解决的问题主要有两个：简化DOM操作、解决浏览器兼容问题。然而随着前端的发展、DOM标准的更新、IE的消亡。DOM操作和浏览器兼容性早已不是什么大问题了，再加上React、Vue、Angular这些大型框架的出现，在实际项目中使用jQuery的机会可以说是少之又少。

jQuery引入方式

要在DOM元素加载完后才能加载script标签里的JS，所以script标签应该放到body里的最后

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

<body>
    <div></div>
	<script>
            $('div').hide();
    </script>
</body>

这样写script标签里的JS不生效

<script>
        $('div').hide();
</script>
<div></div>

若不想将script写在最后，有如下2种引入方式
等着页面DOM加载完毕再去执行js 代码
2.

<script>
        $(function(){
		$('div').hide();
		})
</script>
<div></div>

<script>
	$(document).ready(function(){
	$('div').hide();
	})
</script>
<div></div>

jQuery的顶级对象$

$是jQuery的别称，在代码中可以用jQuery代替$
$是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成Query对象，就可以调用jQuery的方法

$(function(){
JS代码
})

等效于

jQuery(function(){
JS代码
})

jQuery与DOM对象

用原生JS获取来的对象就是DOM对象
jQuery方法获取的元素就是jQuery对象
jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）,jQuery的数组元素为DOM对象

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

<body>
    <div></div>
    <span></span>
    <script>
        // 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
        // myDiv.hide();// 报错，myDiv是一个dom对象不能使用 jquery里面的hide方法
        // $('div').style.display = 'none'; //报错，这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
    </script>
</body>

jQuery与DOM对象相互转换
原生JS比jQuery更大，有一些原生的属性和方法jQuery没有封装。要想使用这些原生的属性或方法需要将jQuery对象转换为DOM对象。

DOM对象转换为jQuery对象：$(DOM对象)
jQuery对象转换为DOM对象：$(DOM对象)[0]或$(DOM对象).get(0)

比如jQuery没有封装原生JS中的play()方法，那我们可以将jQuery对象转换成DOM对象后再调用

<body>
    <!-- 谷歌浏览器默认不支持视频自动播放，要想自动播放需加muted属性 -->
    <video src="mov.mp4" muted></video>
    <script>
        var myvideo = document.querySelector('video');
        // myvideo.play(); //DOM对象可直接调用原生JS中的play()方法
        // $(myvideo).play(); // 报错 jquery里面没有play 这个方法
        //需将jQuery对象转换为DOM对象
        $('video')[0].play()
        $('video').get(0).play()
    </script>
</body>

jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
格式：$("选择器 | html代码") ,里面选择器直接写 CSS 选择器名称即可，但是要加引号（单引号、双引号都可以）

jQuery 设置样式：$('div').css('属性', '值')，这种方法相当于原生JS设置元素的内联样式

隐式迭代（重要）

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

<body>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1. 获取四个div元素 
        console.log($("div"));
        // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用原生JS DOM对象的style属性
        $("div").css("background", "pink");
        // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法，不用我们再去写循环
        $("ul li").css("color", "red");
    </script>
</body>

而原生JS中没有隐式迭代,JS代码这样写样式不生效

const divs =document.querySelectorAll("div")
divs.style.backgroundcolor="pink"

jQuery 筛选选择器

注意：与原生JS中的nth-child(下标)、nth-of-type不同,jQuery中的:odd, :even, :eq(n)下标是从0开始的
索引号从0开始

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $("ul li:first").css("color", "red");
        $("ul li:eq(2)").css("color", "blue");
        $("ol li:odd").css("color", "skyblue");
        $("ol li:even").css("color", "pink");
    </script>
</body>

jQuery 筛选方法（重点）

重点记住： parent() children() find() siblings() eq()

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>我是屁</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>
        // 注意都是方法 带括号
        // 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. 兄
    </script>
</body>

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>我是屁</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>
        // 获取第2个div元素，不管是祖先div还是后代div
        const div=$("div").eq(1)
        console.log(div)
        console.log(div.hasClass("father"))
        console.log(div.hasClass("nav"))

    </script>
</body>

练习
鼠标悬浮时列出下拉菜单，鼠标离开时隐藏

点击查看代码

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            /* 设置绝对定位的目的是不影响后面的元素的排列 */
            /* 是给ul设置绝对定位而不是给li设置，因为给li设置会导致多个li标签重叠到一起 */
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <!-- 记得引入jQuery -->
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <!-- 有li标签出现时一定要用ul或ol标签包裹着 -->
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素，show()相当于设置样式display:block; hide()相当于设置样式display:none;
                // 当前li的子元素ul显示出来，注意children()中要指定是ul
                $(this).children("ul").show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        })
    </script>
</body>

jQuery的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                // 2. 当前的元素变化背景颜色
                $(this).css("background", "pink");
                // 3. 其余的兄弟去掉背景颜色 隐式迭代。如果没有这一行，被点的元素就不会从粉色变回来
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>

练习
实现如下效果：鼠标悬浮到列表项上时显示相应的图片

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

点击查看代码

<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            color: #000;
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .wrapper{
            /* height: 270px; */
            width: 250px;
            margin: 200px auto;
            border: 1px solid orange;
            /* 清除浮动 */
            overflow: hidden;
        }
        
        ul{
            float: left;
            width: 50px;
            height: 270px;
        }
        #lf li{
            /* 防止设置边框时实际宽高大于设定的，导致元素被挤出来 */
            box-sizing: border-box;
            height: 30px;
            width: 50px;
            text-align: center;
            line-height: 30px;
            border-bottom: 1px solid orange;
        }
        #lf li:last-child{
            border: none;
        }
        #lf a{
            font-size: 14px;
        }
        .wrapper ul li:hover{
            color: #fff;
            background-color: red;

        }
        .content{
            /* 防止设置边框时实际宽高大于设定的，导致元素被挤出来 */
            box-sizing: border-box;
            position: relative;
            float: right;
            border-left: 1px solid orange;
            width: 200px;
            height: 270px;
        }
        .content>div{
            position: absolute;
            display: none;
            top: 0;
            left:0;
            height: 270px;
        }
        .content>div:first-child{
            display: block;
        }
        .content>div img{
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="lf">
            <ul>
                <li><a href="#">女靴</a></li>
                <li><a href="#">雪地靴</a></li>
                <li><a href="#">冬裙</a></li>
                <li><a href="#">呢大衣</a></li>
                <li><a href="#">毛衣</a></li>
                <li><a href="#">棉服</a></li>
                <li><a href="#">女裤</a></li>
                <li><a href="#">羽绒服</a></li>
                <li><a href="#">牛仔裤</a></li>
            </ul>
        </div>
        <div class="content">
            <div>
                <a href="#"><img src="12-精品展示案例/images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="12-精品展示案例/images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="12-精品展示案例/images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="12-精品展示案例/images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="12-精品展示案例/images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="12-精品展示案例/images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="12-精品展示案例/images/女裤.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="12-精品展示案例/images/羽绒服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="12-精品展示案例/images/牛仔裤.jpg" width="200" height="250" /></a>
            </div>
        </div>
    </div>
    <script>
        $("#lf li").mouseover(function(){
            let index=$(this).index()
            // 对应序号的图片显示
            $(".content div").eq(index).show()
            // 其他图片隐藏
            $(".content div").eq(index).siblings().hide()
        })
    </script>
</body>

链式编程

$(this).css("color", "red").siblings().css("color", "");将$(this).css("color", "red");和$(this).siblings().css("color", "");合起来写了，像这样的将多个语句合起来写就是链式编程
链式编程是为了节省代码量，看起来更优雅。

<body>
    <button>快速</button>
    <button>快速</button>
    <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", "");
                // 链式编程
                // 我的颜色为红色, 我的兄弟的颜色为空
                $(this).css("color", "red").siblings().css("color", "");
            });
        })
    </script>
</body>

样式操作

操作 css 方法

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

参数只写属性名，则是返回属性值
$(this).css("color");
参数是属性名，属性值，逗号分隔，是设置一个样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red");
参数可以是对象形式，方便设置多个样式。属性名和属性值用冒号隔开，属性和数字型属性值可以不用加引号，
$(this).css({ "color":"white","fontSize":"20px"}); $(this).css({ color:"white",fontSize:20});
注意：如果是复合属性则必须采取驼峰命名法, 如果值不是数字，则需要加引号

设置类样式方法

如果要操作的样式比较多，就可以将要操作的样式放到一个CSS类选择器中，通过添加移除类来操作多组样式，作用等同于原生JS中的classList，注意操作类里面的参数不要加点。

添加类
$("div").addClass("current");
移除类
$("div").removeClass("current");
切换类:有该类则移除，没有则添加
$("div").toggleClass("current");

练习
点击tab栏上的标签，显示相应的内容

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

点击查看代码

<head>
    <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>
    <script src="jquery.min.js"></script>
</head>

<body>
    <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>
    <script>
        $(".tab_list ul li").click(function(){
            $(".current").removeClass("current")
            $(this).addClass("current")
            let index=$(this).index()
            $(".tab_con div").eq(index).show().siblings().hide()
        })
    </script>
</body>

（动画）效果

显示隐藏效果

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: 回调函数，在动画完成时执行的函数，每个元素执行一次。
建议：平时一般不带参数，直接显示隐藏即可

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $("button").eq(1).click(function(){
            $("div").hide(1000)
        })
        $("button").eq(0).click(function(){
            $("div").show(1000)
        })
        $("button").eq(2).click(function(){
            $("div").toggle(1000)
        })
    </script>
</body>

滑动效果

slideDown([speed,[easing],[fn]]): 以下滑效果从display:none切换到display:block
slideUp([speed,[easing],[fn]]):以上滑效果从display:block切换到display:none
slideToggle([speed,[easing],[fn]])：以下滑效果从display:none切换到display:block，以上滑效果从display:block切换到display:none
（1）参数都可以省略，表示无动画直接显示。
（2）speed：动画的快慢，可以是表示速度的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：切换速度的变化规律，(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<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>

事件切换

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

$(".nav>li").mouseover(function() {
    $(this).children("ul").slideDown(200);
});
$(".nav>li").mouseout(function() {
    $(this).children("ul").slideUp(200);
});

简化后

$(".nav>li").hover(function() {
    $(this).children("ul").slideToggle();
});

动画队列及其停止排队方法

动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
$(this).children("ul").slideToggle(500)

解决办法：停止排队
stop()
(1）stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。
$(this).children("ul").stop().slideToggle(100)

淡入淡出效果

fadeIn([speed,[easing],[fn]]): 淡入，逐渐显现
fadeOut([speed,[easing],[fn]])：淡出，逐渐消失
fadeToggle([speed,[easing],[fn]])：淡入淡出切换
（1）参数都可以省略，表示无动画直接显示。
（2）speed：动画的快慢，可以是表示速度的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：切换速度的变化规律，(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
（5）原理：通过设置透明度opacity实现淡入淡出的效果fadeIn(), fadeOut()

fadeTo(speed,opacity,[easing,[fn]])：渐进方式调整到指定的不透明度
参数
（1）speed：动画的快慢，可以是表示速度的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
（2）opacity 透明度必须写，取值 0~1 之间。
（3）easing：切换速度的变化规律，(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

练习
实现如下的突出显示效果

点击查看代码

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        body {
            background: #000;
        }
        
        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }
        
        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }
        
        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            //鼠标进入的时候,其他的li标签透明度：0.5
            $(".wrap li").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                // 鼠标离开，其他li 透明度改为 1
                $(this).siblings().stop().fadeTo(400, 1);
            })

        });
    </script>
</head>

<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="images/01.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/02.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/03.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/04.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/05.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/06.jpg" alt="" /></a>
            </li>
        </ul>
    </div>
</body>

</html>

自定义动画 animate

语法
animate(params,[speed,[easing,[fn]])
参数
（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采
取驼峰命名法，如borderLeft。其余参数都可以省略。
（2）speed：动画的快慢，可以是表示速度的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：切换速度的变化规律，(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

练习
实现如下的王者荣耀手风琴效果，鼠标悬浮在人物的头像上时显示其相应的大图片
思路

鼠标经过某个小li 有两步操作：
- 当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入
- 其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

点击查看代码

<!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;
        }
        /* .current设置默认以大图样式显示的li */
        .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>

<body>
    <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>
    <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>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>
</body>

</html>

属性操作

设置或获取元素固有属性值 prop()
- 获取属性语法: prop(''属性'')
- 设置属性语法: prop(''属性'', ''属性值'')

<body>
	<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
	<input type="checkbox" name="" id="" checked>
	<div index="1" data-index="2">我是div</div>
	<script>
		//1. element.prop("属性名") 获取元素固有的属性值
		console.log($("a").prop("href"));
		$("a").prop("title", "我们都挺好");
		$("input").change(function() {
		    console.log($(this).prop("checked"));
		});
		// prop()无法读取到元素的自定义属性
		console.log($("div").prop("index"));
	</script>
</body>

设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。

获取属性语法: attr(''属性'') // 类似原生 getAttribute()
设置属性语法: attr(''属性'', ''属性值'') // 类似原生 setAttribute()
该方法也可以获取 H5 自定义属性

<body>
	<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
	<input type="checkbox" name="" id="" checked>
	<div index="1" data-index="2">我是div</div>
	<script>
		console.log($("div").attr("index"));
		$("div").attr("index", 4);
		console.log($("div").attr("data-index"));
	</script>
</body>

数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。可以理解为给该元素添加变量，但不会在DOM中显现出来

附加数据语法：data(''name'',''value'') // 向被选元素附加数据
获取数据语法：date(''name'') // 向被选元素获取数据
同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型，注参数中意不用写data-

<body>
	<div index="1" data-index="2">我是div</div>
	<span>123</span>
	<script>
		// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
		// 变量名是"uname", 变量值是"andy"
		$("span").data("uname", "andy");
		console.log($("span").data("uname"));
		// 这个方法获取data-index（h5自定义属性），注意不用写data-，而且返回的是数字型
		console.log($("div").data("index"));//2
	</script>
</body>

元素内容操作

主要针对元素的内容和表单的值操作。

普通元素内容（包含HTML代码，相当于原生innerHTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容

<body>
    <div>
        <span>我是内容</span>
    </div>
    <script>
        // 1. 获取设置元素内容 html()
        console.log($("div").html());
		// 直接写入HTML代码
        $("div").html("123");
    </script>
</body>

普通元素文本内容 text() (相当与原生 innerText)
text() // 获取元素的文本内容，不会读取出html标签
text(''文本内容'') // 设置元素的文本内容

<body>
    <div>
        <span>我是内容</span>
    </div>
    <script>
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text());
        $("div").text("123");
    </script>
</body>

表单的值 val()（相当于原生value)
val() // 获取表单的值
val(''内容'') // 设置表单的值

<body>
    <input type="text" value="请输入内容">
    <script>
        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>

元素操作

遍历元素

主要是遍历、创建、添加、删除元素操作
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
语法1：$("div").each(function (index, domEle) { xxx; }）

each() 方法遍历匹配的每一个标签元素。主要用DOM处理。 each 每一个
里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
所以要想使用jquery方法，需要将dom元素转换为jquery对象 $(domEle)

语法2：$.each(object，function (index, element) { xxx; }）

$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
里面的函数有2个参数： index是索引号/属性名; element是数组元素值/对象的属性值/标签元素

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 这样只能将匹配到的元素统一修改成红色
            // $("div").css("color", "red");
            // 如果针对于同一类元素做不同操作，则需要遍历元素（类似原生中的for，但是比for强大）
            var sum = 0;
            // 1. jQuery对象.each() 方法遍历元素 
            var arr = ["red", "green", "blue"];
            $("div").each(function(i, domEle) {
                // 参数名不固定
                // 回调函数第一个参数是索引号
                // console.log(i); //0 1 2
                // 回调函数第二个参数是dom元素对象
                // console.log(domEle);//打印出DOM标签元素
                // domEle.css("color"); //dom对象没有jQuery中的css方法
                // 需将DOM对象转换成jQuery对象才能使用jQuery的方法
                // 分别将div的内容颜色修改为"red", "green", "blue"
                $(domEle).css("color", arr[i]);
                // 计算div内数字的总和
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // 遍历jQuery对象
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);

            // });
            // 遍历数组对象
            $.each(arr, function(i, ele) {
                console.log(i);
                console.log(ele);
            })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
    </script>
</body>

创建元素

语法：$("html代码")

复制元素
jQuery对象.clone()
添加元素

内部添加
element.append(''内容'')
把内容放入匹配元素内部最后面，类似原生 appendChild。
element.prepend(''内容'')
把内容放入匹配元素内部最前面。
外部添加
element.after(''内容'') // 把内容放入目标元素后面
element.before(''内容'') // 把内容放入目标元素前面
① 内部添加元素，生成之后，它们是父子关系。
② 外部添加元素，生成之后，他们是兄弟关系

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
            // 2. 添加元素
            // (1) 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
            // (2) 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
        })
    </script>
</body>

删除元素

element.remove() // 删除匹配的元素（本身）
element.empty() // 清空匹配标签中的内容，相当于删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配的元素内容, 效果上等同于element.empty()
① remove 删除元素本身。
② empt() 和 html("") 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
        })
    </script>
</body>

阶段练习：购物车页面功能实现

页面HTML代码
JS代码

点击查看代码

$(function(){
    // 注意初始时也要调用getSum()计算总价
    getSum()
    // 点击全选按钮的操作
    $(".checkall").change(function(){
        // 全选功能实现
        let check=$(this).prop("checked")
        $(".j-checkbox,.checkall").prop("checked",check)
        
        // 判断是否添加选中时的背景色
        if($(".j-checkbox").prop("checked")){
            // 注意不要写成addClass(".check-cart-item")，因为addClass()等增减class的方法接收的参数就是类名，所以不需要加点
            $(".j-checkbox").parents(".cart-item").addClass("check-cart-item")
        }
        else{
            $(".j-checkbox").parents(".cart-item").removeClass("check-cart-item")
        }
    })
    
    // 注意用户自己点击商品行的复选框才算做$(".j-checkbox")的点击事件，而因为点击全选按钮而让商品行处于选中状态的不算是$(".j-checkbox")的点击事件，所以还要在点击全选时添加商品行背景色操作
    $(".j-checkbox").change(function(){
        // 根据商品是否都被选择来决定是否勾选全选框
        if($(".j-checkbox:checked").length===$(".j-checkbox").length){
            $(".checkall").prop("checked",true)
        }
        else{
            $(".checkall").prop("checked",false)
        }
        // 判断是否添加选中时的背景色
        if($(this).prop("checked")){
            // 注意不要写成addClass(".check-cart-item")，因为addClass()等增减class的方法接收的参数就是类名，所以不需要加点
            $(this).parents(".cart-item").addClass("check-cart-item")
        }
        else{
            $(this).parents(".cart-item").removeClass("check-cart-item")
        }
    })

    // 点击加或减按钮增加或减少商品数量
    // 加号功能实现
    $(".increment").click(function(){
        // 获取单种商品数量
        let n=$(this).siblings(".itxt").val()
        // 增加单种商品数量
        $(this).siblings(".itxt").val(++n)
        // 获取单价
        let p=$(this).parents(".p-num").siblings(".p-price").text().substr(1)
        // 计算一种商品的总价
        // 因为有乘号*，所以原本字符类型的p会转换成数字类型
        // toFixed(2) 可以让我们保留2位小数
        $(this).parents(".p-num").siblings(".p-sum").text("￥"+(p*n).toFixed(2))
        getSum()

    })
    // 减号功能实现
    $(".decrement").click(function(){
        let n=$(this).siblings(".itxt").val()
        if(n>1){
            $(this).siblings(".itxt").val(--n)
            // 获取单价
            let p=$(this).parents(".p-num").siblings(".p-price").text().substr(1)
            // 计算一种商品的总价
            $(this).parents(".p-num").siblings(".p-sum").text(`￥${(p*n).toFixed(2)}`)
        }
        getSum()

    })
    // 用户自己填写数量时自动计算单类商品总价
    // 用户自己主动改的才算change时间，程序自己更改$(".itxt")中的内容不算change事件
    $(".itxt").change(function(){
        let n= $(this).val()
        let p=$(this).parents(".p-num").siblings(".p-price").text().substr(1)
        // 计算一种商品的总价
        let price=(p*n).toFixed(2)
        $(this).parents(".p-num").siblings(".p-sum").text(`￥${price}`)
        getSum()
    })
    
    // 计算商品总数量及总价
    function getSum(){
        let sum=0, priceSum=0
        $(".itxt").each(function(i,ele){
            // 注意不可写成sum+=parseInt($(ele).text())，因为这样是获取input标签中的内容，input是单标签，标签间没有文本内容，所以不能用text()获取input的内容，而是用val()
            sum+=parseInt($(ele).val())
            priceSum+=parseFloat($(ele).parents(".p-num").siblings(".p-sum").text().substr(1))
        })
        $(".amount-sum em").text(sum)
        $(".price-sum em").text("￥"+priceSum.toFixed(2))
    }
    // 删除商品功能实现
    // 单项删除
    $(".p-action a").click(function(){
        $(this).parents(".cart-item").remove()
        getSum()
    })
    // 清除购物车
    $(".clear-all").click(function(){
        $(".cart-item-list").empty()
        getSum()
    })
    // 清除选中商品
    $(".remove-batch").click(function(){
        $(".j-checkbox:checked").parents(".cart-item").remove()
        getSum()
    })
})

尺寸、位置操作

尺寸

以上参数为空，则是获取相应值，返回的是数字型。
如果参数为数字，则是修改相应值。例如$("div").width("300px")或 $("div").width(300)
参数可以不必写单位，不写单位默认单位是px

位置
位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

offset() 设置或获取元素偏移
- offset() 方法设置或返回被选元素相对于document的偏移坐标，跟父级没有关系。
- 没有参数时表示读取该元素相对于document的left与top值，返回一个对象
- 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
- 可以设置元素的偏移：offset({ top: 10, left: 30 });
position() 获取元素偏移，该方法只能获取, 不能修改
- position() 方法用于返回被选元素相对于带有定位的祖先元素偏移坐标，如果父级都没有定位，则以document为准。
- 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function() {
            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset()); //返回对象{left:110, top: 110}
            console.log($(".son").offset().top);// 110
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
            // 2. 获取相对于带有定位祖先的位置（偏移），如果没有带有定位的父级，则以document为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
        })
    </script>
</body>

3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
- 没有参数是获取，参数为不带单位的数字则是设置被卷去的头部。

疑惑：为什么body, html都要写，而不能只写body?
练习1
实现滚动一定距离后出现返回顶部按钮，点击该按钮回到顶部

<head>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            $(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);//这种返回顶部的方法效果比较生硬
                // 疑惑：为什么body, html都要写，而不能只写body?
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 因为animate里的参数是针对元素而言的，document不是元素，没有css样式，所以这种写法不生效
            })
        })
    </script>
</body>

练习2
实现电梯导航效果：滚动到一定位置后自动出现侧边导航，滚回去的时候可以自动消失。点击导航内相应的li会滚动到相应的位置，同时被点击的li背景变红。用户主动滚动的时候，滚动到相应的位置相应的侧边li背景变红。

代码
页面HTML

点击查看代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            let offsetTop=$(".container").offset().top
            // 根据滚动距离决定是否显现返回顶部按钮
            $(document).scroll(function(){
                if($(document).scrollTop()>=offsetTop){
                    $(".back").fadeIn()
                }
                else{
                    $(".back").fadeOut()
                }
            })
            // 实现返回顶部功能
            $(".back").click(function(){
                $("body,html").stop().animate({scrollTop:0})
            })
        })
    </script>
</body>

</html>

jQuery 事件

单个事件注册

语法：element.事件(function(){})
例如：$(“div”).click(function(){ 事件处理程序 })
和原生基本一致，比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件的处理函数
语法：element.on(events,[selector],fn)

events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
selector: 绑定元素的子元素选择器，这样可实现子元素触发事件后执行相应程序。
fn:回调函数即绑定在元素身上的侦听函数。

用on()绑定事件的优势

可以绑定多个事件，多个事件处理程序。以对象形式写入

$(“div”).on({
mouseover: function(){}, 
mouseout: function(){},
click: function(){}
});

如果事件处理程序相同, 则事件间以空格隔开，写入第一个参数中，第二个参数写事件处理程序

$(“div”).on(“mouseover mouseout”, function() {
$(this).toggleClass(“current”);
});

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$('ul').on('click', 'li', function() {
alert('hello world!');
});

在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
3. 可以给动态生成的元素绑定事件, 而传统的只能单个绑定事件的方法不能，比如ele.click(function(){})不能给后来添加的元素绑定事件

$("div").on("click","p", function(){
alert("俺可以给动态生成的元素绑定事件")
});
$("div").append($("<p>我是动态创建的p</p>"));

可以动态绑定事件的前提是on()具有第2个参数selector，如果写成
$("div").on("click",function(){...})仍是不可以动态绑定事件

练习
实现如下发表评论的功能
① 点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。
② 点击删除按钮，可以删除当前的微博留言。

点击查看代码

<head lang="en">
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul {
            list-style: none
        }
        
        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }
        
        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }
        
        ul {
            width: 450px;
            padding-left: 80px;
        }
        
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }
        
        input {
            float: right;
        }
        
        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            $(".btn").click(function(){
                // 创建li
                let li=$("<li></li>")
                // 把内容写进li
                li.html($(".txt").val()+"<a href='javascript:;'>删除</a>")
                // 添加li
                $("ul").prepend(li)
                // 显现li
                li.slideDown()
                // 记得清空文本框的内容
                $(".txt").val("")
            })
            // 用on为<a>删除</a>添加事件处理程序，这样以后新创建的a也会被绑定事件处理程序
            $("ul").on("click","a",function(){
                // 打印的是<a>删除</a>，说明jQuery中on回调函数中的this指触发事件的DOM元素对象
                // console.log(this)
                // $(this).parent().slideUp().remove()是直接删除，没有动画效果，因为remove()不会等slideUp()动画执行完才执行，所以slideUp()还没执行完remove()就执行了，所以不会有动画效果
                $(this).parent().slideUp(function(){
                    // 打印的是<li style="display: none;">...</li>, 说明jQuery动画效果的回调函数中的this是动画执行的DOM对象
                    // console.log(this)
                    $(this).remove()
                })
            })
        })
    </script>
</head>

<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>

</html>

```

off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托
如果有的事件只想触发一次，可以使用 one() 来绑定事件。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // 1. 事件解绑 off 
            // $("div").off();  // 解除了div身上的所有事件
            $("div").off("click"); // 解除了div身上的点击事件
            $("ul").off("click", "li");// 解除委托/代理的事件
            // 2. one() 只能触发事件响应函数一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是屁</p>
</body>

自动触发事件

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click() // 第一种简写形式，没写参数就是触发该类型事件
element.trigger("事件类型") // 第二种自动触发模式
element.triggerHandler(type) // 第三种自动触发模式，不会触发元素的默认行为，这是和前面两种的区别。

$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $("div").on("click", function() {
                alert(11);
            });

            // 自动触发事件
            // 1. 元素.事件() 会触发元素的默认行为
            $("div").click();
            // 2. 元素.trigger("事件")
            // $("div").trigger("click");会触发元素的默认行为
            // $("input").trigger("focus");
            $("input").on("focus", function() {
                $(this).val("你好吗");
            });
            // 3. 元素.triggerHandler("事件") 不会触发元素的默认行为
            $("input").triggerHandler("focus");

        });
    </script>
</head>

<body>
    <div></div>
    <input type="text">
</body>

事件对象

jquery中,最终传入事件处理程序的 event 其实已经被 jQuery 做过标准化处理, 其原有的事件对象则被保存于 event 对象的 originalEvent 属性之中

事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event) {})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");

            })
            $("div").on("click", function(event) {
                console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</head>

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

jQuery 对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend() 方法语法： $.extend([false|true], target, object1, [objectN])

参数1：如果设为true为深拷贝，默认为false 浅拷贝，为默认值时该参数可以不写
target: 要拷贝到的对象，目标对象
object1:待拷贝的对象，源对象。
objectN:待拷贝到第N个对象的对象，源对象。
浅拷贝
- 源对象的复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
- 源对象中的数据会完全覆盖目标对象
深拷贝
- 完全克隆对象，修改目标对象不会影响被拷贝对象。
- 把源对象的数据完全复制一份给目标对象冲突的属性被覆盖，不冲突的属性会合并到一起

$(function() {
            var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
            
            // 浅拷贝，会覆盖目标对象原来的数据
            // $.extend(targetObj, obj);
            // console.log(targetObj);
            // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象，所以更改目标对象的复杂数据类型会影响源对象的复杂数据类型
            // targetObj.msg.age = 20;
            // console.log(targetObj);
            // console.log(obj);
            // 2. 深拷贝把源对象的数据完全复制一份给目标对象 冲突的属性被覆盖，不冲突的属性会合并到一起 
            $.extend(true, targetObj, obj);
            console.log(targetObj); 
            // 深拷贝不会影响源对象的数据
            targetObj.msg.age = 20;
            console.log(targetObj); // msg :{sex: "男", age: 20}
            console.log(obj);
        })

jQuery 多库共存

问题概述：
jQuery使用$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符，这样一起使用会引起冲突。
客观需求：需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
解决方案：

把里面的 $ 符号统一改为 jQuery。比如 jQuery(''div'')
jQuery 变量规定新的名称：$/jQuery.noConflict() var 新名 = $.noConflict();

$(function() {
            // 自定义了一个名为"$"的函数
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));
            // 自定义的函数名"$"与jQuery库名冲突
            // $("div").each() //报错，因为自定义的$函数没有each()方法
            // 1. 如果$ 符号冲突 我们就使用 jQuery
            jQuery.each();
            // 2. 使用noConflict()方法，让用户自己重命名$/jQuery库名
            // 重命名jQuery库名后就可以用新的库名调用jQuery方法和属性
            var suibian = jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each();
        })

jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：

jQuery 之家 http://www.htmleaf.com/(更推荐，免费，开源，直接下载)
jQuery 插件库 http://www.jq22.com/
jQuery 插件使用步骤：
详见：https://www.bilibili.com/video/BV1Sy4y1C7ha?p=420&spm_id_from=pageDriver&vd_source=efd4241fdf9061e2f928f58914d04b92
引入相关文件。（jQuery 文件和插件文件）
复制相关html、css、js (调用插件)。

jQuery 插件演示

瀑布流
详见https://www.bilibili.com/video/BV1Sy4y1C7ha?p=419&vd_source=efd4241fdf9061e2f928f58914d04b92
图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
详见https://www.bilibili.com/video/BV1Sy4y1C7ha?p=420&vd_source=efd4241fdf9061e2f928f58914d04b92
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
全屏滚动（fullpage.js）
详见https://www.bilibili.com/video/BV1Sy4y1C7ha?p=421&vd_source=efd4241fdf9061e2f928f58914d04b92
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/

-------·

posted @ 2023-02-22 19:49 Code6E 阅读(60) 评论(0) 收藏举报

刷新页面返回顶部

Road to Code

jQuery

jQuery简述

jQuery引入方式

jQuery的顶级对象$

jQuery与DOM对象

jQuery 选择器

隐式迭代（重要）

jQuery 筛选选择器

jQuery的排他思想

链式编程

样式操作

操作 css 方法

设置类样式方法

（动画）效果

显示隐藏效果

滑动效果

事件切换

动画队列及其停止排队方法

淡入淡出效果

自定义动画 animate

属性操作

元素内容操作

元素操作

遍历元素

创建元素

删除元素

阶段练习：购物车页面功能实现

尺寸、位置操作

jQuery 事件

单个事件注册

on() 绑定事件

off() 解绑事件

自动触发事件

事件对象

jQuery 对象拷贝

jQuery 多库共存

jQuery 插件

jQuery 插件演示

公告