jQuery基础（事件、其他方法-内容）

最新推荐文章于 2023-07-26 13:00:35 发布

DF-vegan

最新推荐文章于 2023-07-26 13:00:35 发布

阅读量420

点赞数

文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/weixin_57920269/article/details/129521246

版权

一、事件

1. 单个事件注册

element.事件（function（）{}）

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

其他事件一致

mouseover、mouseout、focus、keydown、keyup、resize、scroll

        //1.单个事件注册
        $("div").click(function () {
          $(this).css("background", "red");
        });
        $("div").mouseover(function () {
          $(this).css("background", "skyblue");
        });

2.多个事件注册

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

多个事件使用一个回调函数或者单独事件单独回调函数
注意是一次性事件

events:一个或者多个空格分开的事件类型
- 例如：‘click’或者‘keydown’
- 对象形式
selector：元素的子元素选择器
- 例如前面执行的元素是ul；那么后面的元素应该是li
fn：回调函数

     v  /*   2.多个事件处理on()
        多个事件执行不同的回调函数
        on的括号里添加对象字面量 */
        $("div").on({
          mouseenter: function () {
            $(this).css("background", "red");
          },
          click: function () {
            $(this).css("background", "purple");
          },
          //   还可以添加多个事件在对象里面
        });

        // 多个事件执行相同的回调函数
        $("div").on("mouseover mouseout", function () {
          // 切换类名
          $(this).toggleClass("current");
        });

3. 事件委托

$("ul").on("click", "li", function () {
alert(11);
});

在父级绑定事件，触发到子级元素就会出现函数执行效果

  <body>
    <ul>
      <li>我爱学习</li>
      <li>我爱学习</li>
      <li>我爱学习</li>
      <li>我爱学习</li>
      <li>我爱学习</li>
    </ul>
    <script>
      $(function () {
        //优势：事件委托
        // $("ul li").click();
        $("ul").on("click", "li", function () {
          alert(11);
        });
      });
      //   click是绑定在ul身上，但是出发的对象是ul里面的小li
    </script>
  </body>

4.动态创建元素绑定事件

原始绑定事件方式不可以绑定动态生成元素身上

on（）可以注册事件在动态创建元素上

 <body>
    <ol></ol>
    <script>
      $(function () {
        $("ol").on("click", "li", function () {
          alert(11);
        });
        // 事件动态创建绑定
        var li = $("<li>创建的li</li>");
        $("ol").append(li);
      });
    </script>

5.案例-微博发布效果

    <script>
      $(function () {
        //1. 点击按钮，动态创建li，放入文本框的内容和删除按钮，并且添加到ul中
        $(".btn").on("click", function () {
          //动态创建
          var li = $("<li></li>");
          li.html($("textarea").val() + "<a href='javascript:;'>删除</a>");
          $("ul").prepend(li); //添加在最前面
          li.slideDown();
        });
        // 2.点击删除按钮，可以删除当前的微博留言li
        // $("ul a").click(function () {
        //   alert(11); //不会出现弹窗，因为原始注册事件不回给动态创建的元素注册绑定事件
        // });
        // on可以给动态创建的元素绑定事件
        $("ul").on("click", "a", function () {
          $(this)
            .parent()
            .slideUp(function () {
              $(this).remove();
            });
        });
      });
    </script>

页面分析：输入文本点击发布就会在下方添加
代码解析：
- 布局静态页面
- 设置按钮点击
- 创建新的标签
- 给标签中添加文本内容和删除按钮
- 把创建的标签追加到ul里面
- 然后将标签滑入：slideDown（）
- 给新增的的标签添加点击事件删除父级
- 利用事件委托给父级绑定，设置回调函数，设置当前的父级滑出
- 滑出之后再将其删除

6. 解绑事件

off（）方法可以移除通过on（）方法添加的事件处理程序

$("div").off() 解除所有事件

$("div").off("指定事件") 解除指定事件

$("ul").off("指定事件","委托元素") 解除指定事件

    <script>
      $(function () {
        $("div").on({
          click: function () {
            console.log("我被点击了");
          },
          mouseover: function () {
            alert("鼠标经过了");
          },
        });
        $("ul").on("click", "li", function () {
          alert(222);
        });
        // 1. 事件解绑
        // $("div").off(); //解绑所有事件
        $("div").off("click"); //解除指定事件
        $("ul").off("clcik", "li"); //解除事件委托
      });
    </script>

7. 自动触发事件

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

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

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

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

      $(function () {
        $("div").on("click", function () {
          alert(11);
        });
        // 自动触发事件
        // 1.元素.事件（）
        $("div").click(); //自动触发事件的最简模式
        // 2.元素.trigger()
         $("div").trigger("click"); //自动触发
        // 3.元素.triggerHalder()
        //不会触发元素默认行为
        $("div").triggerHandler("click"); //自动触发
       });

8. 事件对象

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

阻止默认行为：event.preventDefault() 或者 return false（）
阻止冒泡： event.stopPropagation()

    <script>
      $(function () {
        $(document).on("click", function () {
          console.log("点击了");
        });
        $("div").on("click", function (e) {
          //   console.log(e);
          console.log("div被点击了");
          e.stopPropagation(); //阻止冒泡
        });
      });
    </script>

二、其他的方法-内容

1. 拷贝对象

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

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

deep: 如果设为true就是深拷贝，默认是false浅拷贝
target： 要拷贝的目标对象
object： 待被拷贝的对象，可以拷贝多个对象

浅拷贝：被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

深拷贝：前面+true，完全克隆（拷贝的是对象而不是地址），修改目标对象不会影响的被拷贝对象

  <script>
      $(function () {
        var targetObj = {
          id: 0,
          msg: {
            sex: "男",
          },
        };
        var obj = {
          id: 1,
          name: "anan",
          msg: {
            age: 18,
          },
        };
        // 使用方式：$extend(target,obj)
        // 1. 把obj拷贝给targetObj
        $.extend(targetObj, obj);
        console.log(targetObj);
        //如果原来数据和克隆数据有相同的，会覆盖原来的数据
        /*  targetObj.msg.age = 18;
        console.log(obj); */
        // 浅拷贝拷贝的是复杂数据类型的目标地址
        // 2.深拷贝
        $.extend(true, targetObj, obj);
        console.log(targetObj);
        targetObj.msg.age = 20; //拷贝对象的数据会覆盖原来的数据
        console.log(obj);
      });
    </script>

2. 多库共存

问题描述：

jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用$作为标识符，容易冲突

客户需求

让jquery和其他库不存在冲突，可以同时存在，叫多库共存

解决方案：

把里面的$符号统一修改为jQuery,比如jQuery('div')
jQuery变量规定新的名称
var xx = $.newConflict()

 <script>
      $(function () {
        // 声名一个$函数
        function $(ele) {
          return document.querySelector(ele);
        }
        // 执行调用函数--传参--执行函数
        console.log($("div"));
        // $.each(); //报错：因为$里没有each方法
        // 1.如果$冲突就是用jQuery
        jQuery.each();
        // 2.或者自定义让jQuery释放对$的控制权
        var suibian = jQuery.newConflict();
        suibain("span");
        suibian.each(); //正常
      });
    </script>