jQuery学习笔记

最新推荐文章于 2024-07-06 22:48:04 发布

c1400612901

最新推荐文章于 2024-07-06 22:48:04 发布

阅读量407

点赞数

文章标签： jquery javascript 学习

本文链接：https://blog.csdn.net/c1400612901/article/details/129190794

版权

1.JQuery概述

1.1 JavaScript库

仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找就可以了。

JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能了。

比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)

常见的JavaScript库

jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto

这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的，我们主要学习的是jQuery

1.2 jQuery的概念

jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less，Do More，即提倡写更少的代码，做更多的事情。

j就是JavaScript；query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互

学习jQuery本质：就是学习调用这些函数(方法)

jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率

1.2 jQuery的优点

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的基本使用</title>
    <script src="../jQuery_min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <script>
        // $('div').hide();
        // 1. 等着页面DOM加载完毕之后再去执行js代码
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        // 2. 等着页面DOM加载完毕之后再去执行js代码
        $(function() {
            $('div').hide();
        })
    </script>
    <div></div>
    
</body>
</html>

2.jQuery的基本使用

2.1 jQuery的下装

官方网址：https://jquery.com/

1x：兼容IE 678等低版本浏览器，官网不再更新
2x：不兼容IE 678等低版本刘篮球，官网不再更新
3x：不兼容IE 678等低版本浏览器就，是官方主要更新维护的版本

各个版本的下载：https://code.jquery.com/

2.2 jQuery的使用步骤

引入jQuery文件
使用即可

2.3 jQuery的入口函数

	$(function) () {
		...  // 此处是页面DOM加载完成的入口
	};

	$(document).ready(function () {
		... // 此处是页面DOM加载完成的入口
    })

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
相当于原生js中的DOMContentLoaded。
不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。

2.4 jQuery的顶级对象$

$是 j Q u ery 的别称，在代码中可以使用 j Q u ery 代替$ ，但一般为了方便，通常都是直接使用$。
$是 j Q u ery 的顶级对象，相当于原生 J a v a S cr i pt 中的 w in d o w 。把元素利用$ 包装成jQuery对象，就可以调用jQuery的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery顶级对象</title>
    <script src="../jQuery_min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 1. $ 是jQuery的别称 (另外的名字)
        // $(function() {
        //     alert(11)
        // })
        jQuery(function() {
            // alert(11)
            // $('div').hide();
            jQuery('div').hide();
        })
        // 2. $同时也是jQuery的顶级对象
    </script>
</body>
</html>

2.5 jQuery对象和DOM对象

用原生js获取来的对象就是DOM对象
jQuery方法获取的元素就是jQuery对象
jQuery对象本质是：利用$对ODOM对象包装后产生的对象(伪数组形式存储)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery对象和DOM对象</title>
    <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 对象则使用原生的JavaScript属性和方法
        // myDiv.style.display = 'none';
        // myDiv.hide(); // myDiv是一个DOM对象不能使用 jQuery里面的hide方法
        // $('div').style.display = 'none';  // 这个$('div')是一个jQuery对象不能使用原生js的属性和方法
    </script>
</body>
</html>

DOM对象和jQuery对象之间是可以相互转换的。

因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用

1.DOM对象转换为jQuery对象：$(DOM对象)

	$(div)

2.jquery对象转换为DOM对象(两种方式)

	$('div')[index]	index是索引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象和jQuery对象相互转换</title>
</head>
<body>
    <video src="mov.mp4"></video>
    <script>
        // 1. DOM对象转换为 jQuery对象
        // (1) 我们直接获取视频得到的就是 jQuery对象
        // $('video');
        // (2) 我们已经使用原生js获取过来 DOM对象
        var video = document.querySelector('video');
        // $(video).play();  // jQuery里面没有play这个方法
        // 2. jquery对象转换为DOM对象
        // video.play();
        $('video')[0].play();
        $('video').get(0).play();
    </script>
</body>
</html>

3.jQuery选择器

3.1 jQuery基础选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

	$("选择器")  // 里面选择器可以直接写css选择器即可，但是要加引号

名称	用法	描述
ID选择器	$(‘#id’)	获取指定ID的元素
全选选择器	$(‘*’)	匹配所有元素
类选择器	$(‘.class’)	获取同一类class的元素
标签选择器	$(‘div’)	获取同一类标签的所有元素
并集选择器	$(‘div, p, li’)	选取多个元素
交集选择器	$(‘li.current’)	交集元素

3.2 jQuery层级选择器

名称	用法	描述
子代选择器	$(‘ul>li’);	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$(‘ul li’);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery基本和层级选择器</title>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol的li</li>
        <li>我是ol的li</li>
        <li>我是ol的li</li>
        <li>我是ol的li</li>
    </ol>
    <ul>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
    </ul>

    <script>
        $(function() {
           console.log( $('.nav'));;
           console.log($('ul li'));
        })
    </script>
</body>
</html>

知识铺垫

jQuery设置样式

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

3.3 隐式迭代(重要)

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery隐式迭代</title>
    <script src="../jQuery_min.js"></script>
</head>
<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对象不能使用style
        $('div').css('background', 'pink')
        // 3. 隐式迭代就是把匹配到的所有元素内部进行遍历循环, 给每一个元素添加css这个方法
        $('ul li').css('color', 'red')
    </script>
</body>
</html>

3.4 jQuery筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个li元素
:eq(index)	$(‘li:eq(2)’)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(‘li:odd’)	获取到的li元素中，选择索引号为奇数的元素
:even	$(‘li:even’)	获取到的li元素中，选择索引号为偶数的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery筛选选择器</title>
    <script src="../jQuery_min.js"></script>
</head>
<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>
        $(function() {
            $('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>
</html>

3.5 jQuery筛选方法(重点)

语法	用法	说明
parent()	$(‘li’).parent();	查找父级
children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul>li’'),最近一级(亲儿子)
find(selector)	$(‘ul’).find(‘li’)	相当于$(‘ul li’),后代选择器
siblings(selector)	$(‘.first’).sibings(‘li’)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(‘.first’).nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(‘.last’).prevtAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(‘protected’)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(‘li’).eq(2)	相当于$(‘li:eq(2)’), index从0开始

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery筛选方法</title>
    <script src="../jQuery_min.js"></script>
</head>

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

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery筛选方法(下)</title>
    <script src="../jQuery_min.js"></script>
</head>

<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <div class="current">俺有current</div>
    <div>俺木有current</div>

    <script>
        // 注意一下都是方法带括号
        $(function () {
            // 1. 兄弟元素
            $('ol .item').siblings('li').css('color', 'red');
            // 2. 第n个元素
            var index = 4;
            // (1) 我们可以利用选择器的方式选择
            $('ul li:eq(2)').css('color', 'blue');
            // (2) 我们可以利用选择方法的方式选择
            // $('ul li').eq(4).css('color', 'blue');
            $('ul li').eq(index).css('color', 'blue');
            // 3. 判断是否有某个类名
            console.log($('div:first').hasClass('current'));
            console.log($('div:last').hasClass('current'));

        })
    </script>
</body>

</html>

5.6 jQuery里面的排他思想

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery排他思想</title>
    <style>
        button {
            margin-left: 10px;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>

<body>
    <button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button>

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

</html>

案例：淘宝服侍精品案例

案例分析

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝精品服饰案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrapper {
            position: relative;
            width: 300px;
            height: 254px;
            margin: 100px auto;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        #left {
            display: flex;
            flex-direction: column;
            width: calc(100% - 250px);
            text-align: center;
            font-size: 14px;
        }

        #left li   {
            width: 100%;
            height: 28px;
            line-height: 28px;
            background-color: #fff7f8;
            border-top: 1px solid #fddcdc;
            border-left: 1px solid #fddcdc;
        }

        #left li:hover {
            background-color: #e52e19;
        }

        #left li:last-child {
            border-bottom: 1px solid #fddcdc;
        }

        #content {
            overflow: hidden;
            position: absolute;
            width: calc(100% - 48px);
            height: 99.3%;
            top: 0;
            left: 16%;
            border: 1px solid #fddcdc;
        }

        #content img {
            width: calc(100% - 0.1px);
            height: 252px;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <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 id="content">
            <div><a href="#"><img src="images/女靴.jpg" alt=""　width="200" height="250"></a></div>
            <div><a href="#"><img src="images/雪地靴.jpg_.webp.jpg" alt=""　width="200" height="250"></a></div>
            <div><a href="#"><img src="images/冬裙.jpg_.webp.jpg" alt=""　width="200" height="250"></a></div>
            <div><a href="#"><img src="images/呢大衣.jpg_.webp.jpg" alt=""　width="200" height="250"></a></div>
            <div><a href="#"><img src="images/毛衣.jpg_.webp.jpg" alt=""　width="200" height="250"></a></div>
            <div><a href="#"><img src="images/棉服.jpg_.webp.jpg" alt=""　width="200" height="250"></a></div>
            <div><a href="#"><img src="images/女裤.jpg_.webp.jpg" alt=""　width="200" height="250"></a></div>
            <div><a href="#"><img src="images/羽绒服.jpg_.webp.jpg" alt=""　width="200" height="250"></a></div>
            <div><a href="#"><img src="images/牛仔裤.jpg_.webp.jpg" alt=""　width="200" height="250"></a></div> 
        </div>
    </div>

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

            })
        })
    </script>
