Jquery 进阶

Jquery 进阶

Jquery 的数组遍历

• 原始遍历 for循环遍历

  var $lis = $("li");
  for (var i = 0;i < $lis.length;i++) {
      	//write code....                               
  	}
  

• jquery 对象函数遍历（对象.each）

  $("div").each(function (index,element) {
  	//write code....
  });
  

• 全局函数遍历 $.each()

  //全局循环函数	参1  数组   参2  function
  $.each($("li"),function (index,element) {
      //write code....
  });
  

• 新特性（类似于Java中的增强for循环）

  // 这个方法需要3.x版本的jQuery， 语法 for(变量名 of 数组或集合)
  for (li of $("li")) {
      //write code....
  }
  

事件的绑定与解绑

• 方式一：在标签中写死

  <!--这种方式比较历史悠久,不能解绑-->
  <button value="绑定" onclick="func()" />
  

• 方式二：在程序中自动绑定

  //在程序中动态绑定，但也不能解绑
  $("#btn").click(function () {
      //write code....
  });
  

• 方式三：on()方法

  //这个绑定事件的方式可以解绑
  
  $("#btn").on("click",function () {
      //write code...
  })
  
  //解绑 off()方法，传参 解绑对象指定的事件，不传参数，解除所有的事件
  $("#btn").off("click");
  

jQuery 事件切换

• 逐个添加事件，每次对象调用on函数

  
  $("#btn").on("mouseover",function () {
      //write code...
  })
  $("#btn").on("mouseleav",function () {
      //write code...
  })
  

• 链式调用，on函数返回调用对象，可以直接在后面继续调用

  $("#btn").on("mouseover",function () {
      //write code...
  })
  .on("mouseleav",function () {
      //write code...
  })
  

• 切换方式hover函数，移入移出效果

  $("#btn").hover(function () {	//移入效果
      //write code...
  },function () { 		  		//移出效果
       //write code...
  })