jQuery学习笔记

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的使用步骤

  1. 引入jQuery文件
  2. 使用即可

2.3 jQuery的入口函数

	$(function) () {
		...  // 此处是页面DOM加载完成的入口
	};
	$(document).ready(function () {
		... // 此处是页面DOM加载完成的入口
    })
  1. 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装。
  2. 相当于原生js中的DOMContentLoaded。
  3. 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
  4. 更推荐使用第一种方式。

2.4 jQuery的顶级对象$

  1. 是 j Q u e r y 的别称,在代码中可以使用 j Q u e r y 代替 是jQuery的别称,在代码中可以使用jQuery代替 jQuery的别称,在代码中可以使用jQuery代替,但一般为了方便,通常都是直接使用$。
  2. 是 j Q u e r y 的顶级对象,相当于原生 J a v a S c r i p t 中的 w i n d o w 。把元素利用 是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用 jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用包装成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对象

  1. 用原生js获取来的对象就是DOM对象
  2. jQuery方法获取的元素就是jQuery对象
  3. 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>

案例:淘宝服侍精品案例

案例分析
  1. 核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏
  2. 需要得到当前小li的索引号,就可以显示对应索引号的图片
  3. jQuery得到当前元素索引号**$(this).index()**
  4. 中间对应的图片,可以通过eq(index)方法去选择
  5. 显示元素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方法来修改简单元素样式;也可以操作类,修改多个样式。

  1. 参数只写属性名,则是返回属性值
 $(this).css('color');
  1. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
 $(this).css('color', 'red');
  1. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号
 $(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,可以操作类样式,注意操作类里面的参数不要加点。

  1. 添加类
 $('div').addClass('current');
  1. 移除类
 $('div').removeClass('current');
  1. 切换类(如果有这个类名就添加类名,如果有则移除类名)
 $('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栏切换

案例分析
  1. 点击上部的li,当前li添加current类,其余的兄弟移除类。
  2. 点击的同时,得到当前li的索引号
  3. 让下部里面相应索引号的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给我们封装了很多动画效果,最为常见的如下:

  1. 显示隐藏
    • show()
    • hide()
    • toggle()
  2. 滑动
    • slideDown()
    • slideUp()
    • slideToggle()
  3. 淡入淡出
    • fadeIn()
    • fadeOut()
    • fadeToggle()
    • fadeTo()
  4. 自定义动画
    • animate()

7.1 显示隐藏效果

显示语法规范

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

2.显示参数

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

1.隐藏语法规范

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

2. 隐藏参数

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

1.切换语法规范

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

2.切换参数

  1. 参数都可以省略,无动画直接显示。
  2. speed:三种预定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示动画时长的毫秒数值(如:1000)
  3. easing: (Optional)用来指定切换效果,默认是"swing", 可用参数"linear"。
  4. 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.下滑效果参数

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

1.上滑效果语法规范

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

2.上滑效果语法规范

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

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

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

2. 滑动切换效果参数

  1. 参数都可以省略,无动画直接显示。
  2. speed:三种预定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示动画时长的毫秒数值(如:1000)
  3. easing: (Optional)用来指定切换效果,默认是"swing", 可用参数"linear"。
  4. 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 事件切换

  1. over:鼠标移动元素上要触发的函数(相当于mouseenter)
  2. 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()
  1. stop()方法用于停止动画或效果
  2. 注意: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.淡入效果参数

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

1.淡出效果语法规范

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

2.淡出效果参数

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

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

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

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

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

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

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

2.效果参数

  1. opacity透明度必须写,取值0~1之间。
  2. **speed:**三种预定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示动画时长的毫秒数值(如:1000)。必须写
  3. easing:(Optional)用来指定切换效果,默认是"swing", 可用参数"linear"
  4. 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])
  1. **params: 想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。**其余参数都可以省略。
  2. speed:三种预定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示动画时长的毫秒数值(如1000)
  3. easing:(Optional)用来指定切换效果,默认是"swing" ,可用参数"linear"。
  4. 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>

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

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

  1. 鼠标经过某个小li有两步操作:
  2. 当前小li宽度变为224px,同时里面的小图片淡出,大图片淡入
  3. 其余兄弟小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>

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

案例分析

  1. 全选思路:里面3个小的复选框选中状态(checked)跟着全选按钮(checkall)走。
  2. 因为checked是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。
  3. 把全选按钮状态给3个小复选框就可以了。
  4. 当我们每次点击小的复选框按钮,就来判断:
  5. 如果小复选框被选中的个数等于3就应该把全选按钮选上,否则全选按钮不选
  6. :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>

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

