首页 前端知识 第二阶段-JQuery(一)

第二阶段-JQuery(一)

2024-04-29 11:04:04 前端知识 前端哥 210 54 我要收藏

目录

一:JQuery入门

1.1: 目标

1.2:目录

1.3: JQuery概述

1: JavaScript 库

2:  常见的JavaScript库

3: jquery的概念

3.1;JQuery的优点

1.4:jQuery的基本使用

1:jQuery的下载

2: jQuery的使用步骤

3: jQuery的顶级对象 $

4: jQuery 对象和 DOM 对象

5: jquery对象 和dom对象

二: jQuery常用API

2.1:目标

2.2:目录

2.3: JQuery基础选择器

1: jQuery基础选择器

2: Query 层级选择器

2: 知识铺垫

2.1:jQuery 设置样式

3: 隐私迭代(重要)

4: jQuery筛选选择器

5: jQuer筛选方法(重点)

6: 新浪微博下拉框

7: jQuery筛选方法(重点)

8:jQuery里面的排他思想

9: 案例 -淘宝服饰精品案例

10: 链式编程

2.4: jQuery样式操作

1: 操作css方法

2: 设置类样式方法

3: 案例:tab 栏切换

3.1:需求分析

4:类操作与className区别

2.5: JQuery效果

1: 显示隐藏效果

1.1. 显示语法规范

1.2: 显示参数

1.1: 隐藏语法规范

1.2: 隐藏参数

1.1: 切换语法规范

1.2: 切换参数

2: 滑动效果

2.1: 下滑效果语法规范

2.2: 下滑效果参数

2.1: 上滑效果语法规范

2.2: 上滑效果参数

2.1: 滑动切换效果语法规范

2.2: 滑动切换效果参数

3: 事件切换

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

4.1. 动画或效果队列

4.2:停止排队

5: 淡入淡出效果

5.1: 淡入效果语法规范

5.2:淡入效果参数

5.1:淡出效果语法规范

5.2:淡出效果参数

5.1: 淡入淡出切换效果语法规范

5.2: 淡入淡出切换效果参数

5.1: 渐进方式调整到指定的不透明度

5.2:效果参数

6:自定义动画animate

6.1: 语法

6.2: 参数

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

2.6: jQuery属性操作

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

1.1:获取属性语法

1.2: 设置属性语法

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

2.1:获取属性语法

2.2: 设置属性语法

3:数据缓存data()

3.1: 附加数据语法

3.2:获取数据语法

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

2.7: jQuery内容文本值

1. 普通元素内容html()(相当于原生inner HTML)

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

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

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

5: 案例-购物车案例模块-修改商品小计分析

html

5.1: 使用parents('选择器) 返回祖先元素(优化)

2.8: jQuery元素操作

1: 遍历元素

2: 遍历元素

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

4: 创建元素

5: 添加元素

5.1:内部添加

5.2:外部添加

6: 删除元素

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

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

2.9:  jQuery 尺寸、位置操作

1: jQuery尺寸

​编辑

2: jQuery位置

2.1: offset() 设置或获取元素偏移

2.2: position() 获取元素偏移

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

2,4:案例-带有动画的返回顶部

2.5:  案例-品优购电梯导航


一:JQuery入门

1.1: 目标

能够说出什么是jQuery

能够说出JQuery的优点

能够简单使用jQuery

能够说出DOM 对象和jQuery对象的区别

1.2:目录

jquery概述

jquery的基本使用

1.3: JQuery概述

1: JavaScript 库

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

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

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

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

为了区别之前学的js。 jquery称为js库,而js就是原生的js.

2:  常见的JavaScript库

  • jquery
  • prototype
  • YUI
  • Dojo
  • Ext JS
  • 移动端的zepto

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

总:什么是js库? 就是js文件里面存放许许多多的函数,这些函数都是为了实现某些功能,把这些函数统一放入到js文件里面去,那么这个js文件就是js库; (之后开发就直接调用里面的函数即可)

3: jquery的概念

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

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

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

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

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

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

1.4:jQuery的基本使用

1:jQuery的下载

官网地址:https://jquery.com    

版本:

1x :  兼容IE 678等低版本浏览器,官网不再更新

2x : 不兼容IE 678等低版本浏览器,官网不再更新

3x : 不兼容IE 678等低版本浏览器,是官网主要更新维护的版本(现在使用)

(用压缩后的版本,也就是product版本,因为空间更小)

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

2: jQuery的使用步骤

1:引入jQuery文件

2: 调用

3: jQuery的入口函数

$ ( function  ( ) {

       .... // 此处是页面DOM 加载完成的入口

  } ) ;

$ ( document).ready ( function ( ) {

     ...  // 此处是页面DOM加载完成的入口

 } ) ;

1: 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装。

2: 相当于原生js中的DOMContentLoaded

3: 不同于原生js中的load事件是等页面文档,外部的js文件, css文件 ,图片加载完毕才执行内部代码。

4: 更推荐使用第一种方式。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1:引入jquery -->
    <script src="jquery.mini.js"></script>

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

<body>
    <div>

    </div>

    <script>
        // $('div').hide();
        //1:方法一; 等着页面的DOM加载完毕再去执行js代码
        // $(window).ready(function () {
        //     $('div').hide();
        // });

        // 2:方法二:等着页面DOM加载完毕再去执行js代码
        $(function () {
            $('div').hide();
        });
    </script>
</body>

</html>c

3: jQuery的顶级对象 $

用$把元素包装起来,进行调用函数;

1:$ 是jQuery的别称,在代码中可以使用jQuery 代替 $ ,但一般为了方便,通常都直接使用 $.

2: $ 是 jQuery 的顶级对象,相当于原生JavaScript 中的window,把元素利用 $ 包装成jQuery对象,就可以调用jQuery的方法。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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>

4: jQuery 对象和 DOM 对象

4.1: 用原生JS获取来的对象就是DOM对象

4.2: jQuery方法获取的元素就是jQuery对象

4.3: jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入js -->
    <script src="jquery.mini.js"></script>
    <style>
        div {
            width: 300px;
            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');  //是一个jQuery 对象
        $('span'); // $('span')是一个jQuery 对象
        console.dir($('div'));

        // 3. jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法
        //3.1: dom对象和jquery对象隐藏的处理方式
        myDiv.style.display = 'none';  //dom对象只能用原生js的属性和方法
        myDiv.hide(); // myDiv是一个dom对象不能使用 jquery里面的hide方法
        $('div').style.display = 'none'; // 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法


    </script>
</body>

</html>

5: jquery对象 和dom对象

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

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

1: DOM对象转换为jQuery对象: $(DOM对象)

$ ( ' div ')

2: jQuery对象转换为DOM对象(两种方式)

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

$ (' div ').get(index)  index是索引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- muted禁音 -->
    <video src="mov.mp4" muted></video>

    <script>
        //1: Dom对象转换为 jQuery对象
        //情况一: 直接获取视频,得到就是jQuery对象
        $('video');

        //情况二:已经使用原生js  获取dom对象 ,然后转换成jquery对象
        var myvideo = document.querySelector('video');
        $(myvideo).play(); //jquery对象里面没有play这个方法 

        //2:播放
        //2.1:使用dom对象播放,比较麻烦
        myvideo.play();

        //2.2: 使用jquery对象播放;0表达页面中就一个video,下标是0
        $('video')[0].play();  //方法一
        $('video').get(0).play(); //方法二


    </script>
</body>
</html>

二: jQuery常用API

2.1:目标

  • 能够写出常用的jQuery选择器
  • 能够操作jQuery样式
  • 能够写出常用的jQuery动画
  • 能够操作jQuery属性
  • 能够操作jQuery元素
  • 能够操作jQuery元素尺寸,位置

2.2:目录

jQuery选择器

jQuery样式操作

jQuery效果

jQuery属性操作

jQuery文本属性值

jQuery元素操作

jQuery尺寸,位置操作

总: jQuery选择器(先获取dom元素) 其他的是对dom元素进行操作;

2.3: JQuery基础选择器

1: jQuery基础选择器

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

$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号

2: Query 层级选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1:引query.js对象 -->
    <script src="jquery.mini.js"></script>
</head>

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
    </ol>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>

    <script>
        //2: 调用js
        //2.1: js的入口函数
        $(function () {
             //基本选择器
            console.log($('.nav'));
             //层级选择器
            console.log($("ul li"));

        });


    </script>
</body>

</html>

2: 知识铺垫

2.1:jQuery 设置样式

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

3: 隐私迭代(重要)

  • 遍历内部DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。
  • 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
  • 总:给同一个元素相同的操作,就是隐式迭代;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 1:引入jquery.js -->
    <script src="jquery.mini.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: 隐式迭代---给相同的元素统一的操作
        //2.1: div都改为pink色
        $('div').css('background', 'pink');
        $('ul li').css('color', 'skyblue');
    </script>
</body>

</html>

4: jQuery筛选选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1:引入jquery.js -->
    <script src="jquery.mini.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>

5: jQuer筛选方法(重点)

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="jquery.mini.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($('.son').parent());

            //2:子
            // (1) 亲儿子 children()  类似子代选择器  ul>li
            $('.nav').children('p').css('color', 'red');

            //(2)可以选里面的所有的孩子,包括儿子和孙子  find() 类似于后代选择器
            $('.nav').find('p').css('color', 'pink');

        })



    </script>
