试试jQuery

使用jQuery

  1. 引入文件（官网下载）
  2. 使用jQuery核心函数：$(function(){})
  3. 使用jQuery对象：$(“#xxx”)，用此方法得到的是一个jQuery伪数组对象

参考文档

https://jquery.cuishifeng.cn/

面试可能会问到的问题

区别mouseover和mouseenter

  • mouseover：在移入子元素时也会触发，对应mouseout

  • mouseenter：只在移入当前元素时才触发，对应mouseleave

    另外需要注意的是，hover（）内部使用的就是mouseenter和mouseleave

区别on(‘click’，fun)和click(fun)

  • on支持动态绑定
  • click支持静态绑定不支持动态绑定

事件委派

  1. 将多个子元素的事件监听委托给父元素处理
  2. 监听回调加在父元素
  3. 当操作任何一个子元素，事件会冒泡到父元素
  4. 父元素不会直接处理，而是根据event.target（事件源）得到发生事件的子元素，通过这个子元素调用事件回调函数

$(‘父元素’).delegate(‘子元素’, ‘事件类型’, 事件回调函数)

筛选模块

  • 过滤

    在jQuery对象内部的元素中找出部分匹配的元素，并封装成新的jQuery对象返回

  • 查找

    查找jQuery对象内部的元素的子孙、兄弟、父母元素，并封装成新的jQuery对象返回

关于坑爹的setInterval

一定要及时关掉，不然定时器的数量可能会叠加，比如轮播图的快速点击…就会出事

可以在定时器执行前设置一个flag来标记

我的轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="fa/css/all.css"/>
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix::after
                {
                    content: "";
                    display: block;
                    clear: both;
                } 
        #wrapper{
            width: 1024px;
            height: 768px;
            background-color: #BBFFAA;
            margin: 0 auto;
            overflow: hiddn;
            position: relative;

        }
        #banner{
            list-style-type: none;
            width: 6144px;
            height: 768px;
            position: absolute;
            left: 0;
        }
        #banner li{
        float: left;
        }
        #toLeft{
            position: absolute;
            top: 384px;
        }
        #toRight{
            position: absolute;
            top: 384px;
            left: 1010px;
        }
        </style>
    </head>
    <body>
        <script src="js/jquery-3.6.0.js"></script>
        <script>
            $(function(){ 
            var $wrapper = $('#wrapper');
            var $banner = $('#banner');//获取轮播图
            var $left = $('#toLeft');//翻页的左指针
            var $right = $('#toRight');//翻页的右指针
            var moving = false;//当前是否在翻页
            var timer = 0;

            var auto = setInterval(function(){//每隔三秒自动翻页
                nextPage(false);
            },3000);

            $wrapper.hover(function(){//鼠标悬停在轮播图上时停止轮播，移除则继续自动轮播
                clearInterval(auto);
            },function(){
                auto = setInterval(function(){
                    nextPage(false);
                },3000);
            });

            $left.click(function(){//向前翻页
                nextPage(true);
            });
            $right.click(function(){//向后翻页
                console.log('向后翻页');
                nextPage(false);
            });
            function nextPage (next) {//执行翻页的
                if(moving){
                    return;
                };
                moving = true;
                var curLeft = $banner.position().left;//当前left
                var offset = next ? 1024 : -1024;//向前或者向后的翻页距离
                var targetOffset = (curLeft+offset)%6144;//目标翻页距离
                var itemOffset = -20;//每次interval移动的距离20px    
                if(offset < 0){
                      timer = setInterval(function(){

                         curLeft += itemOffset;
                         if(curLeft < targetOffset){
                            curLeft = targetOffset;
                            if(targetOffset === -5120){//如果向后翻页到最后一张图片
                                $banner.css('left',-1024);//重新定位到第一张图片（其实是第二张，因为前面一张是最后一张图片）
                                moving = false;
                                clearInterval(timer);//关闭定时器
                                return;
                            }
                             $banner.css('left',(curLeft)%5120);
                            clearInterval(timer);//关闭定时器
                            moving = false;
                            return;
                         }
                        $banner.css('left',((curLeft%5120)));
                    },1000/144);
                }
                else{
                    timer = setInterval(function(){
                        curLeft += (-itemOffset);
                        if(curLeft > targetOffset){
                            curLeft = targetOffset;
                            if(targetOffset === 0){
                                $banner.css('left',-4096);
                                moving = false;
                                clearInterval(timer);//关闭定时器
                                return;
                            }
                            $banner.css('left',(curLeft)%5120);
                            clearInterval(timer);//关闭定时器
                            moving = false;
                            return;
                        }
                        $banner.css('left',((curLeft%5120)));
                    },1000/144);
                }
            }
        });
        </script>



        <div id="wrapper" class="clearfix">
                <ul id="banner" style="left:-1024px">
                <li><img src="pic/4.jpg"/></li>
                <li><img src="pic/1.jpeg"/></li>
                <li><img src="pic/2.jpg"/></li>
                <li><img src="pic/3.jpg"/></li>
                <li><img src="pic/4.jpg"/></li>
                <li><img src="pic/1.jpeg"/></li>
                </ul>
                <div id="pointDiv">
                    <a href="#" id="toLeft"class="arrow"><i class=" fas fa-angle-double-left"></i></a>
                    <a href="#" id="toRight" class="arrow"><i class="fas fa-angle-double-right"></i></a>
                </div>
        </div>

    </body>
</html>

自定义动画（略）

多库共存

解决两个库都要使用$的问题

jQuery库可以释放$的使用权，让另外一个库可以正常使用，此时jQuery库只能使用jQuery

方法：jQuery.noConflict()

区别onload和ready的区别

window.onload = function(){};

$(function(){});//与下面的写法是等价的

$(document).ready(function(){})

onload只能添加一个监听回调，而ready可添加多个

如果页面有图片，onload会在文档里所有图片加载完再执行

而ready是只要文档（图片还未加载）加载完毕就执行，因此可能会出现无法获取图片的情况

赏