</body>

</html>

6.jQuery样式操作

6.1 操作CSS方法

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

参数只写属性名，则是返回属性值

 $(this).css('color');

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

 $(this).css('color', 'red');

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

 $(this).css({'color': 'white', 'font-size': '20px'});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery_min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        // 操作样式之CSS方法
        $(function() {
            console.log($('div').css('width'));
            // $('div').css('width', '300px');
            // $('div').css('width', 300);
            // $('div').css(height, '300px'); // 属性名一定要加引号
            $('div').css({
                width: 400,
                height: 400,
                backgroundColor: 'red'
                    // 如果是复合属性必须采用驼峰命名法, 如果值不是数字则需要加引号
            })
        })
    </script>
</body>
</html>

6.2 设置样式方法

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

添加类

 $('div').addClass('current');

移除类

 $('div').removeClass('current');

切换类(如果有这个类名就添加类名，如果有则移除类名)

 $('div').toggleClass('current');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作样式之操作类</title>
    <script src="../jQuery_min.js"></script>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            transition: all .7s;
        }

        .current {
            background-color: red;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="current"></div>

    <script>
        // 1. 添加类 addClass()
        // $('div').click(function() {
        //     // $('div').addClass('current');
        // })
        // 2. 删除类 removeClass()
        // $('div').click(function() {
        //     $('div').removeClass('current');
        // })
        // 3. 切换类 toggleClass()
        $('div').click(function() {
            $('div').toggleClass('current');
        })
    </script>
</body>
</html>

案例：tab栏切换

案例分析

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab栏切换</title>
    <script src="../jQuery_min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .tab {
            width: 1200px;
            margin: 100px auto;
        }

        .tab_list {
            /* overflow: hidden; */
            text-align: center;
            background-color: #f7f7f7;
            border-bottom: 1px solid #e4393c;
        }

        .tab_list ul li {
            float: left;
            width: 160px;
            height: 50px;
            line-height: 50px;
            color: #666;
            font-size: 15px;
        }

        .tab_list .current {
            background-color: #e4393c;
            color: #fff;
        }

        .tab_list ul li {
            /* color: #e4393c; */
            cursor: pointer;
        }

        .item {
            display: none;
        }

        .item:nth-child(1) {
            display: block;
        }

        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list clearfix">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后服务</li>
                <li>商品评价(5000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后服务模块内容
            </div>
            <div class="item">
                商品评价(5000)模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
        </div>
    </div>

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

            

        })
    </script>
</body>

</html>

6.3 类操作与className区别