</body>

</html>

6: 新浪微博下拉框

之前元素js这个下拉菜单中li都需要遍历循环进行绑定事件,但是显示用jqurey就不需要for循环进行绑定了,因为隐式迭代会对内部li进行了绑定事件。用jquery就更加简单。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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.mini.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>

        <script>

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

</html>

7: jQuery筛选方法(重点)

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.mini.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. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
            $('ol .item').siblings('li').css('color', 'red');

            // 2. 第n个元素
            var index = 2;
            // (1) 我们可以利用选择器的方式选择
            // $('ul li:eq(2)').css('color', 'blue');
            $('ul li:eq(' + index + ' )').css('color', 'blue');


            // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
            // $('ul li').eq(2).css('color', 'green');
            // $('ul li').eq(index).css('color', 'green');

            // 3. 判断是否有某个类名

            console.log($('div:first').hasClass('current'));
            console.log($('div:last').hasClass('current'));
        })

    </script>
</body>

</html>

8:jQuery里面的排他思想

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

js排他思想的区别:

   1:需要for循环,每个按钮都有循环绑定点击事件,然后给当前的按钮添加背景颜色,其他的按钮都有取消背景颜色。

 2: 而jquery中不需要for循环,因为隐式迭代,就已经内部给每个按钮绑定了点击事件。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.mini.js"></script>
</head>

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

    <script>
        $(function () {
            //1;隐式迭代,给所有的按钮都绑定了点击事件
            $('button').click(function () {
                //给当前的按钮添加背景颜色
                $(this).css('background', 'pink');

                //给其他按钮不添加背景颜色
                $(this).siblings('button').css('background', '');
            })
        })
    </script>
</body>

</html>

9: 案例 -淘宝服饰精品案例

问题: 怎么知道鼠标经过了哪个小li ?那就用索引号,获取当前的小li的索引号,并展示相对应的图片;

案例分析:

①核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏。

②需要得到当前小li 的索引号,就可以显示对应索引号的图片

③jQuery 得到当前元素索引号$(this).index()

④中间对应的图片,可以通过eq(index) 方法去选择

⑤显示元素show()隐藏元素hide()

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }

        #left,
        #content {
            float: left;
        }

        #left li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover {
            background-image: url(images/abg.gif);
        }

        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery.mini.js"> </script>

    <script>
        $(function () {
            // 1. 鼠标经过左侧的小li 
            $('#left li').mouseover(function () {
                //得到当前li的索引号
                var index = $(this).index();
                console.log(index);

            })
            // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
            $('#content div').eq(index).show();
            // 4. 让其余的图片(就是其他的兄弟)隐藏起来
            $('#content div').eq(index).siblings.hide();



        })
    </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" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
            </div>

        </div>


    </div>
</body>

</html>

10: 链式编程

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.mini.js">
    </script>
</head>

