jQuery小结五

使用on() 绑定事件

通常事件写法为

$('div').click(function(){

})

使用on 方法有如下新特性

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

events 一个或多个用空格分隔的事件类型 如 click keydown

selector 元素的子元素选择器

fn 回调函数 即绑定在元素身上的侦听函数

on()方法优势1： 可以绑定多个事件，多个事件处理程序

$("div").on({

mouseover:function(){},

mouseout:function(){},

click:function(){}

})

如果事件处理程序相同

  $('div').on('mouseenter mouseleave',function () {

    $(this).toggleClass('car')

  })

on()方法优势2：  可以事件委派操作，父元素事件让子元素触发

  $('ul').on('click','li',function () {

      window.alert(123)

  })

 on()方法优势3：动态生成的元素无法绑定事件on()  可以给动态生成的元素绑定事件

 

1. 实例 构造器 原生链 Array is Array

 $('ol').on('click','li',function () {

      $(this).css({ //这里的this 自动指向小li

        color:'#f35'

      }).siblings().css('color','#000')

  })

  // 创建写在后面  那么不用on 绑定他就会找不到

  let  bba = $('

1234567

')

  $('ol').append(bba)

在之前jQuery小结三_benlalagang的博客-CSDN博客 发布信息案例 中就使用on 来给删除的a标签添加相应事件

事件处理off() 解绑事件

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

$('p').off()  // 解绑p元素所有的事件处理程序

$('p').off("click")  // 解绑P元素上面的点击事件

$("ul").off("click","li") // 解绑事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件。

自动触发事件 trigger()

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

element.clcik() // 第一种简写形式

element.trigger("type") // 第二种自动触发方式

element.triggerHandler(type) // 第三种自动触发方式 会阻止默认事件 

事件对象

事件被触发，就会有事件对象的产生。

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

常用的就是事件对象的 阻止冒泡 和阻止默认行为 写法和原生JS一样

  $('div').on({

    click:function (e) {

      console.log('点击了div')

      console.log(e);

      e.preventDefault() // 阻止默认行为 或者 return false

      e.stopPropagation() // 阻止冒泡

    }

  })

对象的拷贝 

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

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

1. deep 设置为true是深拷贝，默认是false浅拷贝
2. target 谁要被增加
3. object1 谁要被复制
4. objectN 可以有多个被复制
5. 浅拷贝是吧数据的地址拷贝给对象，修改新目标对象会影响被拷贝的对象。深拷贝是重新开辟新的内存地址 

 // $.extend([deep],target,obj1,[objn])
 //   deep:true 为深拷贝 false 为浅拷贝 target:复制到哪里去   obj1,谁被复制了
  const obj = {
    id:857,
    age:22,
    birthday:'1996-09-24'
  }
 
  // 拷贝会替换相同的 key
  const obj2 = {
    class:'WEB',
    id: 3
  }
 
 
  $.extend(true,obj2,obj)
 
 console.log(obj2);
  obj2.id = 8
 
 console.log(obj)
 
 console.log(obj2);

 jQuery多库共存

问题概述：

jQuery使用$最为标识符，随着JQuery的流行，其他JS也会用这个$作为标识符，这样就会引起冲突

需要一个解决方案 让jQuery 和其他JS库不存在冲突，可以同时存在，这就叫多库共存

  // 用jQuery 代替$
  jQuery('div').on('click',function () {
    console.log(jQuery(this))
  })
 
  //自己封装
  function $(ele) {
    return document.querySelector(ele)
  }
 
  // 释放$ 控制权 让用户自己决定
  let SG = jQuery.noConflict()
  console.log(SG('div'))