原生js中className会覆盖元素原先里面的类名。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery类操作不影响原先类</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            background: pink;
        }

        .two {
            transform: rotate(45deg);
            margin: 100px auto;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <div class="one two"></div>

    <script>
        // var one = document.querySelector('.one');
        // one.className = 'one';
        // $('.one').addClass('two');  // 这个addClass相当于追加类名, 不影响原先的类名
        $('.one').removeClass('two');
    </script>
</body>
</html>

7.jQuery效果

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

显示隐藏
- show()
- hide()
- toggle()
滑动
- slideDown()
- slideUp()
- slideToggle()
淡入淡出
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
自定义动画
- animate()

7.1 显示隐藏效果

显示语法规范

 show([speed, [easing], [fn]])

2.显示参数

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

1.隐藏语法规范

 hide([speed, [easing], [fn]])

2. 隐藏参数

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

1.切换语法规范

 toggle([speed, [easing], [fn]])

2.切换参数

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery效果之显示与隐藏</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }

        button {
            cursor: pointer;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>

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

    <script>
        $(function () {
            $('button').eq(0).click(function () {
                $('div').show(1000, function () {
                    alert(1);
                });
            })
            $('button').eq(1).click(function () {
                $('div').hide(1000, function () {
                    alert(1);
                });
            })
            $('button').eq(2).click(function () {
                $('div').toggle(1000);
            })
            // 一般情况下,我们都不加参数直接显示隐藏就可以了
        })
    </script>
</body>

</html>

7.2 滑动效果

1. 下滑效果语法规范

 slideDown([speed], [easing], [fn])

2.下滑效果参数

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

1.上滑效果语法规范

 slideUp([speed], [easing], [fn])

2.上滑效果语法规范

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

1.滑动切换效果语法规范

 slideToggle([speed], [easing], [fn])

2. 滑动切换效果参数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery效果之滑动</title>
    <style>
        div {
            display: none;
            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>
        $(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>
</html>

7.3 事件切换

over：鼠标移动元素上要触发的函数（相当于mouseenter）
out：鼠标移出元素要触发的函数（相当于mouseleave）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简洁版滑动下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: 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;
            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>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <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>
        <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() {
            // 鼠标经过
            // $('ul>li').mouseover(function() {
            //     // $(this) jQuery 当前元素 this不要加引号
            //     // show() 显示元素 hide() 隐藏元素
            //     $(this).children('ul').slideDown(200);
            // })
            // // 鼠标离开
            // $('ul>li').mouseout(function() {
            //     $(this).children('ul').slideUp(200);
            // })
            // 1. 事件切换  hover 就是鼠标经过和离开的复合写法
            // $('ul>li').hover(function() {
            //     $(this).children('ul').slideDown();
            // }, function() {
            //     $(this).children('ul').slideUp();
            // })
            // 2. 事件切换  hover 如果只写一个函数那么鼠标经过和离开都会触发这个函数
            $('.nav>li').hover(function() {
                $(this).children('ul').slideToggle();
            })
        })
    </script>
</body>
</html>

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

1.动画或效果队列

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

2.停止排队

 stop()

stop()方法用于停止动画或效果
注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简洁版滑动下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: 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;
            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>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <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>
        <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() {
            // 鼠标经过
            // $('ul>li').mouseover(function() {
            //     // $(this) jQuery 当前元素 this不要加引号
            //     // show() 显示元素 hide() 隐藏元素
            //     $(this).children('ul').slideDown(200);
            // })
            // // 鼠标离开
            // $('ul>li').mouseout(function() {
            //     $(this).children('ul').slideUp(200);
            // })
            // 1. 事件切换  hover 就是鼠标经过和离开的复合写法
            // $('ul>li').hover(function() {
            //     $(this).children('ul').slideDown();
            // }, function() {
            //     $(this).children('ul').slideUp();
            // })
            // 2. 事件切换  hover 如果只写一个函数那么鼠标经过和离开都会触发这个函数
            $('.nav>li').hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children('ul').stop().slideToggle();
            })
        })
    </script>
</body>
</html>

7.5 淡入淡出效果

1.淡入效果语法规范

 fadeIn([spee], [easing], [fn])

2.淡入效果参数

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

1.淡出效果语法规范

 fadeOut([speed], [easing], [fn])

2.淡出效果参数

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

1.淡入淡出切换效果语法规范

 fadeToggle([speed], [easing], [fn])

2.淡入淡出切换效果参数

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

1.渐进方式调整到指定的不透明度

 fadeTo([speed]. opacity, [easing], [fn])

2.效果参数

opacity透明度必须写，取值0~1之间。
**speed：**三种预定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示动画时长的毫秒数值(如：1000)。必须写
easing：(Optional)用来指定切换效果，默认是"swing", 可用参数"linear"
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery效果之淡入淡出</title>
    <style>
        div {
            display: none;
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <button>淡入效果</button><button>淡出效果</button><button>淡入淡出切换</button><button>修改透明度</button>
    <div></div>

    <script>
        $(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)
            })
        })
    </script>
</body>
</html>

7.6 自定义动画 animate

1. 语法

 animate(params, [speed], [easing], [fn])

**params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。**其余参数都可以省略。
speed：三种预定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示动画时长的毫秒数值(如1000)
easing：(Optional)用来指定切换效果，默认是"swing" ,可用参数"linear"。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery自定义动画效果animate</title>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <button>动起来</button>
    <div></div>
</body>
</html>

<script>
    $(function() {
        $('button').click(function() {
            $('div').animate({
                left: 500,
                top: 300,
                opacity: .4,
                width: 500,
            }, 500)
        })
    })
</script>

案例：王者荣耀手风琴效果

案例：王者荣耀手风琴效果分析

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀手风琴效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .king {
            position: relative;
            width: 1000px;
            height: 100px;
            line-height: 100px;
            background-color: #0e3354;
            margin: 100px auto;
            border-radius: 5px 0 0 0;
            overflow: hidden;
        }

        .king p {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 100%;
            background-color: #15507a;
            border: 2px solid #165787;
        }

        .king ul li {
            display: inline-block;
            position: relative;
            width: 69px;
            height: 69px;
            margin-left: 2%;
            margin-top: 1.6%;
        }

        .king ul li.current {
            width: 224px;
        }

        .king ul li.current .big {
            display: block;
        }

        .king ul li.current .small {
            display: none;
        }

        .big {
            display: none;
        }

        .small {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 69px;
            border: 1px solid #fff;
            border-radius: 6px;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>

<body>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/113-freehover.png" alt="" class="big">
                    <img src="images/113.jpg" alt="" class="small">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/115-freehover.png" alt="" class="big">
                    <img src="images/115.jpg" alt="" class="small">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/144-freehover.png" alt="" class="big">
                    <img src="images/144.jpg" alt="" class="small">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/145-free.png" alt="" class="big">
                    <img src="images/145.jpg" alt="" class="small">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/146-free.png" alt="" class="big">
                    <img src="images/146.jpg" alt="" class="small">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/147-free.png" alt="" class="big">
                    <img src="images/147.jpg" alt="" class="small">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/xishi-free.png" alt="" class="big">
                    <img src="images/xishi.jpg" alt="" class="small">
                </a>
            </li>
        </ul>
        <p></p>
    </div>
</body>

</html>

<script>
    $(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>

8.jQuery属性操作

8.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type

1.获取属性值

 prop('属性')

2.设置属性语法

 prop('属性', '属性值')

8.2 设置或获取元素自定义属性值 attr()

1.获取属性语法

 attr('属性')   // 类似原生getAttribute()

2.设置属性语法

 attr('属性', '属性值')  // 类似原生setAttribute()

该方法也可以获取H5自定义属性

8.3 数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

1.附加数据语法

 data('name', 'value')  // 向被选元素附加数据

2.获取数据语法

 data('name')   // 向被选元素获取数据

同时，还可以读取HTML5自定义属性data-index，得到的是数字型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery属性操作</title>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <a href="http://www.itcast.cn" title="都挺好">啥都不是</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="4">我是div</div>
    <span>124</span>
</body>
</html>

<script>
    $(function() {
        // element.prop('属性名') 获取元素固有的属性值
        console.log($('a').prop('href'));
        $('a').prop('title', '我们都挺好');
        $('input').change(function() {
            console.log($(this).prop('checked'));
        })

        // console.log($('div').prop('index'));
        // 2. 元素的自定义属性是通过attr() 获取的
        console.log($('div').attr('index'));
        $('div').attr('index', 4);
        console.log($('div').attr('data-index'));

        // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
        $('span').data('username', 'andy');
        console.log($('span').data('username'));
        // 这个方法获取data-index h5自定义属性 第一个不用写data-而且返回的是数字型
        console.log($('div').data('index'));
    })
</script>

案例：购物车案例模块-全选

案例分析

全选思路：里面3个小的复选框选中状态(checked)跟着全选按钮(checkall)走。
因为checked是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
把全选按钮状态给3个小复选框就可以了。
当我们每次点击小的复选框按钮，就来判断：
如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选
:checked 选择器 :checked 查找被选中的表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车案例模块-全选</title>
    <style>
        table {
            margin: 100px auto;
            border-collapse: collapse;
           
        }
        
        th,
        td {
            border: 1px solid #ccc;
        }

        thead tr {
            height: 50px;
            background-color: #09c;
            color: #fff;
        }

        #j_tb td {
            height: 50px;   
            background-color: #f0f0f0;
            padding: 0 20px;
        }

        #j_tb td:nth-child(2) {
            width: 200px;
        }

        #j_tb tr:last-child td {
            color: #fff;
            background-color: #09c;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
        }

        #j_tb tr:first-child td {
            background-color: #fff4e8;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>
                    <label for="j_cbAll"><input type="checkbox" name="" id="j_cbAll" class="j_cbAll">全选</label>
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox" name="" id="" checked class="checkbox">
                </td>
                <td>iPone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="" class="checkbox">
                </td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="" class="checkbox">
                </td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="" class="checkbox">
                </td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <label for="j_tbAll"><input type="checkbox" name="" id="j_tbAll" class="j_cbAll">全选</label>
                </td>
                <td>商品</td>
                <td>价钱</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