<body>
    woshi body 的文字
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>

    <script>
        $(function () {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件

            $('button').click(function () {
                // 2. 让当前元素颜色变为红色
                $(this).css('background', 'red');
                //3:其余的元素不变色
                $(this).siblings().css('background', '');
                //4:链式编程
                // 我的颜色为红色, 我的兄弟的颜色为空
                $(this).css('background', 'red').siblingsz().css('background', '');

                // 我的兄弟变为红色  ,我本身不变颜色
                $(this).siblings().css('background', 'red');

                // 最后是给我的兄弟的爸爸 body 变化颜色 
                $(this).siblings().parent().css('color', 'blue');

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

</html>c

2.4: jQuery样式操作

1: 操作css方法

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

1. 参数只写属性名,则是返回属性值

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

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

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

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.mini.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        $(function () {
            console.log($('div').css('width')); //获取值 200px
            console.log($('width', '300px'));   //修改值
            console.log($('width', 300));
            // $("div").css(height, "300px"); 属性名一定要加引号

            //对象
            $('div').css({
                width: 500,
                height: 500,
                backgroundColor: 'red'
                // 如果是复合属性则必须采取驼峰命名法,如果值不是数字,则需要加引号


            })

        })
    </script>
</body>

</html>

2: 设置类样式方法

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

1. 添加类

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

2.移除类

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

3.切换类

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.mini.js"></script>

    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            /* 添加过渡:使得动画效果更加明显 */
            transition: all 0.3s;
        }

        /* 添加类:把修改的样式统一写到一个类中;需要的时候调用即可 */
        .current {
            background-color: skyblue;
            /* 添加动画效果 */
            transform: rotate(360deg);

        }
    </style>
</head>

<body>
    <div class="current"></div>

    <script>
        $(function () {
            //1:添加类 addClass( )
            //1.1: 点击的时候就变颜色
            // $('div').click(function () {
            //     $('div').addClass('current');
            // });

            //2: 删除类 removeClass( )
            //2.1: 当div设置的类名也是current的时候,需要删除改类名
            //效果:就是开始是蓝色。点击后,删除了current,会变成粉色
            // $('div').click(function () {
            //     $(this).removeClass('current');
            // });

            //3:切换类  toggleClass()
            //效果:蓝色和粉色来回切换
            $('div').click(function () {
                $(this).toggleClass('current');
            })

        })
    </script>
</body>

</html>

3: 案例:tab 栏切换

3.1:需求分析

①点击上部的li,当前li 添加current类,其余兄弟移除类。

②点击的同时,得到当前li 的索引号

③让下部里面相应索引号的item显示,其余的item隐藏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

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

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>

    <script src="jquery.mini.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li>商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价(50000)模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>

    <script>
        $(function () {
            //1: 点击上面的li, 当前的li添加 current类(有样式),其他的兄弟要移除类
            $('.tab_list li').click(function () {
                //链式编程操作
                $(this).addClass('current').siblings().removeClass('current');
                //1.2:同时获取当前点击的li的索引号
                var index = $(this).index();
                console.log(index);

                //1.3: 获取到的被点击的li的索引号,并显示对应的相关内容
                $('.tab_con .item').eq(index).show().siblings().hide();
            });
        })
    </script>
</body>

</html>c

4:类操作与className区别

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all .3s;
        }
    </style>
    <script src="jquery.mini.js"></script>
</head>

<body>
    <div class="one"></div>

    <script>
        //js原生
        // var one = document.querySelector('.one');
        // one.className = 'two';

        //jquery
        $('.one').addClass('two');
        $('.one').removeClass('two');

    </script>
</body>

</html>

2.5: JQuery效果

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

1: 显示隐藏效果

1.1. 显示语法规范

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

1.2: 显示参数

(1)参数都可以省略,无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

1.1: 隐藏语法规范

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

1.2: 隐藏参数

(1)参数都可以省略,无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

1.1: 切换语法规范

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

1.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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            /* display: none; */
        }
    </style>

    <script src="jquery.mini.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, function () {
                    alert(2);
                })
            })


        })
    </script>

</body>

</html>

2: 滑动效果

2.1: 下滑效果语法规范

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

2.2: 下滑效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

2.1: 上滑效果语法规范

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

2.2: 上滑效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

2.1: 滑动切换效果语法规范

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

2.2: 滑动切换效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

3: 事件切换

hover([over,]out)

(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)

(2)out:鼠标移出元素要触发的函数(相当于mouseleave)

(3)如果只写一个函数,则鼠标经过和离开都会触发它

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>

    <script src="jquery.mini.js"></script>
</head>

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>

    <script>
        $(function () {
            //下滑动 slideDown ()
            $('button').eq(0).click(function () {
                $('div').slideDown();
            });

            //上滑动
            $('button').eq(1).click(function () {
                $('div').slideUp();
            });

            //切换滑动
            $('button').eq(2).click(function () {
                $('div').toggle(200);
            })
        })
    </script>

</body>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            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.mini.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 () {
            //1:鼠标经过时,下拉内容
            // $('.nav>li').mouseover(function () {
            //展示show  
            // $(this).children('ul').show();

            //下滑效果:slideDown
            // $(this).children('ul').slideDown();
            // });

            //2:鼠标离开,
            // $('.nav > li').mouseleave(function () {
            //hide隐藏    
            // $(this).children('ul').hide();

            //上滑效果:slideUp
            $(this).children('ul').slideUp();
            // });

            //3:优化1,2 
            //hover   事件切换 hover 就是鼠标经过和离开的复合写法
            //hover中用到了两个function()
            // $('.nav > li').hover(function () {
            //     $(this).children('ul').slideDown();
            // }, function () {
            //     $(this).children('ul').slideUp();
            // });

            //4: 比3还更加优化 hover slidetoggle
            $('.nav > li').hover(function () {
                $(this).children('ul').slideToggle();
            });


        });

    </script>
</body>

</html>

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

4.1. 动画或效果队列

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

4.2:停止排队

stop()

(1)stop() 方法用于停止动画或效果。

(2)注意:stop() 写到动画或者效果的前面,相当于停止结束上一次的动画。

(3) 谁做动画,谁就加stop();

(4);动画都有这种问题存在,需要添加stop();

DOCTYPE html>
<html lang="en">

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

                //stop 方法写在动画的后面就表示停止动画效果;
                // $(this).children('ul').slideToggle().stop();
            });
        })
    </script>
</body>

</html>

5: 淡入淡出效果

5.1: 淡入效果语法规范

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

5.2:淡入效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

5.1:淡出效果语法规范

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

5.2:淡出效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

5.1: 淡入淡出切换效果语法规范

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

5.2: 淡入淡出切换效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

5.1: 渐进方式调整到指定的不透明度

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

5.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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>

    <script src="jquery.mini.js"></script>
</head>

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>

    <script>
        $(function () {

            //1:淡入效果
            $('button').eq(0).click(function () {
                $('div').fadeIn(1000);
            });

            //2:淡出效果
            $('button').eq(1).click(function () {
                $('div').fadeOut(1000);
            });

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

            //4:修改透明度
            $('button').eq(3).click(function () {
                $('div').fadeTo(1000, 0.3);
            })


        })
    </script>
</body>

</html>
//高亮图片

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="jquery.mini.js"></script>

    <SCript>
        $(function () {
            //1:鼠标经过某张图片时候,其余的图片颜色变暗
            //鼠标进入的时候,其他的li标签透明度:0.5
            $('.wrap li').hover(function () {
                $(this).siblings().stop().fadeTo(100, 0.5);
            }, function () {
                // 鼠标离开,其他li 透明度改为 1
                $(this).siblings().stop().fadeTo(100, 1);
            })
        })
    </SCript>
</head>

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

</html>

6:自定义动画animate

jquery封装的animate的函数功能更强大;

6.1: 语法

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

6.2: 参数

