前端学习：jQuery--元素的尺寸，显示与隐藏，鼠标事件，放大镜，下拉动画（仿小米商城），手风琴

拾歡

已于 2022-08-11 21:53:18 修改

阅读量154

点赞数

文章标签：前端 jquery 学习

于 2022-07-20 21:34:19 首次发布

本文链接：https://blog.csdn.net/qq_45926448/article/details/125889154

版权

jquery中找到不同父元素下的相同元素的索引值合并：$("li").index(this)

1.after() insertAfter(), on,bind delegate代理

插入 after()

        A.after(B); A前B后

insertAfter()

        A.insertAfter(B);    A在B后面

on bind 可以利用事件的冒泡实现事件的委托与代理

   $("main").on("click",function () {
            console.log("11111");
        })

      $("main").bind("click",function () {
            console.log("bind");
        })

delegate() 代理

  // delegate 代理
        $("main").delegate("div","click",function () {
            console.log("代理完成了");
        })

2.元素的尺寸：

2.1获取元素大小   width() height() innerWidth() innerHeight() outWidth() outerHeight(true)

        // width height 设置元素的大小 (内容大小)

console.log('元素大小 === ',$("div").width());

console.log('元素大小 === ',$("div").height());

// 包含了 padding + w / h

console.log('元素大小 === ',$("div").innerWidth());   //不包含滚动条

console.log('元素大小 === ',$("div").innerHeight());

// 包含 border + padding + w/h

console.log('元素大小 === ',$("div").outerWidth());

console.log('元素大小 === ',$("div").outerHeight());

// outerWidth 如果参数为true 包含 margin

console.log('元素大小 === ',$("div").outerWidth(true));

console.log('元素大小 === ',$("div").outerHeight(true));

2.2元素的位置 offset().top offset().left position().top position().left

offset() 相对于html根元素

position() 相对于拥有定位的父元素

 // 位置
        // offset() 返回的是对象 {top,left}
        // 相对于 html根元素
        console.log('位置 ==== ',$("div").offset().top);
        console.log('位置 ==== ',$("div").offset().left);

        // position
        // 相对于 拥有定位的父元素
        console.log('位置 === ',$("div").position().top);
        console.log('位置 === ',$("div").position().left);

滚动 scrollTop()

 $(window).on("scroll",function () {
            console.log("滚动的值是: === ",$(window).scrollTop());
        })

3.显示与隐藏动画自定义动画

显示与隐藏 show() hide() toggle()

var isDis=true;
$("button").eq(0).click(function(){
      // 之前的写法
      // $("div").css("display", !isDis?"none":"block");
      // isDis = !isDis;

//1.  hide() shaow() 
      if(isDis){
          $("div").hide();
      }else{
          $("div").show();
      }
      isDis = !isDis;    

//  toggle()
       // $("div").toggle();
})

滑动动画 slideDown() slideUp() slideToggle()

参数：p1:持续时间 p2:动画结束后的回调函数（所有参数可选有默认时间）

      if (isDis) {
                // p1: 持续时间  p2:动画结束后的回调 
                // 所有参数 可选  有默认时间
                $("div").slideUp(1000,function () {
                    console.log("动画效果结束了。。。。");
                });
            } else {
                $("div").slideDown(1000,()=> {
                    $("div").css("background","blue");
                });
            }
            isDis = !isDis;

            //$("div").slideToggle();

淡入淡出动画 fadeIn() fadeOut() fadeToggle()

 // if (isDis) {
            //    $("div").fadeOut();

            // } else {
            //     $("div").fadeIn();
            // }
            // isDis = !isDis;
            $("div").fadeToggle();
        })

自定义动画 animate() stop()

参数：

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)---动画持续时间

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

animate()方法支持链式调用 动画会按顺序执行
  $("button").eq(1).click(function () {
            // $("section").animate({
            //     width: 200,
            //     height: 200
            // }, 2000, "linear",function () {
            //     $(this).css("background","green");
            // })
                $("section").animate()
            // 支持链式调用 会以据顺序执行
            $('section').animate({width:200},2000).animate({height:200},2000);
        })
停止动画用stop()方法，当参数为true时为停止所有动画
        $("button").eq(2).click(function () {
            // 停止动画
            // $("section").stop();
            // 停止所有动画
            $("section").stop(true);
        })

给背景图加透明度： .css("opacity",0.5);

给图片加透明度：.css({filter:"opacity(50%)"});

4.鼠标键盘事件

在绑定事件时，1.要考虑把时间绑定给谁，

2.考虑是否有冒泡

鼠标事件 enter leave 不冒泡
        $("ul").mouseenter(function () {
             console.log('ul 进入');

         })
         $("ul").mouseleave(function () { 
             console.log('ul 离开'); 
         });
