1. 事件注册

  1. element.事件名(function(){})
  2. $("事件触发对象").事件名(function(){});
  3. //例子
  4. $("div").click(function(){console.log(1)})

和原生基本一致


2. 事件处理

jQuery特有的三个事件处理方法:

  • on() 事件绑定
  • off() 事件解绑
    1. - one() 只触发一次事件
  • trigger()/triggerHandler() 事件触发

事件绑定 on()

  1. //事件委派,动态生成的元素也能绑定事件
  2. $("ul").on("click",'li',function(){})
  3. //多事件同时绑定
  4. $("div").on({
  5. mouseover:function(){}, //将所有事件都以对象中的键值方式存储
  6. mouseout:function(){},
  7. click:function(){}
  8. })

事件解绑 off()

  1. $("div").off() //将div上的所有事件全部解除
  2. $("div").off("click") //只解除click事件
  3. $("ul").off("click","li") //解除事件委托

如果只想事件触发一次可以使用one()


事件自动触发 trigger()

  1. element.click() //简单来说就是再设置一个相同的空事件顶掉之前的事件+
  2. element.trigger("type") //type 为自动触发的事件类型
  3. element.triggerHandler(type)

triggerHandler 不会触发元素的默认行为,类似于input获得焦点时内部光标会闪烁一样


3. jQuery 事件对象

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

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

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


4. jQuery 拷贝对象

  1. $.extend([deep],target,object1,[objectN])
  • deep 如果为true就是深拷贝,默认为false 浅拷贝
  • target :要拷贝的对象
  • object1:第一个拷贝的对象
  • objectN:第N个要拷贝的对象
  • 浅拷贝在对象引用拷贝时只会拷贝对象地址,修改对象会引响拷贝对象
  • 深拷贝为完全克隆,即对象也会创建一个新的地址来存放,而不是共用一个地址,修改目标对象不会影响拷贝对象

5. 多库共存

当其他库的$和jQuery库冲突时,支持修改顶级对象名

  1. jQuery("div") //将$符号换成jQuery
  2. let xx = $.noConflict(); //自己定义一个变量来当jQuery变量名