(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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

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

    <script src="jquery.mini.js"></script>
</head>

<body>
    <button>动起来</button>
    <div></div>

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

</html>c
6.3: 案例 -王者荣耀手风琴效果分析

布局分析:

 1: 一个大盒子king,有一张背景图片。

2: 大盒子里面装了ul 和几个小 li

3: 每个li里面有a链接

4: a链接里面包含一个大图片和一个小图片

效果分析:

  变化一:

  1:每个li的宽度不一样,第一个是224px,其他的就是69px

  2: 当鼠标放在某个li上,当前的li的宽度会变宽,变成224px;其他的图片宽度会变成69px;

变化二:

  1: 当鼠标放在某个li上,当前的图片会变大(小图片看不见了。大图片显示出来了),其他兄弟的图片会变小;

总:

①鼠标经过某个小li有两步操作:

②当前小li 宽度变为224px,同时里面的小图片淡出,大图片淡入

③其余兄弟小li宽度变为69px,小图片淡入,大图片淡出

<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>
 
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
         
        img {
            display: block;
        }
         
        ul {
            list-style: none;
        }
         
        .king {
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
         
        .king ul {
            overflow: hidden;
        }
         
        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
         
        .king li.current {
            width: 224px;
        }
         
        .king li.current .big {
            display: block;
        }
         
        .king li.current .small {
            display: none;
        }
         
        .big {
            width: 224px;
            display: none;
        }
         
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>
 
</head>
 
<body>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 鼠标经过某个小li 有两步操作:
            $(".king li").mouseenter(function() {
                // 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
                $(this).stop().animate({
                    width: 224

                    //当前li的孙子img中的小图片淡出,大图片淡入
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
 
 
 
        });
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>
 
    </div>
 
 
 
 
</body>
 
</html>

2.6: jQuery属性操作

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

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

1.1:获取属性语法

prop(''属性'')

1.2: 设置属性语法

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

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

用户自己给元素添加的属性,我们称为自定义属性。比如给div 添加index =“1”。

2.1:获取属性语法

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

2.2: 设置属性语法

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

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

3:数据缓存data()

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

3.1: 附加数据语法

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

3.2:获取数据语法

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="jquery.mini.js"></script>
</head>

<body>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>

    <script>
        $(function () {
            //1. element.prop("属性名") 获取元素固有的属性值
            $('a').prop('href');
            console.log($('a').prop('href'));

            //2: 设置(修改)元素固有属性的属性值
            $('a').prop('title', '我们都挺好');
            console.log($('a').prop('title'));

            //3:查看复选框改变的时候的值状态
            $('input').change(function () {
                console.log($(this).prop('checked'));  //false  true
            });

            // console.log($('div').prop('index'));//自定义属性要用attr获取

            // 4. 元素的自定义属性 我们通过 attr()
            console.log($('div').attr('index'));  //获取属性值

            $('div').attr('index', 5); //修改属性值
            console.log($('div').attr('index'));

            console.log($('div').attr('data-index'));

            // 5. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));

            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));



        })
    </script>
</body>

</html>

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

案例分析:

①全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走。

②因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。

③把全选按钮状态赋值给3小复选框就可以了。

④当我们每次点击小的复选框按钮,就来判断:

⑤如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。⑥:checked 选择器:checked 查找被选中的表单元素。

js

$(function(){
    //1:全选 全不选功能模块
    //就是把全选按钮(checkall) 的状态赋值给 三个小的按钮 (j-checkbox) 就可以了
    //事件可以使用change
    $('.checkall').change(function(){
        // $('this').prop('checked');
        // console.log($('this').prop('checked'));

        //.Checkall是因为上下都有一个全选按钮,并且都是同一个类名,如果全部选或不选 则两个全选按钮都要一致
        //把全选按钮的状态赋值给三个小按钮
        $('.j-checkbox , .checkall').prop('cheched',$('this').prop('checked') )
    })
})

需求:

第一次打开购物车,是没有全部选择的,应该是随便点击三个小按钮,当点击第三个按钮的时候,则是全部按钮都选择了,那么上面和下面的全选按钮就要自动的勾选上;

分析:

当小按钮的个数不等于3,那么全选按钮就不应该选;当每次点击小按钮的时候就判断,看到底小按钮有多少个被选中了,如果刚好等于3,则全选按钮就勾选上;

   怎么知道有几个小按钮被选中呢? 用:checked 选择器

总:

③把全选按钮状态赋值给3小复选框就可以了。

④当我们每次点击小的复选框按钮,就来判断:

⑤如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。⑥:checked 选择器:checked 查找被选中的表单元素。

$(function () {
    //1:全选 全不选功能模块
    //就是把全选按钮(checkall) 的状态赋值给 三个小的按钮 (j-checkbox) 就可以了
    //事件可以使用change
    $('.checkall').change(function () {
        // $('this').prop('checked');
        // console.log($('this').prop('checked'));

        //.Checkall是因为上下都有一个全选按钮,并且都是同一个类名,如果全部选或不选 则两个全选按钮都要一致
        //把全选按钮的状态赋值给三个小按钮
        $('.j-checkbox , .checkall').prop('cheched', $('this').prop('checked'))
    });

    //2: 如果复选框被选中的个数等于3(小按钮的个数),就应该把全选按钮选上,否则全选按钮不选
    $('.j-checkbox').change(function () {
        //   if(被选中的小的复选框的个数 === 3){
        //     就要选择全选按钮
        //   } else {
        //     不要选中全选按钮
        //   }

        console.log($('.j-checkbox:checked'));  //得到对象,其中有length属性
        console.log($('.j-checkbox:checked').length);  //得到被选中的小复选框的个数
        $('.j-checkbox').length;  //这个是所有的小复选框的个数

        if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
            $('.checkall').prop('checked', true);
        } else {
            $('.checkall').prop('checked', false);
        }
    });
});

2.7: jQuery内容文本值

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

1. 普通元素内容html()(相当于原生inner HTML)

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

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

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

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

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

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

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

val()   // 获取表单的值

val(''内容'')  // 设置表单的值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="jquery.mini.js"></script>
</head>

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">

    <script>
        // 1. 获取设置元素内容 html()
        console.log($('div').html());
        $('div').html('123'); //修改内容

        // 2. 获取设置元素文本内容 text()
        console.log($('div').text());
        $('div').text('123');

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

    </script>
</body>

</html>

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

需求:

     点击数量+ ,那么数字就+1; 点击- ,数量-1;

分析:

   核心思路:当文本框的数量是1,那么点击+,数量+1,并且把2赋值给文本框;  每点击一次都把最新的值赋值给文本框;

  注意1:只能增加本商品的数量,怎么处理?点击哪个按钮的+ /  - ,那么就把值赋值给它旁边的兄弟(文本框发生变化),其余的不变;

  注意2:原来的变量初始值是多少?变量的初始值也是文本框的值,也就是在这个值上面进行变化。

   减--(decrement)  的思路一样,但是如果文本框的值是1,就不能再减了。

//js
$(function () {
    // 1: 增减商品数量模块  首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
    $('.increment').click(function () {
        //得到该兄弟文本框的值
        var n = $(this).siblings('.itxt').val();
        n++; //点击+号一次就累加
        $(this).siblings('.itxt').val(n); //把新值赋值给文本框
    });

    //2: 
    $('.decrement').click(function(){
        var n = $(this).siblings('.itxt').val();
        //如果数量减到1,就不能再减了
        if(n == 1){
            return false;
        }
        n--;
        $(this).siblings('.itxt').val(n);
    })

})

5: 案例-购物车案例模块-修改商品小计分析

注意:找结构很重要,小计的单价与+/-的关系一定要找清楚;单价是它(当前)的父级的父级的兄弟;(如果直接写单价的类名,则是修改所有商品的单价);但这样会要写很多代码,可以优化使用parents('选择器);

处理的问题1:使得小数点后面保留两位小数,怎么做?可以使用toFixed(2)方法来保留几位小数;

处理的问题2: 如果文本框(表单里面)的数量可以直接修改,比如2直接改成100 ,小计是不会变的;那么就要让小计重新计算,用表单change事件;并且用最新的表单内的值乘以单价即可,但还是当前商品小计;

总·:

①核心思路:每次点击+号或者-号,根据文本框的值乘以当前商品的价格就是商品的小计

②注意1:只能增加本商品的小计,就是当前商品的小计模块(p-sum)

③修改普通元素的内容是text() 方法

④注意2:当前商品的价格,要把¥符号去掉再相乘截取字符串substr(1)

⑤parents(‘选择器’) 可以返回指定祖先元素

⑥最后计算的结果如果想要保留2位小数通过toFixed (2) 方法

⑦用户也可以直接修改表单里面的值,同样要计算小计。用表单change事件

⑧用最新的表单内的值乘以单价即可但是还是当前商品小计

$(function () {
    // 1: 增减商品数量模块  首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
    $('.increment').click(function () {
        //得到该兄弟文本框的值
        var n = $(this).siblings('.itxt').val();

        n++; //点击+号一次就累加
        $(this).siblings('.itxt').val(n); //把新值赋值给文本框

        //3: 计算小计模块  根据文本框的值 乘以 当前商品的价格 就是 商品的小计

        //当前的商品价格单价
        // var price = $(this).parent().parent().siblings('.p-price').html();
        //parents('.p-num')可以返回固定的祖先元素
        var price = $(this).parents('.p-num').siblings('.p-price').html();
        console.log(price);
        //获取的单价有单位(¥),所以要去掉,为了后面的小计
        price = price.substr(1);

        //toFixed(2)保留两位小数
        var pr = (p * n).toFixed(2);
        //小计并复制
        // $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
        $(this).parents('.p-num').siblings('.p-sum').html('¥' + pr);
    });

    //2: 增减商品数量模块  首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
    $('.decrement').click(function () {
        var n = $(this).siblings('.itxt').val();
        //如果数量减到1,就不能再减了
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings('.itxt').val(n);

        //3: 计算小计模块  根据文本框的值 乘以 当前商品的价格 就是 商品的小计

        //当前的商品价格单价
        // var price = $(this).parent().parent().siblings('.p-price').html();
        //优化上面一层一层的找
        var price = $(this).parents('.p-num').siblings('.p-price').html();

        //获取的单价有单位(¥),所以要去掉,为了后面的小计
        price = price.substr(1);

        //小计并复制
        // $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
        $(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));
    });

    //4: 用户修改文本框的里面的值  乘以  当前商品的单价
    $('.itxt').change(function () {
        //4.1: 先得到文本框的值
        var n = $(this).val();

        //4.2: 得到当前商品的单价
        var price = $(this).parents('.p-num').siblings('.p-price').html();

        //4.3: 取掉单位
        price = price.substr(1);

        //4.4: 修改小计
        $(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));
    })


})
html
 </div>
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全选
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">单价</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">小计</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" checked class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                        </div>
                        <div class="p-price">¥12.60</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">¥12.60</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p2.jpg" alt="">
                            </div>
                            <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
                        </div>
                        <div class="p-price">¥24.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">¥24.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p3.jpg" alt="">
                            </div>
                            <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
                        </div>
                        <div class="p-price">¥29.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">¥29.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                </div>
 
                <!-- 结算模块 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全选
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
                        <a href="javascript:;" class="clear-all">清理购物车</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已经选<em>1</em>件商品</div>
                        <div class="price-sum">总价: <em>¥12.60</em></div>
                        <div class="btn-area">去结算</div>
                    </div>
                </div>
            </div>
        </div>
 
    </div>

