jQuery中的事件与DOM有什么不同呢？？？

最新推荐文章于 2021-05-27 19:39:40 发布

玛莎拉迪迦

最新推荐文章于 2021-05-27 19:39:40 发布

阅读量285

点赞数

分类专栏：笔记文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_46156304/article/details/109685647

版权

笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

页面加载

<button id="btn">按钮</button>

DOM 提供了load事件用于页面加载完毕之后执行机制，jQuery 提供了ready()方法实现相似功能。

但是 DOM 中的load事件与 jQuery 中的ready()方法具有以下三种区别：

DOM 中的load事件：

没有任何简写形式
当 HTML 页面加载完毕之后触发load事件
一个 HTML 页面仅允许存在一个load事件

<script>
  /*
            window对象表示浏览器窗口
              load事件 - 当前浏览器窗口加载页面完毕时被触发
              事件处理函数中的代码逻辑 -> 在浏览器加载页面完毕后执行
        */
  window.onload = function () {
    var btn = document.getElementById("btn");
    console.log(btn);
  };
</script>

jQuery 中的ready()方法：

具有简写形式
当 DOM 节点树加载完毕之后调用ready()方法
一个 HTML 页面允许存在多个ready()方法

<script>
  /*
            jQuery提供了ready()方法
              作用 - 实现了类似于window.onload事件的功能
              用法
                1. $(document).ready(function(){});
                2. $(),ready(function(){});
                3. $(function(){}); 
        */
  // $(document).ready(function(){
  //     console.log($('#btn'));
  // });

  $(function () {
    console.log($("#btn"));
  });
</script>

事件绑定

单事件的绑定与解绑

单事件绑定

jQuery 提供了bind()方法完成事件绑定功能，

$element.bind(type, data, callback);

type：含有一个事件类型的字符串
data：作为 event.data 属性值传递给事件对象的额外数据对象
callback：绑定到每个匹配元素的事件上的处理函数

单事件解绑

jQuery 提供了unbind()方法完成事件绑定功能，

$element.unbind(type[,data,callback]);

type：删除含有一个事件类型的字符串
data：作为 event.data 属性值传递给事件对象的额外数据对象
callback：绑定到每个匹配元素的事件上的处理函数

<button id="btn">按钮</button>

<script>
  function click1() {
    console.log("this is button");
  }
  function click2() {
    console.log("this is button too");
  }

  $("#btn").bind("click", click1);
  $("#btn").bind("click", click2);

  /*
            unbind
              情况
                如果只传递事件名称的话 - 解绑该事件的所有处理函数
                如果传递事件名称和指定的处理函数 - 解绑定该事件的指定函数
       */
  //    $('#btn').unbind('click',click1);

  /*
            bind()与unbind()中的data参数
              data参数的值 ->利用event事件对象的data属性进行接收
              特点 - 该参数的数据内容只能在事件的处理函数中被使用

        */

  $("#btn").bind("click", { a: "张无忌" }, function (event) {
    console.log(event.data);
  });
</script>

效果：
在这里插入图片描述

多事件绑定与解绑

bind()方法和unbind()方法

还提供了多事件绑定。事件名称之间使用空格分隔

<!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-3.5.1.js"></script>

    <style>
      #title {
        width: 100px;
        height: 20px;
        border: 1px solid black;
      }
      ul {
        list-style: none;
        padding: 0;
        display: none;
      }
      li {
        width: 100px;
        height: 20px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="title">菜单</div>
    <ul>
      <li>北京</li>
      <li>天津</li>
      <li>廊坊</li>
    </ul>

    <script>
      /*
            鼠标悬停事件
              mouseover - 表示鼠标悬停在指定元素之上
              mouseout -  表示鼠标从指定元素上移开
        */
      // $('#title').bind('mouseover',function(){
      //     $('ul').css('display','block');
      // });
      // $('#title').bind('mouseout',function(){
      //     $('ul').css('display','none');
      // });

      //jQuery支持链式操作
      // $('#title').bind('mouseover',function(){
      //     $('ul').css('display','block');
      // }).bind('mouseout',function(){
      //     $('ul').css('display','none');
      // });

      //bind()方法 - 多事件绑定。事件名称之间使用空格分隔
      $("#title").bind("mouseover mouseout", function () {
        if ($("ul").is(":hidden")) {
          $("ul").css("display", "block");
        } else {
          $("ul").css("display", "none");
        }
      });

      /*
            unbind()方法
              没有指定任何事件 - 将指点的元素的所有事件全部绑定
              指定一个事件名称时 - 将指定元素的指定当个事件解绑
              指定多个事件名称时 - 将指定元素的指定多个事件解绑
        
        */
      // $('#title').bind('mouseover mouseout')
    </script>
  </body>
</html>

事件绑定的方法（经典面试题）

jQuery 中提供了多组事件绑定与解绑定的方法

bind()与unbind()方法：jQuery3.0 版本后删除方法
on()与off()方法：jQuery 1.7 版本后新增方法
其实 bind()与unbind()方法的底层方法就是on()与off()方法
live()与die()方法：jQuery 1.7 版本后删除方法
作用：实现事件委托
delegate()与undelegate()方法：jQuery 1.6 版本后新增方法，jQuery3.0 版本后删除方法
作用：实现事件委托
one()方法：为事件绑定一次性的函数

事件切换

hover()方法模拟鼠标悬停事件效果

$element.hover([over,]out);

over：鼠标移到元素上要触发的函数
out：鼠标移出元素要触发的函数

代码：

//jQuery提供hover(over,out)方法
$("#title").hover(
  function () {
    $("ul").css("display", "block");
  },
  function () {
    $("ul").css("display", "none");
  }
);

toggle()方法，1.9 后被删除，功能转移至动画了

事件模拟（一般用于自动化）

trigger()方法 - 模拟用户触发事件

<button id="btn">按钮</button>

<script>
  //绑定事件 - 由用户行为进行触发，调用处理函数
  $("#btn").bind("click", function () {
    console.log("this is button");
  });

  //模拟用户触发事件
  $("#btn").trigger("click");
</script>

玛莎拉迪迦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的事件与DOM有什么不同呢？？？

页面加载<button id="btn">按钮</button>DOM 提供了load事件用于页面加载完毕之后执行机制，jQuery 提供了ready()方法实现相似功能。但是 DOM 中的load事件与 jQuery 中的ready()方法具有以下三种区别：DOM 中的load事件：没有任何简写形式当 HTML 页面加载完毕之后触发load事件一个 HTML 页面仅允许存在一个load事件<script> /* wi
复制链接

扫一扫

专栏目录