<script>
    $(function() {
        // 1. 全选 全不选功能模块
        // 就是把全选按钮(j_cbAll)的状态赋值给4个小的复选按钮(checkbox)就可以了
        // 事件可以使用change
        $('.j_cbAll').change(function() {
            // console.log($(this).prop('checked'));
            var cbAll = $(this).prop('checked');
            $('.checkbox, .j_cbAll').prop('checked', cbAll);
        })
        // 2. 如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选
        $('.checkbox').change(function() {
            // if (被选中的小复选框的个数 === 4) {
            //     就要选中全选按钮
            // } else {
            //     不要选中全选按钮
            // }
            // console.log($('.checkbox:checked').length); 
            // $('.checkbox').length // 这个是所有小复选框的个数
            if ($('.checkbox:checked').length === $('.checkbox').length) {
                $('.j_cbAll').prop('checked', true)
            } else {
                $('.j_cbAll').prop('checked', false)
            }
        })
    })
</script>

9. jQuery内容文本值

1.普通元素内容html() （相当于原生innerHTML）

 html()		// 获取元素的内容

 html('内容')		// 设置元素的内容

2.普通元素文本内容text() （相当于原生innerText）

 text()		// 获取元素的文本内容

 text('文本内容')		// 设置元素的文本内容

主要针对元素的内容还有表单的值操作

3.表单的值val() （相当于原生value）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery内容文本值</title>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
</body>
</html>

<script>
    $(function() {
        // 1. 获取设置元素内容 html()
        console.log($('div').html());
        // $('div').html('1234')
        // 2. 获取设置元素文本内容 text()
        console.log($('div').text());
        $('div').text('1234')

        // 3. 获取设置表单值 val()
        console.log($('input').val());
        $('input').val('1234')

    })
</script>

案例：购物车案例模块 -增减商品数量

案例分析

核心思路：首先声明一个变量，当我们点击+号(increment)，就让这个值++，然后赋值给文本框。
注意1：只能增加本商品的数量，就是当前+号的兄弟文本框(itxt)的值
修改表单的值是val()方法
注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值
减号(decrement)思路同理，但是如果文本框的值是1，就不能再减了

 // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号(increment)，就让这个值++，然后赋值给文本框。
    $('.increment').click(function () {
        var num = $(this).siblings('.itxt').val();
        // console.log(num);
        num++;
        $(this).siblings('.itxt').val(num);
    })
    $('.decrement').click(function () {
        var num = $(this).siblings('.itxt').val();
        if (num == 1) {
            return false;
        }
        num--;
        $(this).siblings('.itxt').val(num);
    })

案例：购物车案例模块-修改商品小计

案例分析

核心思路：每次点击+号或者-号，根据文本框的值乘以当前商品的价格就是商品的小计
注意1：只能增加本商品的小计，就是当前商品的小计模块（p-sum）
修改普通元素的内容是text()方法
注意2：当前商品的价格，要把￥符号去掉再想乘截取字符串substr(1)
parents(‘选择器’)可以返回指定祖先元素
最后计算的结果如果想要保留2位小数通过toFixed(2)方法
用户也可以直接修改表单里面的值，同样要计算小计。用表单change事件
用最新的表单内的值乘以单价即可，但是还是当前商品小计

$(function () {
    // 1. 全选 全不选功能模块
    // 就是把全选按钮(j_cbAll)的状态赋值给4个小的复选按钮(checkbox)就可以了
    // 事件可以使用change
    $('.checkall').change(function () {
        // console.log($(this).prop('checked'));
        var cbAll = $(this).prop('checked');
        $('.j-checkbox, .checkall').prop('checked', cbAll);
    })
    // 2. 如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选
    $('.j-checkbox').change(function () {
        // if (被选中的小复选框的个数 === 4) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($('.checkbox:checked').length); 
        // $('.checkbox').length // 这个是所有小复选框的个数
        if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
            $('.checkall').prop('checked', true)
        } else {
            $('.checkall').prop('checked', false)
        }
    })
    // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号(increment)，就让这个值++，然后赋值给文本框。
    $('.increment').click(function () {
        var num = $(this).siblings('.itxt').val();
        // console.log(num);
        num++;
        $(this).siblings('.itxt').val(num);
        // 4. 计算小计模块 根据文本框的值 乘以当前商品的价格就是商品的小计
        var p = $(this).parents('.p-num').siblings('.p-price').text();
        p = p.substr(1);
        var price = (p * num).toFixed(2)
        // console.log(p);
        $(this).parents('.p-num').siblings('.p-sum').text('￥' +  price)

    })
    $('.decrement').click(function () {
        var num = $(this).siblings('.itxt').val();
        if (num == 1) {
            return false;
        }
        num--;
        $(this).siblings('.itxt').val(num);
        // 4. 计算小计模块 根据文本框的值 乘以当前商品的价格就是商品的小计
        // var p = $(this).parent().parent().siblings('.p-price').text();
        // parents('.p-num') 返回指定的祖先元素
        var p = $(this).parents('.p-num').siblings('.p-price').text();
        p = p.substr(1);
        var price = (p * num).toFixed(2)
        // console.log(p);
        $(this).parents('.p-num').siblings('.p-sum').text('￥' + price)
    })
    // 4. 用户修改文本框的值 计算 小计模块
    $('.itxt').change(function() {
        // 先得到当前文本框的值 * 当前商品的单价
        var num = $(this).val();
        // 当前商品的单价
        var p = $(this).parents('.p-num').siblings('.p-price').text();
        p = p.substr(1);
        $(this).parents('.p-num').siblings('.p-sum').text('￥' + (p * num).toFixed(2))
    })

})