5.1: 使用parents('选择器) 返回祖先元素(优化)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="jquery.mini.js"></script>
</head>

<body>
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">我不容易</div>
            </div>
        </div>
    </div>

    <script>
        //1: 一级一级的找到祖先元素
        console.log($('.four').parent().parent().parent());

        //2:优化一级一级网上找
        console.log($('.four').parents());

        console.log($('.four').parents('.one'));
    </script>
</body>

</html>

2.8: jQuery元素操作

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

1: 遍历元素

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

语法1:

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

1. each() 方法遍历匹配的每一个元素。主要用DOM处理。each 每一个

2. 里面的回调函数有2个参数:index 是每个元素的索引号;demEle 是每个DOM元素对象,不是jquery对象

3. 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象$(domEle)

2: 遍历元素

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

语法2:

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

1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象

2. 里面的函数有2个参数:index 是每个元素的索引号;element 遍历内容

区别:如果遍历dom对象,用each() 方法最合适;如果想要 遍历数据,比如对象,数组,用$.each()更合适;

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="jquery.mini.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>

        $(function () {
            //1:隐式方法,就是同一个元素进行同一个操作
            // $('div').css('color', 'pink');

            var sum = 0;

            //定义一个数组
            var arr = ['green', 'pink', 'red'];

            //2:同一个元素,进行不同的操作,就用each遍历
            // 如果针对于同一类元素做不同操作,需要用到遍历元素(类似for,但是比for强大)
            $('div').each(function (index, domEle) {
                //2.1: index获取每个元素的索引号(each里面就已经给每个元素索引号了)
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                console.log($(this).index());

                //2.2: domEle是dom元素,不能调用css(jquery的方法)
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                // domEle.css('color', 'red');   //报错

                //应该先把dom转换成jquery对象才行
                // $(domEle).css('color', 'red');

                //实现不同的操作,需要定义一个数组
                $(domEle).css('color', arr[index]);

                //3:把每个元素的值累计
                sum += parseInt($(domEle).text());
                // console.log(sum);
            });

            console.log(sum);

            //4:$.each() 方法遍历元素 主要用于遍历数据,处理数据
            $.each($('div'), function (index, ele) {
                console.log(index);
                console.log(ele);
            });

            $.each(arr, function (i, ele) {
                console.log(i);
                console.log(ele);
            });

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

</html>

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

①核心思路:把所有文本框里面的值相加就是总计数量。总额同理

②文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个变量,相加即可

③点击+号-号,会改变总计和总额,如果用户修改了文本框里面的值同样会改变总计和总额

④因此可以封装一个函数求总计和总额的,以上2个操作调用这个函数即可。

⑤注意1:总计是文本框里面的值相加用val()总额是普通元素的内容用text()

⑥要注意普通元素里面的内容要去掉¥并且转换为数字型才能相加

注意:当刷新页面的时候,总计和总价也要计算的;也就是当第一次打开页面,调用下面总计和总价的函数即可;

$(function () {
    // 1: 增减商品数量模块  首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
    $('.increment').click(function () {
        //得到该兄弟文本框的值
        var n = $(this).siblings('.itxt').val();

        n++; //点击+号一次就累加
        $(this).siblings('.itxt').val(n); //把新值赋值给文本框

        //3: 计算小计模块  根据文本框的值 乘以 当前商品的价格 就是 商品的小计

        //当前的商品价格单价
        // var price = $(this).parent().parent().siblings('.p-price').html();
        //parents('.p-num')可以返回固定的祖先元素
        var price = $(this).parents('.p-num').siblings('.p-price').html();
        console.log(price);
        //获取的单价有单位(¥),所以要去掉,为了后面的小计
        price = price.substr(1);

        //toFixed(2)保留两位小数
        var pr = (p * n).toFixed(2);
        //小计并复制
        // $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
        $(this).parents('.p-num').siblings('.p-sum').html('¥' + pr);

        //调用总计
        getSum();
    });

    //2: 增减商品数量模块  首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
    $('.decrement').click(function () {
        var n = $(this).siblings('.itxt').val();
        //如果数量减到1,就不能再减了
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings('.itxt').val(n);

        //3: 计算小计模块  根据文本框的值 乘以 当前商品的价格 就是 商品的小计

        //当前的商品价格单价
        // var price = $(this).parent().parent().siblings('.p-price').html();
        //优化上面一层一层的找
        var price = $(this).parents('.p-num').siblings('.p-price').html();

        //获取的单价有单位(¥),所以要去掉,为了后面的小计
        price = price.substr(1);

        //小计并复制
        // $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
        $(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));

        //调用总计
        getSum();
    });

    //4: 用户修改文本框的里面的值  乘以  当前商品的单价
    $('.itxt').change(function () {
        //4.1: 先得到文本框的值
        var n = $(this).val();

        //4.2: 得到当前商品的单价
        var price = $(this).parents('.p-num').siblings('.p-price').html();

        //4.3: 取掉单位
        price = price.substr(1);

        //4.4: 修改小计
        $(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));

        //4.5: 调用计算总件数和总金额的函数
        getSum();  //当用户修改了文本框的数量,就用调用总计
    });

    //5: 计算购物车的商品总数量和总金额模块

    getSum();   //6:页面刷新(第一次打开的时候)先调用函数进行总计和总价

    //5.1: 封装一个函数
    function getSum() {
        var count = 0;  //计算总件数
        var money = 0;  //计算总价钱

        //计算总件数
        $('.itxt').each(function (index, ele) {
            //$(ele).val()字符型 要转成int型
            count += parseInt($(ele).val());  //ele是文本框(表单)的内容
        });
        //赋值给总件数
        $('.amount-sum em').text(count);

        //计算总价钱
        //遍历每个小计
        $('.p-sum').each(function (inex, ele) {
            //获取每个小计的值   取消¥substr(1)    $(ele).text().substr(1)是字符串,用parseFloat转换成符点数 
            money += parseFloat($(ele).text().substr(1));
        });
        //赋值给总价   保留两位小数toFixed(2)
        $('.price-sum em').text('¥'+ money.toFixed(2));

    };

    //
})

4: 创建元素

语法

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

动态的创建了一个<li>

5: 添加元素

5.1:内部添加

element.append(''内容'');

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

element.prepend(''内容'')

把内容放入匹配元素内部最前面

5.2:外部添加

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

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

①内部添加元素,生成之后,它们是父子关系。

②外部添加元素,生成之后,他们是兄弟关系。

6: 删除元素

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

element.empty()  // 删除匹配的元素集合中所有的子节点

element.html('''')  //清空匹配的元素内容

①remove 删除元素本身。

②empt() 和html('''') 作用等价,都可以删除元素里面的内容,只不过html 还可以设置内容。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
 
<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
            // 2. 添加元素
 
            // (1) 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
 
            // (2) 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面内容
 
        })
    </script>
