②、jQuery，Hold on!(1)

$(“div”).on({

mouseenter: function(){

$(this).css(“background”,“skyblue”);

},

click: function(){

$(this).css(“background”,“purple”);

}

})

①on() 方法优势1

• 可以绑定多个事件，多个处理事件处理程序。

$(“div”).on({

mouseover: function(){},

mouseout: function(){},

click: function(){}

})

• 如果事件处理程序相同

$(“div”).on(“mouseover mouseout”,function(){

$(this.toggleClass(“current”));

});

②on()方法优势2

• 可以事件委派操作.事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

$(“ul”).on(“click”,“li”,function(){

alert(“hello world!”);

});

//事件是绑定在ul身上，只有一个ul 添加了点击事件，但是触发对象是li，会发生事件冒泡，冒泡到父亲身上，父亲就会执行这个函数

• 在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

③on()方法优势3

动态创建的元素，click()没有办法绑定事件，on() 可以给未来动态生成的元素绑定事件

// 传统方法

$(“ol li”).click(function(){

alert(11);

})

var li = $(“

• 我是后来创建的
• ”)

  $(“ol”).append(li);

  // 没有用，动态创建的元素没有办法绑定事件

  // on可以给未来动态创建的元素绑定事件

  $(“ol”).on(“click”,“li”,function(){

  alert(11);

  })

  var li = $(“

• 我是后来创建的
• ”)

  $(“ol”).append(li);
• 我们都是好孩子
• 我们都是好孩子
• 我们都是好孩子
• 我们都是好孩子
• 我们都是好孩子
• 1.2.2、事件处理 off()解绑事件🔥

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

  $(“div”).off(); // 这个是接除了div身上的所有事件

  $(“div”).off(“click”); //这个是解除了div身上的点击事件

  $(“ul”).off(“click”,“li”); //这个是解绑事件委托

  • 如果有些事件只想执行一次就不再执行，可以使用one() 方法

  $(“p”).one(“click”,function(){

  alert(11);

  })
• 我们都是好孩子
• 我们都是好孩子
• 我们都是好孩子

• 我是屁

  1.2.3、自动触发事件trigger()🔥

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

  // 1.元素.事件()

  $(“div”).click();

  // 2.元素.trigger(“事件”)

  $(“div”).trigger(“click”);

  // 3.元素.triggerHandler(“事件”) 不会触发元素的默认行为

  $(“div”).triggerHandler(“click”);

  • triggerHandler 模式不会触发元素的默认行为，这是和前面两种的区别。

  1.3、jQuery事件对象🔥

  ---

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

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

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

  • 阻止冒泡 : event.stopPropagation()

  2、jQuery其他方法🔥

  ================================================================================

  2.1、jQuery对象拷贝🔥

  ---

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

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

  • deep:如果设为true为深拷贝，默认为false 浅拷贝

  • target: 要拷贝的目标对象

  • object1:待拷贝到第一个对象的对象

  • objectN:待拷贝的第N个对象的对象

  • 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

  • 深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址),修改目标对象不会影响被拷贝对象

  • 深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起

  $(function(){

  var targetObj = {};

  var obj = {

  id: 1,

  name: “andy”

  };

  // $.extend(target,obj);

  $.extend(targetObj,obj); // 会覆盖targetObj里面原来的数据

  // 把 obj 拷贝给 targetObj

  })