over out 冒泡
 $('ul').mouseover(function () { 
            console.log('ul 进入');
        });
        $('ul').mouseout(function () { 
            console.log('ul 离开');
        });
hover() 相当于enter和leave

有两个回调函数 over和out
    $(selector).hover(function () {
                // over
                
            }, function () {
                // out
            }
        );
console.log(event.target);// 触发当前事件得元素

// 相关的目标从哪个元素进入了当前元素

console.log(event.relatedTarget);

console.log(event.currentTarget);// 当前事件的绑定者

mousedown() mouseup() 鼠标按下和松开

键盘按下与松开 keydown() keyup()

5.jquery实现放大镜

利用hover()方法实现鼠标进入盒子时mask与右边大图的显示与隐藏，在盒子的鼠标移动事件中，找到mask的移动位置=e.pageX - $(this).offset().left - $(".mask").width() / 2，并且要确定mask的最小最大移动距离，利用定位给mask设置top，left值，利用

mask的位置：mask的最大移动距离=右边大图的位置：右边大图的最大移动距离的比例得到大图的top，left值

  <script>
        $(".box").hover(function () {
            // over
            $(".mask").show();
            $(".rightbox").show();

        }, function () {
            // out
            $(".mask").hide();
            $(".rightbox").hide();
        }
        );


        $(".box").mousemove(function (e) {
            // values: e.clientX, e.clientY, e.pageX, e.pageY
            var x = e.pageX - $(this).offset().left - $(".mask").width() / 2;
            var y = e.pageY - $(this).offset().top - $(".mask").height() / 2;
            var bigX = $(this).width() - $(".mask").width();
            var bigY = $(this).height() - $(".mask").height();
            x = x < 0 ? 0 : (x < bigX ? x : bigX);
            y = y < 0 ? 0 : (y < bigY ? y : bigY);
            $(".mask").css({
                top:y,
                left:x
            });
            var imgBigX = $(".rightbox").width() - $(".rightbox img").width();
            var imgBigY = $(".rightbox").height() - $(".rightbox img").height();
            // x / bigx = ? / imgbigx
            $(".rightbox img").css({
                top:y * imgBigY / bigY,
                left:x * imgBigX / bigX
            })
        });

    </script>

6.下拉动画（仿小米商城）

给元素设置浮动后，会脱离文档流，但不会脱离文本流

设置了延时器，是鼠标进入离开事件延迟执行，避免鼠标划入过快，定义全局变量isSlider来记录鼠标是否移动li上，如果sliderUp方法调用了才调用sliderDown方法，让切换元素得到显示

        var downTimer = null;
        var upTimer = null;
        var isSilder = false; // 用来记录当前是否已经移动到li元素上 直到调用了up 才更改状态,否则一直是切换元素得显示

        $("li").hover(function () {

            clearTimeout(upTimer);
            // over
            var index = $(this).index();

            if (!isSilder) {
                downTimer = setTimeout(() => {
                    $(".item").eq(index).slideDown(300);
                    isSilder = true;
                }, 300);
            }
            else{
                $(".item").hide().eq(index).show();
            }

        }, function () {
            // out
            clearTimeout(downTimer);
            upTimer = setTimeout(() => {
                $(".item").slideUp(300);
                isSilder = false;
            }, 300);
        }
        );


        $(".item").hover(function () {
            clearTimeout(upTimer);
        },function () {
            upTimer = setTimeout(() => {
                $(".item").slideUp(300);
                isSilder = false;
            }, 300);
        })

7.手风琴

改变大盒子的宽度实现

 for(var i =0;i < 3;i++){
            $(".left").eq(i).css("background-image",`url(./images/imgs/img${i+1}.png)`);
            $(".content").eq(i).css("background-image",`url(./images/imgs/img0${i+1}.png)`).css("background-color","yellow");
        }


        $(".left").click(function () {

            // 1.只有是展开的 
            // $(this).animate({width:600}).siblings().animate({width:100});

            // 2.可以同时展开
            // $(this).width() === 600 ? $(this).animate({width:100}) : $(this).animate({width:600})

            // 3.
            // 根据当前点击的 确定是否要更改宽度
            // $(this).width() === 600 ? $(this).animate({width:100}) : $(this).animate({width:600}).siblings().animate({width:100});//1,2,3都是根据item的点击事件写的


            $(".item").eq($(".left").index(this)).width() === 600 ? $(".item").eq($(".left").index(this)).
            animate({width:100}) : $(".item").eq($(".left").index(this)).animate({width:600}).siblings().animate({width:100});
            console.log($(".left").index(this));//jquery中找到在不同父元素的下的相同元素索引怎么合并
           
        })