</body>
 
</html>

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

需求:每个小商品后面都有一个删除按钮,点击一下可以删除商品;还有一个删除选中的商品,就是商品前面打了勾的就要删除;还有一个是清理购物车,就是清除所有的商品。

   注意;每次清除或者删除商品的时候,都要重新计算下总价和总计(调用该函数);

①核心思路:选中的商品添加背景,不选中移除背景即可

②全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景

③小的复选框点击:如果是选中状态,则当前商品添加背景,否则移除背景

④这个背景,可以通过类名修改,添加类和删除类

$(function () {
    // 1: 增减商品数量模块  首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
    $('.increment').click(function () {
        //得到该兄弟文本框的值
        var n = $(this).siblings('.itxt').val();

        n++; //点击+号一次就累加
        $(this).siblings('.itxt').val(n); //把新值赋值给文本框

        //3: 计算小计模块  根据文本框的值 乘以 当前商品的价格 就是 商品的小计

        //当前的商品价格单价
        // var price = $(this).parent().parent().siblings('.p-price').html();
        //parents('.p-num')可以返回固定的祖先元素
        var price = $(this).parents('.p-num').siblings('.p-price').html();
        console.log(price);
        //获取的单价有单位(¥),所以要去掉,为了后面的小计
        price = price.substr(1);

        //toFixed(2)保留两位小数
        var pr = (p * n).toFixed(2);
        //小计并复制
        // $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
        $(this).parents('.p-num').siblings('.p-sum').html('¥' + pr);

        //调用总计
        getSum();
    });

    //2: 增减商品数量模块  首先声明一个变量,当我们点击+号(increment),就让这个值++ ,然后赋值给文本框(.itxt)
    $('.decrement').click(function () {
        var n = $(this).siblings('.itxt').val();
        //如果数量减到1,就不能再减了
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings('.itxt').val(n);

        //3: 计算小计模块  根据文本框的值 乘以 当前商品的价格 就是 商品的小计

        //当前的商品价格单价
        // var price = $(this).parent().parent().siblings('.p-price').html();
        //优化上面一层一层的找
        var price = $(this).parents('.p-num').siblings('.p-price').html();

        //获取的单价有单位(¥),所以要去掉,为了后面的小计
        price = price.substr(1);

        //小计并复制
        // $(this).parent().parent().siblings('.p-sum').html("¥" + price * n);
        $(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));

        //调用总计
        getSum();
    });

    //4: 用户修改文本框的里面的值  乘以  当前商品的单价
    $('.itxt').change(function () {
        //4.1: 先得到文本框的值
        var n = $(this).val();

        //4.2: 得到当前商品的单价
        var price = $(this).parents('.p-num').siblings('.p-price').html();

        //4.3: 取掉单位
        price = price.substr(1);

        //4.4: 修改小计
        $(this).parents('.p-num').siblings('.p-sum').html('¥' + (p * n).toFixed(2));

        //4.5: 调用计算总件数和总金额的函数
        getSum();  //当用户修改了文本框的数量,就用调用总计
    });

    //5: 计算购物车的商品总数量和总金额模块

    getSum();   //6:页面刷新(第一次打开的时候)先调用函数进行总计和总价

    //5.1: 封装一个函数
    function getSum() {
        var count = 0;  //计算总件数
        var money = 0;  //计算总价钱

        //计算总件数
        $('.itxt').each(function (index, ele) {
            //$(ele).val()字符型 要转成int型
            count += parseInt($(ele).val());  //ele是文本框(表单)的内容
        });
        //赋值给总件数
        $('.amount-sum em').text(count);

        //计算总价钱
        //遍历每个小计
        $('.p-sum').each(function (inex, ele) {
            //获取每个小计的值   取消¥substr(1)    $(ele).text().substr(1)是字符串,用parseFloat转换成符点数 
            money += parseFloat($(ele).text().substr(1));
        });
        //赋值给总价   保留两位小数toFixed(2)
        $('.price-sum em').text('¥' + money.toFixed(2));

    };

    //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();
    });
})

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

