复习

10/28/2016 9:34:45 AM

复习

jQuery中的事件绑定 -on
通过代理绑定事件方式，绑定事件的优势
- 支持给动态创建出来的元素绑定事件
- 提高了绑定事件的效率（只给父元素绑定了一次事件）
- 兼容 zepto.js （移动端的类似与jQuery的库）
- 统一了绑定事件的方式

触发事件

触发事件
1. .trigger(参数)
  - trigger单词：触发
2. .triggerHandler(参数)
3. 参数表示，要触发的事件类型
区别：
- triggerHandler() 方法只会触发事件，而不会执行浏览器的默认行为

代码

$(“#btn1”).trigger(‘click’);

  /*
  需求：
  1. 点击btn1，进行打印btn1
  2. 点击btn2，触发btn1的事件
  */
  $("#btn1").on("click",function(){
  console.log("打印btn1");
  });
		
  $("#btn2").on("click",function(){
  //触发第一个按钮的click事件
  $("#btn1").trigger('click');
  });

triggerHandler()不会执行浏览器的默认行为

  /*
       需求二：
          2.1 鼠标在文本框中获得焦点，打印123
          2.2 点击btn3，获得input的焦点
              - $("#int").trigger("focus");不阻止浏览器事件 
              - $("#int").triggerHandler('focus');阻止聚焦事件
       */
     /* $("#int").on("focus",function(){
          console.log("焦点事件被触发");
      });

      $("#btn3").click(function(){
           // $("#int").trigger("focus");
                 
           $("#int").triggerHandler('focus');
      });*/

注意点
- a标签默认无法直接通过代码触发其跳转的行为，需要在a标签的内部，放入一个元素，通过触发其内部元素的click事件达到触发a标签跳转的目的。
- 代码
  - 点击btn4看下触发事件是否影响a链接的跳转
```
  $("span").on("click",function(){
  console.log("1111");
  });
  $("#btn4").on("click",function(){
  // $("span").trigger('click');
			
  $("span").triggerHandler('click');
  });
```

页面布局 <a href="1.复习.html" id="link" target="_blank">触发<span>事件校验是否</span>跳转了</a>

jQuery中的取消默认行为

return false;
- 同时阻止事件冒泡和浏览器的默认行为
单个阻止事件冒泡和浏览器的默认行为

2.1 event.stopPropagation();阻止冒泡事件
2.2 event.preventDefault(); 阻止浏览器的默认行为

jQuery中的链式编程和隐式迭代

链式编程

点运算符来调用不同的方法的编程方式，叫做：链式编程
原理是return this;
格式： $(“li”).parent().parent().siblings().children(‘div’).html(“链式编程”);

需求

通过构造函数创建一个person，添加say和code方法
并且通过链式编程进行调用

代码 function Person (name,age){ this.name = name; this.age = age;

      this.say = function(){
          console.log(this.name+"---"+this.age);

          return this;//模拟链式编程的原理
      }
      this.codding = function(){
          console.log("codding....")

          return this;//模拟链式编程的原理
      }
  }
  var p = new Person("wanx",11);
  p.say();//wanx---11
  p.say().codding();//要这样用，前面要是一个对象wanx---11  codding....

隐式迭代

隐式对应的显示（式）
- 迭代：就是遍历循环的意思
原理
- 所谓的隐式迭代，其实就是jQuery将遍历的过程封装到方法的内部
- 也就是：在方法的内部已经完成了遍历循环的操作。
- 那就不需要我们再手动的for循环进行遍历操作了！
好处
- 提高了我们的开发效率，不用我们在手动的写for循环
特点：
- 会将所有的元素进行相同的设置
- 如果对获取到的所有元素进行不同的设置，还需要使用循环来操作
代码 $("div").css("background","green");

jQuery中的.each()

需求一：
- 对页面中的所有的li元素进行设置不透明度
- 直接通过隐式迭代，进行取值所有的li进行设置样式
- $("li").css("opacity",.5);
需求二
- 对页面中的li进行设置不同的样式
  - .each(callback)
    - callback对于每个匹配的元素所要执行的函数
  - 参数
    - function(index,domE){}
    - 第一个参数是对象的索引值
    - 第二个参数就是当前元素li===this===domE
- 代码案例
```
  $("li").each(function(index,domE){
      console.log(index+"---"+domE);
		
      //domE.style.opacity = (index+1)/10;
      //转换成jQuery对象来操作
      $(domE).css("opacity",(index+1)/10);
  });
```
问题
- 能不能用jQuery中的each方法来遍历普通的数组或者对象？
  - $.each(object,[callback])
    - Object需要例遍的对象或数组。
    - callback:每个成员/元素执行的回调函数。
      - 回调函数拥有两个参数
        
        第一个为对象的成员或数组的索引，
        
        第二个为对应变量或内容。
- 代码案例
  - 数组的单个遍历
```
   var arr = [2,5,7];
 			 $.each(arr,function(index,ele){
 			 	/*0---2
      1---5
      2---7*/
 			 	console.log(index+"---"+ele);
 			 });
```
  - 对象的单个遍历
```
  var obj = {
   	"name":"wax",
   	"age":11
   };
   $.each(obj,function(index,ele){
   	/*
   	name--wax
      age--11
   	 */
   	console.log(index+"--"+ele);
   }); 
```

jQuery中的多库共存.noConflict(boolean)

验证取消对$的控制权
三种情况解释
1. 准备工作
  1. 样式 —-
  红色
  
  绿色
  
  2.1 第一种
  
  //正常执行 /$(“.red”).css(“background”,”red”); $(“.green”).css(“background”,”green”);/

2.2 第二种

解除对$的控制权

代码

第一种解除$

  $.noConflict();
  //$ is not a function
  $(".red").css("background","red");
  jQuery(".green").css("background","green");*/

第二种解除$

  jQuery.noConflict();
  //$ is not a function
  //$(".red").css("background","red");
  jQuery(".green").css("background","green");

2.3 给$和jQuery命别名

- var j = jQuery.noConflict(true);
- 有参数true就是把$和jQuery都解除了
- 代码先验证$和jQuery是否有效

			$ is not a function
			$(".red").css("background","red");
			jQuery is not a function
			jQuery(".green").css("background","green");
- 解决冲突的时候，将$和jQuery赋值给j，就可以使用j来执行jquery函数了

		    j(".red").css("background","red");
			j(".green").css("background","green");

3. .noConflict(boolean)总结

- 缺省情况下，执行 noConflict 会将变量 $ 的控制权移交给第一个产生 $ 的库；
- 当 removeAll 设置为 true 时，执行 noConflict 则会将 $ 和 jQuery 对象本身的控制权全部移交给第一个产生他们的库

jQuery插件

jQuery插件的使用

第一步：引入jQuery文件
第二步：引入插件文件
第三步: 通过插件进行设置，直接去找插件的文档看example 看使用的说明

代码案例

  <script src="js/jquery-1.12.4.js"></script>
  <script src="plugin/jquery.color.js"></script>
  $("div").animate({
      "backgroundColor":"green"
  },1500);

实现图片的懒加载

使用懒加载的步骤：
- 引入jQuery文件
- 引入 lazyload 文件
- 使用 lazyload 函数
- 要给实现懒加载的图片添加属性：data-origina

代码

  <script src="js/jquery-1.12.4.js"></script>
      <script src="plugin/jquery.lazyload.js"></script>
      <script>
          $(function(){
              $(window).scroll(function(){
                  $("img.lazy").lazyload()//拉到2000px之前一点进行的加载
              });	 
          });
  </script>

jQuery插件–写一个插件

需求
1. 编写一个点击按钮，进行改变div的颜色的插件
写一个jQuery插件
1. $.fn.插件名 = function() {};
2. 写jQuery插件的注意点：
  1. 写插件的形式：$.fn.插件名 = function() {};
  2. 在函数的内部使用 this 来获取调用这个方法的jQuery对象
  3. 可以对 this 进行一系列的操作（能对jQuery对象做什么操作就能对this做什么操作）
  4. 在函数内代码的最后最好是，return this;
    - 目的：实现链式编程
    - 这样就能够与原生的jQuery对象的使用方式相同！

代码

 $.fn.changeColor = function(color){
     this.css("background",color);
     console.log(111);
     return this;
 }
 /*
 去调用
 */
 $("input").on("click",function(){
     var color = $(this).val();
     $("div").changeColor(color);
 }); 10/29/2016 2:58:30 PM

jQuery第四天触发事件链式编程和隐式迭代多库共存插件插件

复习