10. jQuery元素操作

主要是遍历、创建、添加、删除元素操作。

10.1 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作。就需要用到遍历

语法1：

 $('div').each(function (index, domEle) { xxx; })

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery遍历元素</title>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
</html>

<script>
    $(function() {
        $('div').css('color', 'red')
        // 如果针对于同一类元素做不同操作, 需要用到遍历元素(类似于for, 但是比for强大)
        // 1. each()  方法遍历元素
        var sum = 0;
        var arr = ['red', 'green', 'blue'];
        $('div').each(function(i, domEle) {
            // 回调函数第一个参数一定是索引号, 可以自己指定索引号名称
            // console.log(index);
            console.log(i);
            // 回调函数第二个参数一定是dom元素对象
            console.log(domEle);
            // domEle.css('color'); // dom对象没有css方法 
            $(domEle).css('color', arr[i])
            sum += parseFloat($(domEle).text());
        })
        console.log(sum);
    })
</script>

语法2：

 $.each(object, function(index, element) { xxx; })

$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
里面的函数有2个参数：index是每个元素的索引号；element 遍历内容

// 2. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
        // $.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 属性值
        })
    })

案例：购物车案例模块-计算总计和总额

案例分析

核心思路：把所有文本框里面的值相加就是总计数量。总额同理。
文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可
点击+号-号，会改变总计和总额的，以上2个操作调用这个函数即可
因为可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可
注意1：总计是文本框里面的值相加用val() 总额是普通元素的内容用text()
要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加

// 5. 计算总计和总额模块
    getSum()
    function getSum() {
        var count = 0;  // 计算总件数
        var money = 0; // 计算总价钱
        $('.itxt').each(function(i, ele) {
            count += parseInt($(ele).val());
        })
        $('.amount-sum em').text(count)
        $('.p-sum').each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1))
        })
        $('.price-sum em').text('￥' + money.toFixed(2))
    }

10.2 创建元素

语法：

 $('<li></li>');

动态的创建了一个<li>

10.3 添加元素

1.内部添加

 element.append('内容')

把内容放入匹配元素内部最后面，类似原生appendChild

2.外部添加

 element.after('内容')	// 把内容放入目标元素后面

 element.before('内容')	// 把内容放入目标元素前面

内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，它们是兄弟关系

10.4 删除元素

 element.remove()	// 删除匹配的元素(本身)

 element.empty()	// 删除匹配的元素里面的子节点

 element.html('')	// 删除匹配的元素里面的子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建添加删除元素</title>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
</body>
</html>

<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)
        // 3. 删除元素
        // $('ul').remove(); // 可以删除匹配的元素 自杀
        // $('ul').empty(); // 可以删除匹配的元素里面的子节点
        $('ul').html(''); // 可以删除匹配的元素里面的子节点
    })
</script>

案例：购物车案例模块-删除商品模块

案例分析

核心思路：把商品remove() 删除元素即可
有三个地方需要删除：1.商品后面的删除按钮 2.删除选中的商品 3.清空购物车
商品后面的删除按钮：一定是删除当前的商品，所有从$(this)出发
删除选中的商品：选判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品

// 6. 删除商品模块
    // (1) 商品后面的删除按钮
    $('.p-action a').click(function() {
        // 删除的是当前的商品
        $(this).parents('.cart-item').remove();
        getSum()
    })

    // (2) 删除选中的商品
    $('.remove-batch').click(function() {
        // 删除的是被选中的小复选框
        $('.j-checkbox:checked').parents('.cart-item').remove();
        getSum()
    })
    // (3) 清空购物车 删除全部商品
    $('.clear-all').click(function() {
        $('.cart-item').remove();
        getSum()
    });

案例：购物车案例模块-选中商品添加背景

案例分析

核心思路：选中的商品添加背景，不选中移除背景即可
全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
小的复选框点击：如果是选中状态，则当前商品添加背景，否则移除背景
这个背景，可以通过类名修改，添加类和删除类

    $('.checkall').change(function () {
        // console.log($(this).prop('checked'));
        var cbAll = $(this).prop('checked');
        $('.j-checkbox, .checkall').prop('checked', cbAll);
        if ($(this).prop('checked')) {
            
                $('.j-checkbox').change(function () {
        // if (被选中的小复选框的个数 === 4) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($('.checkbox:checked').length); 
        // $('.checkbox').length // 这个是所有小复选框的个数
        if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
            $('.checkall').prop('checked', true)
        } else {
            $('.checkall').prop('checked', false)
        }
        if ($(this).prop('checked')) {
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents('.cart-item').addClass('check-cart-item')
        } else {
            // check-cart-item 移除
            $(this).parents('.cart-item').removeClass('check-cart-item')
        }

    })

            // 让所有商品添加 check-cart-item 类名
            $('.cart-item').addClass('check-cart-item')
        } else {
            // check-cart-item 移除
            $('.cart-item').removeClass('check-cart-item')
        }
    })


    $('.j-checkbox').change(function () {
        // if (被选中的小复选框的个数 === 4) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($('.checkbox:checked').length); 
        // $('.checkbox').length // 这个是所有小复选框的个数
        if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
            $('.checkall').prop('checked', true)
        } else {
            $('.checkall').prop('checked', false)
        }
        if ($(this).prop('checked')) {
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents('.cart-item').addClass('check-cart-item')
        } else {
            // check-cart-item 移除
            $(this).parents('.cart-item').removeClass('check-cart-item')
        }

    })

11.jQuery事件注册

单个事件注册

语法：

 element.事件(function() {})

 $('div').click(function() { 事件处理程序 })

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

12.jQuery事件处理

12.1 事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：

 element.on(events, [selector], fn)

events：一个或多个用空格分隔的事件类型，如"click"或"keydown"
selector：元素的子元素选择器
fn：回调函数即绑定在元素身上的侦听函数

on()方法优势1：

可以绑定多个事件，多个处理事件处理程序

 $('div').on({
	mouseenter: function() {},
    mouseleave: function() {},
    click: function() {}
 })

如果事件处理程序相同

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

on()方法优势2：

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

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

在此之前bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on代替他们

on()方法优势3：