①核心思路:选中的商品添加背景,不选中移除背景即可

②全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景

③小的复选框点击:如果是选中状态,则当前商品添加背景,否则移除背景

④这个背景,可以通过类名修改,添加类和删除类

$(function () {
    //1:全选 全不选功能模块
    //就是把全选按钮(checkall) 的状态赋值给 三个小的按钮 (j-checkbox) 就可以了
    //事件可以使用change
    $('.checkall').change(function () {
        // $('this').prop('checked');
        // console.log($('this').prop('checked'));

        //.Checkall是因为上下都有一个全选按钮,并且都是同一个类名,如果全部选或不选 则两个全选按钮都要一致
        //把全选按钮的状态赋值给三个小按钮
        $('.j-checkbox , .checkall').prop('cheched', $('this').prop('checked'));

        //3: 给商品添加背景颜色
        //点击全选(checked),就给所有的商品添加背景颜色,背景颜色用类
        if ($(this).prop('checked')) {
            //让所有的商品添加 check-cart-item 类名
            $('.cart-item').addClass('check-cart-item');
        } else {
            //移除 check-cart-item
            $('.cart-item').removeClass('check-cart-item');
        }

    });

    //2: 如果复选框被选中的个数等于3(小按钮的个数),就应该把全选按钮选上,否则全选按钮不选
    $('.j-checkbox').change(function () {
        //   if(被选中的小的复选框的个数 === 3){
        //     就要选择全选按钮
        //   } else {
        //     不要选中全选按钮
        //   }

        console.log($('.j-checkbox:checked'));  //得到对象,其中有length属性
        console.log($('.j-checkbox:checked').length);  //得到被选中的小复选框的个数
        $('.j-checkbox').length;  //这个是所有的小复选框的个数

        if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
            $('.checkall').prop('checked', true);
        } else {
            $('.checkall').prop('checked', false);
        }

        //3:(checked),就给所有的商品添加背景颜色,背景颜色用类
        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');
        }
    });
});

2.9:  jQuery 尺寸、位置操作

1: jQuery尺寸

  • 以上参数为空,则是获取相应值,返回的是数字型。
  • 如果参数为数字,则是修改相应值。
  • 参数可以不必写单位。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>

    <script src="jquery.mini.js"></script>
</head>

<body>
    <div></div>

    <script>
        $(function () {
            // 1. width() / height() 获取设置元素 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>
</body>

</html>

2: jQuery位置

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

2.1: offset() 设置或获取元素偏移

①offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。

②该方法有2个属性left、top 。offset().top用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。

③可以设置元素的偏移:offset({ top: 10, left: 30 });

2.2: position() 获取元素偏移

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

②该方法有2个属性left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。

③该方法只能获取。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }

        .son {
            width: 150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>

    <script src="jquery.mini.js"></script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>

    <script>
        $(function () {
            // 1. 获取设置距离文档的位置(偏移) offset
            console.log($('.son').offset());
            console.log($('.son').offset().top);  //获取该元素到文档的上距离

            //修改值(对象的值)
            $('.son').offset({
                top: 200,
                left: 200
            });

            // 2. 获取距离带有定位父级位置(偏移) position   如果没有带有定位的父级,则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($('.son').position());
            //不能设置高宽距离
            $('.son').position({
                top: 200,
                left: 200
            });
        })
    </script>
</body>

</html>
2.3:  scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

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

②不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。

2,4:案例-带有动画的返回顶部

①核心原理:使用animate动画返回顶部。

②animate动画函数里面有个scrollTop 属性,可以设置位置

③但是是元素做动画,因此$(“body,html”).animate({scrollTop: 0})

animate是元素做动画,但document不是元素,所以要把document修改成dom元素 $('body , html ' );

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }

        .back {
            width: 50px;
            height: 50px;
            background-color: pink;

            position: fixed;
            right: 10px;
            bottom: 100px;

            display: none;


        }

        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>

    <script src="jquery.mini.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container"></div>

    <script>
        $(function () {

            //0;设置刷新页面/第一次进入页面时滚动条就在距离页面100的距离
            $(document).scrollTop(100);

            //1:获取盒子与页面顶部的距离
            var boxDistance = $('.container').offset().top;
            // console.log(boxDistance);

            //2:页面滚动事件
            $(window).scroll(function () {
                //2: 判断 如果卷进去的距离 >= boxDistance,返回顶部的盒子就显示出来
                // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
                console.log($(document).scrollTop());  //页面的滚动(卷入/出)

                if ($(document).scrollTop() >= boxDistance) {
                    $('.back').fadeIn();
                } else {
                    $('.back').fadeOut();
                }
            });

            //3: 返回顶部
            $('.back').click(function () {
                // $(document).scrollTop(0);  //直接返回顶部,但是用动画效果是最好的

                $('body , html').animate({
                    scrollTop: 0
                });

                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画

            })

        })

    </script>

</body>

</html>
2.5:  案例-品优购电梯导航

功能一:  当页面滚动到今日推荐 模块。,就让电梯导航显示出来 

实现:

   1:先把电梯导航栏隐藏,当页面滚动到今日推荐·这个模块然后显示出来即可;

   2: 判断-如果 页面滚动的距离 >= 今日推荐到顶部的距离 ,则电梯导航栏就显示出来,否则就隐藏;

//css


/*电梯导航*/
 
.fixedtool {
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -676px;
    width: 66px;
    background-color: #fff;
    /* 功能一 */
    display: none;
}
//js

$(function(){
    // 一:功能·1

    //今日推荐到顶部的距离
    var toolTop = $('.recommend').offset().top;
 
   //页面滚动事件
   $(window).scroll(function(){
    //判断
    if($(document).scrollTop() >= toolTop){
        $('.fixedtool').fadeIn();
    } else {
        $('.fixedtool').fadeOut();
    }
   })
})

功能二:点击电梯导航中的内容,页面就可以滚动到相应内容区域

实现:

   电梯导航栏中的内容需要做点击事件,里面有四个内容(盒子):家用电器,手机通讯,电脑办公,精品家具,这样就需要写4个点击事件。如果有100个,那么就要写100个点击事件  ,这样就会很麻烦,这里就需要一种很快的方法来实现;

   2: 核心算法:因为电梯导航模块和内容区域模块是一一对应的;而且导航栏的内容(左)盒子与具体内容(右)的盒子是一一对应的;可以把导航栏中的盒子全部获取,然后做一个点击事件(但是最麻烦的是当点击某个盒子,页面应该怎么样滚动到对应的具体盒子?)

  3; 按道理当点击导航栏第一个盒子,那么右边就要跳转到对应的第一个内容盒子(计算第一个盒子的offsetTop值),点击导航栏第二个盒子,那么右边就要跳转到对应的第二个内容的盒子(计算第二个盒子的offsetTop值);

  4: 怎么知道点了导航栏的第几个盒子?可以通过索引号得知;只要做了点击事件就可以得到对应的索引号,通过索引号就可以把右边对应的内容大盒子的选择出来,然后计算出该内容大盒子的offsetTop值,这就是页面要滚动的对应的地方了;

    疑问:为什么是计算offsetTOp值,因为展示的内容肯定是从最开始显示,就是盒子的最顶部开始展示,然后往下滑;

  5: 然后就执行动画即可;(动画一定要排队stop)

总:导航栏盒子全部添加点击事件,然后获得索引号,根据索引号找到对应内容区的盒子,然后计算出内容区盒子的offsetTop值;

补充: 当点击到某个小li,导航栏的内容时,背景颜色为红色;

//js


 //功能二:.fixedtool li 导航栏的盒子  ;floor w 内容区域的盒子
    //2: 点击电梯导航页面可以滚动到相对应内容区域
    $('.fixedtool li').click(function () {
        console.log($(this).index());  //获取索引号


        //当我们每次点击小li 就需要计算出页面要去往的位置
        //选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $('floor w').eq($(this).index()).offset().top;

        //页面动画滚动效果
        $('body, html').stop().animate({
            screenTop: current
        })


        //补充:点击之后,让当前的小li 添加current 类名,其他兄弟移除current类名
        $(this).addClass('current').siblings().removeClass();
    })
})