案例分析
  1. 核心思路:首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。
  2. 注意1:只能增加本商品的数量,就是当前+号的兄弟文本框(itxt)的值
  3. 修改表单的值是val()方法
  4. 注意2:这个变量初始值应该是这个文本框的值,在这个值的基础上++。要获取表单的值
  5. 减号(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. 核心思路:每次点击+号或者-号,根据文本框的值乘以当前商品的价格就是商品的小计
  2. 注意1:只能增加本商品的小计,就是当前商品的小计模块(p-sum)
  3. 修改普通元素的内容是text()方法
  4. 注意2:当前商品的价格,要把¥符号去掉再想乘截取字符串substr(1)
  5. parents(‘选择器’)可以返回指定祖先元素
  6. 最后计算的结果如果想要保留2位小数通过toFixed(2)方法
  7. 用户也可以直接修改表单里面的值,同样要计算小计。用表单change事件
  8. 用最新的表单内的值乘以单价即可,但是还是当前商品小计
$(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; })
  1. each()方法遍历匹配的每一个元素。主要用DOM处理。
  2. 里面的回调函数有2个参数:index是每个元素的索引号;demEle是每个DOM元素对象,不是jQuery对象
  3. 所以要想使用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; })
  1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
  2. 里面的函数有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 属性值
        })
    })

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

案例分析
  1. 核心思路:把所有文本框里面的值相加就是总计数量。总额同理。
  2. 文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个变量,相加即可
  3. 点击+号-号,会改变总计和总额的,以上2个操作调用这个函数即可
  4. 因为可以封装一个函数求总计和总额的,以上2个操作调用这个函数即可
  5. 注意1:总计是文本框里面的值相加用val() 总额是普通元素的内容用text()
  6. 要注意普通元素里面的内容要去掉¥并且转换为数字型才能相加
// 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('内容')	// 把内容放入目标元素前面
  1. 内部添加元素,生成之后,它们是父子关系
  2. 外部添加元素,生成之后,它们是兄弟关系

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>

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

案例分析
  1. 核心思路:把商品remove() 删除元素即可
  2. 有三个地方需要删除:1.商品后面的删除按钮 2.删除选中的商品 3.清空购物车
  3. 商品后面的删除按钮:一定是删除当前的商品,所有从$(this)出发
  4. 删除选中的商品:选判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品
// 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()
    });

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

案例分析
  1. 核心思路:选中的商品添加背景,不选中移除背景即可
  2. 全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景
  3. 小的复选框点击:如果是选中状态,则当前商品添加背景,否则移除背景
  4. 这个背景,可以通过类名修改,添加类和删除类
    $('.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)
  1. events:一个或多个用空格分隔的事件类型,如"click"或"keydown"
  2. selector:元素的子元素选择器
  3. 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>

案例:发布微博案例

案例分析:
  1. 点击发布按钮,动态创建一个小li,放入文本框的内容和删除按钮,并且添加到ul中
  2. 点击删除按钮,可以删除当前的微博留言
<!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])
  1. deep:如果设为true为深拷贝,默认为false 浅拷贝
  2. target:要拷贝的目标对象
  3. object1:待拷贝到第一个对象的对象
  4. objectN:待拷贝到第N个对象的对象
  5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象
  6. 深拷贝,前面加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 e r y 的流行,其他 j s 库也会用 作为标识符,随着jQuery的流行,其他js库也会用 作为标识符,随着jQuery的流行,其他js库也会用作为标识符,这样一起使用会引起冲突

客观需求:

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

jQuery解决方案:
  1. 把里面的$符号统一改为jQuery。比如jQuery(‘div’)
  2. 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插件常用的网站:
  1. jQuery插件库 http://www.jq22.com
  2. jQuery之家 http://www.hftmleaf.com
jQuery插件使用步骤:
  1. 引入相关文件。(jQuery文件和插件文件)
  2. 复制相关html、css、js(调用插件)
jQuery插件演示:
  1. 瀑布流

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

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

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

  3. 全屏滚动(fullpage.js)

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

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

bootstrap插件:

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

综合案例

案例:toDoList

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

案例:toDoList分析

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

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

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

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

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

toDoList删除操作

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

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

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

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

  1. 在我们load函数里面操作
  2. 声明2个变量:todoCount待办个数 doneCount已完成个数
  3. 当进行遍历本地存储数据的时候,如果数据done为false,则todoCount++,否则doneCount++
  4. 最后修改相应的元素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() 设置或获取元素偏移

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

2.positon() 获取元素偏移

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

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

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

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

  1. 核心原理:使用animate动画返回顶部
  2. animate动画函数里面有个scrollTop属性,可以设置位置
  3. 但是元素做动画,因此$(‘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元素做动画
        })
 })

案例:品优购电梯导航

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

4.链式编程

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值