动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .current {
            background-color: purple;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>

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

    </ol>
</body>

</html>

<script>
    $(function () {
        // 1. 单个事件注册 
        var flag = true;
        // $('div').click(function() {
        //     if (flag) {
        //         $(this).css('background', 'purple');
        //         flag = false;
        //     } else {
        //         $(this).css('background', 'pink')
        //         flag = true;
        //     }
        // })
        // $('div').mouseenter(function() {
        //     $(this).css('background', 'skyblue')
        // })
        // 2. 事件处理on
        $('div').on({
            // mouseenter: function () {
            //     $(this).css('background', 'skyblue')
            // },
            click: function () {
                if (flag) {
                    $(this).css('background', 'purple');
                    flag = false;
                } else {
                    $(this).css('background', 'pink')
                    flag = true;
                }
            },
            // mouseleave: function() {
            //     $(this).css('background', 'blue')
            // }
        })
        $('div').on('mouseenter mouseleave', function() {
            $(this).toggleClass('current')
        })
        // (2). on()可以实现事件委托(委派)
        // $('ul li').click()
        $('ul').on('click', 'li', function() {
            alert(94)
        })
        // click 是绑定在ul身上的, 但是触发对象是ul里面的li
        // (3).on可以给动态创建的元素绑定事件 
        // $('ol li').click(function() {
        //     alert(11)
        // })
        $('ol').on('click', 'li', function() {
            alert(11)
        })
        var li = $('<li>我是后来创建的</li>')
        $('ol').append(li)
    })
</script>

案例：发布微博案例

案例分析：

点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中
点击删除按钮，可以删除当前的微博留言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博发布效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 40vw;
            border: 1px solid #000;
            margin: 100px auto;
            padding-bottom: 2vw;
        }

        li {
            list-style: none;
        }

        .box textarea {
            width: 60%;
            margin-top: 1vw;
            resize: none;
            outline: none;
            padding: 10px;
        }

        .box button {
            margin-right: 4.5vw;
        }

        .box span {
            margin-left: 4.5vw;
        }

        .box ul li {
            display: none;
            width: 60%;
            border-bottom: 1px dashed #ccc;
            margin-left: 10vw;
        }

        .box ul li:last-of-type {
            margin-bottom: 16px;
        }

        .box ul li:first-of-type {
            margin-top: 12px;
        }

        .box ul li a {
            float: right;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" id="" cols="30" rows="10" class="txt" autofocus></textarea>
        <button class="btn">发布</button>
        <ul>

        </ul>
    </div>
</body>
</html>

<script>
    $(function() {
        // 1. 点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul中
        $('.btn').on('click', function() {
            var li = $('<li></li>')
            li.html($('.txt').val() + '<a href="javascript: void(0);">删除</a>')
            $('ul').prepend(li);
            li.slideDown()
            $('.txt').val('')
        })
        // 2. 点击删除按钮，可以删除当前的微博留言
        // $('ul a').click(function() {   // 此时的click不能给动态生成的a创建事件
        //     alert(111);
        // })
        $('ul').on('click', 'a', function() {
            $(this).parent().slideUp(function() {
                $(this).remove();
            });
        })
        // 点击回车直接发布微博
        document.addEventListener('keyup', function(e) {
            if (e.keyCode === 13) {
                $('.btn').click();
            }
        })
    })
</script>

12.2 事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序。

 $('p').off()	// 解绑p元素所有事件处理程序
 $('p').off('click')	// 解绑p元素上面的点击事件 后面的foo是侦听函数名
 $('ul').off('click', 'li')		// 解绑事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件解绑off</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: pink;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是p</p>
</body>
</html>

<script>
    $(function() {
        $('div').on({
            click: function() {
                console.log('我点击了');
            },
            mouseenter: function() {
                console.log('我鼠标经过了');
            }
        })
        $('ul').on('click', 'li', function() {
            alert(110)
        })
        // 1. 事件解绑 off
        // $('div').off()  // 这个是解除了div身上的所有事件
        $('div').off('click')  // 这个是解除了div身上的点击事件
        $('ul').off('click', 'li')
        // 2. one() 但是它只能触发一次
        $('p').one('click', function() {
            alert(11)
        })
        // var flag = true;
        // var p = document.querySelector("p")
        // p.addEventListener('click', function() {
        //     if (flag) {
        //         alert(11)
        //         flag = false
        //     }
        //     console.log(flag);
        // })
    })
</script>

12.3 自动触发事件trigger()

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

 element.click()	// 第一种简写形式

 element.trigger('type')	// 第二种自动触发模式

 element.triggerHandler(type)	// 第三种自动触发模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动触发事件</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <div></div>
    <input type="text">
</body>
</html>

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

    })
</script>

12.3 jQuery事件对象

事件被触发，就会有事件对象的产生

 element.on(events, [selector], function(event) {})

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡：event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <div></div>
    <a href=""></a>
</body>
</html>

<script>
    $(function() {
        $(document).on('click', function(e) {
            console.log('点击了document');
        })
        $('div').on('click', function(e) {
            console.log('点击了div');
            e.stopPropagation()
        })
        
    })
</script>

13.拷贝对象

如果想要把某个对象拷贝(合并)给另一个对象使用，此时可以使用$.extend()方法

语法：

 $.extend([deep], target, object1, [objectN])

deep：如果设为true为深拷贝，默认为false 浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN：待拷贝到第N个对象的对象
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址)，修改目标对象不会影响被拷贝对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery对象拷贝</title>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    
</body>
</html>

<script>
    $(function() {
        // var targetObj = {
        //     id: 0
        // }
        // var obj = {
        //     id: 1,
        //     name: 'andy'
        // }
        // // $.extend(target, obj);
        // $.extend(targetObj, obj);
        // console.log(targetObj); // 会覆盖targetObj里面原来的数据
        var targetObj = {
            id: 0,
            msg: {  
                sex: '男'
            }
        }
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        }
        // $.extend(target, obj);
        // $.extend(targetObj, obj);
        // console.log(targetObj); // 会覆盖targetObj里面原来的数据
        // // 1. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
        // targetObj.msg.age = 20
        // console.log(targetObj);
        // console.log(obj);
        // 2. 深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址)，修改目标对象不会影响被拷贝对象
        $.extend(true, targetObj, obj);
        console.log(targetObj); // 会覆盖targetObj里面原来的数据
        // 1. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
        targetObj.msg.age = 20
        console.log(targetObj);  // msg: {sex: '男', age: 20}
        console.log(obj);
    })
</script>

14.多库共存

问题概述：

jQuery使用 $作为标识符，随着 j Q u ery 的流行，其他 j s 库也会用$ 作为标识符，这样一起使用会引起冲突

客观需求：

需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存

jQuery解决方案：

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多库共存</title>
    <script src="../jQuery_min.js"></script>
</head>

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

</html>

<script>
    $(function () {
        function $(ele) {
            return document.querySelector(ele)
        }
        console.log($('div'));
        // 1. 如果$符号冲突我们就使用jQuery
        jQuery.each();
        // 2. 让jQuery释放对$控制权, 让用户自己决定
        var xb = jQuery.noConflict();
        console.log(xb('span'));
    })
</script>

15.jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成

注意：这些插件也是依赖于jQuery来完成的，所以必须要引入jQuery文件，因此也称为jQuery插件。

jQuery插件常用的网站：

jQuery插件库 http://www.jq22.com
jQuery之家 http://www.hftmleaf.com

jQuery插件使用步骤：

引入相关文件。(jQuery文件和插件文件)
复制相关html、css、js(调用插件)