功能三:问题: 当刷新一下页面,电梯导航就不见了

  原因:功能一,当页面滚动的时候,才让这个导航栏显示或者隐藏;所以如果不滚动页面,那么刷新页面,导航栏是不显示的;所以需要把功能一中的判断显示导航栏的代码进行封装;当页面加载(刷新)就调用这个函数;当页面滚动的时候也调用一次这个函数;

//js

$(function () {
    // 一:功能·1

    //今日推荐到顶部的距离
    var toolTop = $('.recommend').offset().top;

    //1;页面加载刷新就调用一次,那么只要内容区域>= toolTop,那么也会显示导航栏
   toggleTool();

    //封装函数
    function toggleTool() {
        //判断
        if ($(document).scrollTop() >= toolTop) {
            $('.fixedtool').fadeIn();
        } else {
            $('.fixedtool').fadeOut();
        }
    }

    //页面滚动事件
    $(window).scroll(function () {
        // //判断
        // if ($(document).scrollTop() >= toolTop) {
        //     $('.fixedtool').fadeIn();
        // } else {
        //     $('.fixedtool').fadeOut();
        // }

        //2:页面滚动也加载刷新一次
        toggleTool();
    });

功能四:当页面滚动到哪个页面,电梯导航栏就会凸显出对应的导航栏的内容;

(当我们页面滚动到内容区域某个模块,左侧电梯导航,相对应的小li模块,也会添加current类,兄弟移除current类;)

分析:触发的事件是页面滚动,因此这个功能要写到页面滚动事件里面

     1:怎么知道滚动到了哪个内容的盒子?用each去遍历 内容区域的大模块;利用eanch中参数index,ele可以得到索引号和内容;

    2: 判断条件: 被卷去的头部大于等于内容区域里面的每个模块offset().top,就可以拿到对应的索引号;也就是说当页面滚动大于等于第一个盒子的offset().top值,说明进入到了第一个盒子;以此类推

    3: 利用这个索引号找到相应的电梯导航小li,并添加类,其他兄弟移除current


    //页面滚动事件
    $(window).scroll(function () {
        // //判断
        // if ($(document).scrollTop() >= toolTop) {
        //     $('.fixedtool').fadeIn();
        // } else {
        //     $('.fixedtool').fadeOut();
        // }

        //2:页面滚动也加载刷新一次
        toggleTool();


        //功能四:
        $('.floor .w').each(function (index, ele) {
            //(ele).offset().top 内容的最顶部
            if ($(document).screenTop() >= $(ele).offset().top) {
                console.log(i);

                //根据inde找到对应的导航栏li
                $('.fixedtool li').eq(index).addClass('current').siblings().removeClass();
            }
        })
    });

 功能五:有bug需要处理-- 点击导航栏的第三个盒子,他会从当前的位置,一个一个移动到点击的第三个盒子上,而不是直接到第三个盒子

   原因:因为功能二,只要点击操作,就会让页面滚动起来,一旦滚动就会触发前面的$(window). scroll ,那就会出现多次滚动的效果;

  解决: 当我们点击了小li  此时就不需要执行 页面滚动事件里面的li 的背景选择 添加 current ;就可以用节流阀(互斥锁),就是可以决定什么时候开(用),什么时候关;

      1: 添加判断,如果flag是正确的,那 就背景添加颜色,错误的就不执行;

     2: 什么是错误的,当点击小li,那就flag变成false,不执行背景颜色的添加

$(function () {
    // 一:功能·1

     //功能五: 节流阀  互斥锁 
     var flag = true;

    //今日推荐到顶部的距离
    var toolTop = $('.recommend').offset().top;

    //功能三
    //1;页面加载刷新就调用一次,那么只要内容区域>= toolTop,那么也会显示导航栏
    toggleTool();

    //封装函数
    function toggleTool() {
        //判断
        if ($(document).scrollTop() >= toolTop) {
            $('.fixedtool').fadeIn();
        } else {
            $('.fixedtool').fadeOut();
        }
    }

    //页面滚动事件
    $(window).scroll(function () {
        // //判断
        // if ($(document).scrollTop() >= toolTop) {
        //     $('.fixedtool').fadeIn();
        // } else {
        //     $('.fixedtool').fadeOut();
        // }

        //2:页面滚动也加载刷新一次
        toggleTool();


        //功能四:
        if (flag) {
            $('.floor .w').each(function (index, ele) {
                //(ele).offset().top 内容的最顶部
                if ($(document).screenTop() >= $(ele).offset().top) {
                    console.log(i);

                    //根据inde找到对应的导航栏li
                    $('.fixedtool li').eq(index).addClass('current').siblings().removeClass();
                }
            })
        }
    });


    //功能二:.fixedtool li 导航栏的盒子  ;floor w 内容区域的盒子
    //2: 点击电梯导航页面可以滚动到相对应内容区域

    $('.fixedtool li').click(function () {

        flag = flase;  //不会执行了,但会出现问题;所以等动画完后,再改为true,然后就会执行功能四里面的判断

        console.log($(this).index());  //获取索引号


        //当我们每次点击小li 就需要计算出页面要去往的位置
        //选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $('floor w').eq($(this).index()).offset().top;

        //页面动画滚动效果
        $('body, html').stop().animate({
            screenTop: current
        }, function () {
            flag = true; //
        });

        //补充:点击之后,让当前的小li 添加current 类名,其他兄弟移除current类名
        $(this).addClass('current').siblings().removeClass();
    })
})
//js

$(function() {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
    toggleTool();
 
    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }
 
    $(window).scroll(function() {
        toggleTool();
        // 3. 页面滚动到某个内容区域,左侧电梯导航小li相应添加和删除current类名
 
 
        if (flag) {
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
 
                }
            })
        }
 
 
 
    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        flag = false;
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 点击之后,让当前的小li 添加current 类名 ,姐妹移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
})

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6281.html
标签
评论
发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML5和CSS3新特性

2024-04-16 17:04:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!