jQuery小结五

最新推荐文章于 2024-06-19 23:35:43 发布

benlalagang

最新推荐文章于 2024-06-19 23:35:43 发布

阅读量194

点赞数

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

本文链接：https://blog.csdn.net/benlalagang/article/details/126195640

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用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() 可以给动态生成的元素绑定事件

<ol>

<li>实例构造器原生链 Array is Array</li>

</ol>

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

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

color:'#f35'

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

})

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

let bba = $('<li>1234567</li>')

$('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])

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

 // $.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'))