jQuery插件演示：

瀑布流
图片懒加载(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)

当我们页面滑动到可视区域，再显示图片。

我们使用jQuery插件库 EasyLazyload。注意，此时的js引入文件和js调用文件必须写到DOM元素(图片)最后面
全屏滚动(fullpage.js)

gitHub：http://github.com/alvarotrigo/fullPage.js

中文翻译网站：http://www.dowebok.com/demo/2014/77

bootstrap插件：

bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件

综合案例

案例：toDoList

文本框里面输入内容，按下回车，就可以生成待办事项
点击待办事项复选框，就可以把当前数据添加到已完成事项里面
点击已完成事项复选框，就可以把当前数据添加到待办事项里面
但是本页面内容刷新页面不会丢失

案例：toDoList分析

刷新页面不会丢失数据，因此需要用到本地存储localStorage
核心思路：不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新页面不会丢失数据
存储的数据格式：var todolist = [{title: ‘xxx’, done: false}]
注意点1：本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON.stringify(data)
注意点2：获取本地存储数据，需要把里面的字符转换为对象格式JSON.parse()我们才能使用里面的数据

toDoList按下回车把新数据添加到本地存储里面

切记：页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面
利用事件对象.keyCode判断用户按下回车键(13)
声明一个数组，保存数据
先要把读取本地存储原来的数据(声明函数getData())，放到这个数组里面
之后把最新从表单获取过来的数据，追加到数组里面
最后把数组存储给本地存储(声明函数savaDate())

toDoList本地存储数据渲染加载到页面

因为后面也会经常渲染加载操作，所以声明一个函数load，方便后面调用
先要读取本地存储数据。(数据不要忘记转换为对象格式)
之后遍历这个数据($.each())，有几条数据，就生成几个小li添加到ol里面
每次渲染之前，先把原先里面ol的内容清空，然后渲染加载最新的数据

toDoList删除操作

点击里面的a链接，不是删除的li，而是删除本地存储对应的数据
核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
我们可以给链接自定义属性记录当前的索引号
根据这个索引号删除相关的数据----数组的splice(i, 1)方法
存储修改后的数据，然后存储给本地存储
重新渲染加载数据列表
因为a是动态创建的，我们使用on方法绑定事件

toDoList正在进行和已完成选项操作

当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表
点击之后，获取本地存储数据
修改对应数据属性done为当前复选框的checked状态
之后保存数据到本地存储
重新渲染加载数据列表
load加载函数里面，新增一个条件，如果当前数据的done为true就是已经完成的，就把列表渲染加载到ul里面
如果当前数据的done为false，则是待办事项，就把列表渲染加载到ol里面

toDoList统计正在进行个数和已经完成个数

在我们load函数里面操作
声明2个变量：todoCount待办个数 doneCount已完成个数
当进行遍历本地存储数据的时候，如果数据done为false，则todoCount++，否则doneCount++
最后修改相应的元素text()

HTML代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <link rel="stylesheet" href="css/todolist.css">
    <script src="../../jQuery_min.js"></script>
    <script src="js/todolist.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autofocus="autofocus">
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">
            
        </ol>
        <h2>已经完成 <span id="donecuont"></span></h2>
        <ul id="donelist">
           
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>
</body>

</html>

CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #cdcdcd;
}

button,
input {
    border: 0;
}

header {
    width: 100vw;
    height: 52px;
    background-color: #323232;
}

header section {
    width: 36%;
    height: 100%;
    line-height: 52px;
    color: #ddd;
    font-size: 24px;
    margin: 0 auto;
}

header section input {
    float: right;
    width: 60%;
    height: 27px;
    padding-left: 6px;
    margin-top: 2%;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-shadow: 0 0 6px -2px inset;
    outline: none;
}

section {
    width: 36%;
    height: 100%;
    margin: 0 auto;
}

footer {
    text-align: center;
    margin-top: 20px;
    color: #666;
    font-size: 14px;
}

section h2 {
    position: relative;
    margin: 20px 0;
}

#todocount,
#donecuont {
    position: absolute;
    top: 1%;
    right: 0;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    color: #666;
    background-color: #e6e6fa;
    border: 1px solid #ccc;
    border-radius: 50%;
}

li {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    border: 1px solid #ccc; 
    border-radius: 0 4px 4px 0;
    cursor: move;
    list-style: none;
    margin-top: 10px;
}

li::before {
    content: '';
    position: absolute;
    left: -3px;
    width: 6px;
    height: 100%;
    background-color: #629a9c;
    border-radius: 4px 0 0 4px;
}

li input {
    position: absolute;
    top: 7px;
    left: 3%;
    width: 24px;
    height: 24px;
    cursor:pointer;
    opacity: .6;
    outline: none;
}

li p {
    margin-left: 54px;
}

li a {
    position: absolute;
    top: 5px;
    right: 9px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    background-color: #ccc;
    border-radius: 50%;
    text-decoration: none;
}

#donelist li {
    background-color: #e6e6e6;
    color: #676767;
    opacity: .9;
}


#donelist li::before {
    background-color: #b3b3b3;
}

jQuery代码

$(function () {
    // alert(11)
    // 页面加载的时候调用load这个函数, 让本地存储的数据渲染到页面中
    load()
    // 1. 按下回车把完整的数据存储到本地存储里面
    // 存储的数据格式 var todolist = [{title: 'xxx', done: false}]
    $('#title').on('keyup', function (e) {
        if (e.keyCode === 13) {
            if ($(this).val() !== '') {
                // 读取本地存储原来的数据
                var local = getDate('todolist')
                // console.log(local);
                // 把local数组进行跟新数据 把最新的数据追加给local数组
                local.push({ title: $(this).val(), done: false })
                // 把数组local存储给本地存储
                saveDate('todolist', local)
                $(this).val('')
                // 2. 把本地存储的数据渲染加载到页面中
                load()
            } else {
                alert('输入内容啦！笨蛋！')
            }
        }
    })
    // 3. toDoList删除操作
    $('ol, ul').on('click', 'a', function () {
        // alert(11)
        // 先获取本地存储
        var data = getDate('todolist')
        // console.log(date);
        // 修改数据
        var index = $(this).attr('data-index')
        // console.log(index);
        data.splice(index, 1)
        // 保存到本地存储
        saveDate('todolist', data)
        // 重新渲染页面
        load()
    })
    // 4. toDoList 正在进行和已完成选项操作
    $('ol, ul').on('click', 'input', function () {
        // alert(11)
        // 先获取本地存储的数据
        var data = getDate('todolist')
        // 修改数据
        var index = $(this).siblings('a').attr('data-index');
        // console.log(index);
        // data[?].done = ?
        data[index].done = $(this).prop('checked')
        // 保存到本地存储
        saveDate('todolist', data)
        // 重新渲染页面
        load()
    })
    // 读取本地存储的数据
    function getDate(name) {
        var data = localStorage.getItem(name)
        if (data !== null) {
            // 本地存储里面的数据是字符串格式的, 但是我们需要的是对象格式的
            return JSON.parse(data)
        } else {
            return []
        }
    }
    // 保存本地存储数据
    function saveDate(name, date) {
        localStorage.setItem(name, JSON.stringify(date))
    }
    // 渲染加载到页面
    function load() {
        // 读取本地存储的数据
        var data = getDate('todolist')
        var todoCount = 0;  // 正在进行的个数
        var doneCount = 0;  // 已完成的个数
        // console.log(date);
        // 遍历这个数组之前先把ol里面的内容清空
        $('ol, ul').empty()
        // 遍历这个数组
        $.each(data, function (i, dataAll) {
            if (dataAll.done) {
                $('ul').prepend('<li><input type="checkbox" checked></input> <p>' + dataAll.title + '</p> <a href="javascript: void(0);" data-index=' + i + '>×</a></li>')
                doneCount++
            } else {
                $('ol').prepend('<li><input type="checkbox" ></input> <p>' + dataAll.title + '</p> <a href="javascript: void(0);" data-index=' + i + '>×</a></li>')
                todoCount++
            }
        })
        $('#todocount').text(todoCount)
        $('#donecuont').text(doneCount)
    }
})

