jQuery第三天学习心得

最新推荐文章于 2023-08-06 16:02:33 发布

Zyh499

最新推荐文章于 2023-08-06 16:02:33 发布

阅读量224

点赞数

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

本文链接：https://blog.csdn.net/Zyh499/article/details/110938172

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery第三天学习心得

1.jQuery 事件注册
jQuery 为我们提供了方便的事件注册机制

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
语法：
element.事件(function( ) {事件处理程序 } )
$(‘div’).cilck( function ( ) { }事件处理程序 )

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

2.jQuery 事件处理
因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：

on(): 用于事件绑定，目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发

2.1 事件处理 on() 绑定事件
语法：

在这里插入图片描述

   (1) on可以绑定1个或者多个事件处理程序
             $("div").on({
                 mouseenter: function() {
                     $(this).css("background", "skyblue");
                 },
                 click: function() {
                     $(this).css("background", "purple");
                 }
             });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
             (2) on可以实现事件委托（委派）
             click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
             $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });

             (3) on可以给未来动态创建的元素绑定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);

总结：on（）方法可以使用事件委托，事件委托可以操作动态创建的元素

在原生js中，事件委托需要事件对象 error 且 e.target指向要操作的元素，this指向事件委托元素
在jquery中，事件委托不需要借助事件对象error ，且this和e.target都指向你想要操作的对象

2.2. 事件处理 off() 解绑事件

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。
jQuery 为我们提供了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;
语法：

 事件绑定
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
             1. 事件解绑 off 
             $("div").off();   这个是解除了div身上的所有事件
            $("div").off("click");  这个是解除了div身上的点击事件
            $("ul").off("click", "li"); 这个是解除事件委托
  
             2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })

2.3. 事件处理 trigger() 自动触发事件

有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。
可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

语法
在这里插入图片描述

  绑定事件
      $("div").on("click", function() {
        alert(11);
      });

       自动触发事件
       1. 元素.事件()
       $("div").click();会触发元素的默认行为
      
       2. 元素.trigger("事件")
       $("div").trigger("click");会触发元素的默认行为
      $("input").trigger("focus");
      
       3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("你好吗");
      });
       一个会获取焦点，一个不会
      $("div").triggerHandler("click");
       $("input").triggerHandler("focus");
    });

3.jQuery 事件对象
jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。
语法：

element.on(events,[selector],function(event) { })
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event,stopPropagation()

 $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })

4.jquery拷贝对象
拷贝对象分为：

浅拷贝
深拷贝
不管深拷贝还是，浅拷贝，若有相同属性则被覆盖
语法：

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

deep:如果为true为深拷贝，默认为fasle浅拷贝
2.target：要拷贝的目标对象（拷贝给这里）
3.object1：待拷贝到第一个对象的对象（被拷贝）
4.objectN：待拷贝到第N个对象的对象（被拷贝）

浅拷贝
假如对象 object1 想要拷贝目标对象 object