16.jQuery尺寸、位置操作

16.1 jQuery尺寸

语法	用法
width() / height()	取得元素宽度和高度值只算width/height
innerWidth() / innerHeight()	取得匹配元素宽度和高度值包含 padding
outerWidth() / outerHeight	取得匹配元素宽度和高度值包含padding、border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值包含 padding、border、margin

以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: pink;
            padding: 10px;
            border: 10px solid red;
            margin: 10px;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

<script>
    $(function() {
        // 1. width() / height()
        console.log($('div').width());
        // $('div').width(300)
        // 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
        console.log($('div').innerWidth());
        // 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
        console.log($('div').outerWidth());
        // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
        console.log($('div').outerWidth(true));
    })
</script>

16.2 jQuery位置

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

1.offset() 设置或获取元素偏移

offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
该方法有2个属性left、top。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离
可以设置元素的偏移： offset({top: 10, left: 30})

2.positon() 获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准

3.scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

scrollTop()方法设置或返回被选元素被卷去的头部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery被卷去的头部</title>
    <style>
        .container {
            width: 400px;
            height: 2000px;
            background-color: skyblue;
            margin: 400px auto;
        }

        .back {
            position: fixed;
            bottom: 15%;
            right: 5%;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background-color: pink;
        }
    </style>
    <script src="../jQuery_min.js"></script>
</head>
<body>
    <div class="back">返回顶部</div>
    <div class="container"></div>
</body>
</html>

<script>
    $(function() {
        $(document).scrollTop(100);
        var boxTop = $('.container').offset().top
        console.log(boxTop);
        // 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
        // 页面滚动事件
        $(window).scroll(function() {
            // console.log(11);
            if ($(document).scrollTop() >= boxTop) {
                $('.bakc').fadeIn()
            } else {
                $('.back').fadeOut()
            }
        })
    })
</script>

案例：带有动画的返回顶部

核心原理：使用animate动画返回顶部
animate动画函数里面有个scrollTop属性，可以设置位置
但是元素做动画，因此$(‘body, html’).animate({scrollTop:0})

 $(function() {
	// 返回顶部
        $('.back').click(function() {
            // $(document).scrollTop(0);
            $('body, html').stop().animate({
                scrollTop: 0
            })
            // $(document).stop().animate({
            //     scrollTop: 0
            // }) // 不能是文档而是html和body元素做动画
        })
 })

案例：品优购电梯导航

当我们滚动到今日推荐模块，就让电梯导航显示出来
点击电梯导航页面可以滚动到相应内容区域
核心算法：因为电梯导航模块和内容区模块一一对应的
当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top
然后执行动画即可
当我们点击电梯导航某个小li，当前小li添加current类，兄弟移除类名
当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类
触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面
需要用到each，遍历内容区域大模块。each里面能拿到内容区域每一个模块元素和索引号
判断的条件：被卷去的头部大于等于内容区域里面每个模块的offset().top
就利用这个索引号找到相应的电梯导航小li添加类

4.链式编程

链式编程是为了节省代码量，看起来更优雅

 $(this).css('color', 'red').siblings().css('color', '')

使用链式编程一定要注意是哪个对象执行样式

c1400612901

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记

jQuery学习笔记
复制链接

扫一扫

jQuery学习笔记

1.JQuery概述

1.1 JavaScript库

常见的JavaScript库

1.2 jQuery的概念

1.2 jQuery的优点

2.jQuery的基本使用

2.1 jQuery的下装

2.2 jQuery的使用步骤

2.3 jQuery的入口函数

2.4 jQuery的顶级对象$

2.5 jQuery对象和DOM对象

3.jQuery选择器

3.1 jQuery基础选择器

3.2 jQuery层级选择器

知识铺垫

3.3 隐式迭代(重要)

3.4 jQuery筛选选择器

3.5 jQuery筛选方法(重点)

5.6 jQuery里面的排他思想

案例：淘宝服侍精品案例

案例分析

6.jQuery样式操作

6.1 操作CSS方法

6.2 设置样式方法

案例：tab栏切换

案例分析

6.3 类操作与className区别

7.jQuery效果

7.1 显示隐藏效果

显示语法规范

2.显示参数

1.隐藏语法规范

2. 隐藏参数

1.切换语法规范

2.切换参数

7.2 滑动效果

1. 下滑效果语法规范

2.下滑效果参数

1.上滑效果语法规范

2.上滑效果语法规范

1.滑动切换效果语法规范

2. 滑动切换效果参数

7.3 事件切换

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

1.动画或效果队列

2.停止排队

7.5 淡入淡出效果

1.淡入效果语法规范

2.淡入效果参数

1.淡出效果语法规范

2.淡出效果参数

1.淡入淡出切换效果语法规范

2.淡入淡出切换效果参数

1.渐进方式调整到指定的不透明度

2.效果参数

7.6 自定义动画 animate

1. 语法

案例： 王者荣耀手风琴效果

案例：王者荣耀手风琴效果分析

8.jQuery属性操作

8.1 设置或获取元素固有属性值 prop()

1.获取属性值

2.设置属性语法

8.2 设置或获取元素自定义属性值 attr()

1.获取属性语法

2.设置属性语法

8.3 数据缓存data()

1.附加数据语法

2.获取数据语法

案例：购物车案例模块-全选

案例分析

9. jQuery内容文本值

1.普通元素内容html() （相当于原生innerHTML）

2.普通元素文本内容text() （相当于原生innerText）

3.表单的值val() （相当于原生value）

案例：购物车案例模块 -增减商品数量

案例分析

案例：购物车案例模块-修改商品小计

案例分析

案例：王者荣耀手风琴效果