jQuery教程-jQuery高级 - 06

1.jQuery原型对象解密

jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。也就是说：jQuery.fn === jQuery.prototype,参考jQuery源码：

...
jQuery.fn = jQuery.prototype = {

// The current version of jQuery being used
jquery: version,

constructor: jQuery,

// The default length of a jQuery object is 0
length: 0,

toArray: function() {
  return slice.call( this );
},
...

1.1 each函数

jQuery的包装对象封装了each(callback)方法，以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

实例：

// 迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
// HTML 代码:
// <img/><img/>
$("img").each(function(i){
  this.src = "test" + i + ".jpg";
  // this 指向当前的变量的dom对象。 i是当前dom对象在选择器返回数组中的索引。
 });

1.2 获取元素的个数

两种方法可以获取选择器匹配的元素的个数。

第一种方法：$('p').size();
第二种方法：$('p').length

以上两种方法都可以。推荐使用length属性

1.3 其他属性和方法

属性/方法名	用法	介绍
selector	$('p').selector	返回选择器的字符串
get()	$('p').get();	返回所有的选择的dom对象的集合
get(index)	$('p').get(1);	返回第2个dom对象，索引从0开始
toArray()	$('p').toArray();	把jQuery集合中所有DOM元素恢复成一个数组。

上课代码

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<script src="./lib/jquery-1.12.4.js"></script>
<script>
  // 数组的方法forEach， ie9+ 
  var arr = ['a', 'b', 3, 4];
  // value数组的元素， index数组元素的索引
  arr.forEach(function(value, index) {
    console.log('index:',index, 'value',value)
  });

  //jQuery原型上提供了each
  $(function() {
    // jQuery.fn上提供了each方法，类似for循环遍历。推荐使用each替代for
    // 参数：第一个参数是：索引，第二个参数是dom元素。
    $('li').each(function(index, elem) {
      console.log(index, elem);
    });

    // jQuery原型：获取元素个数。
    console.log('size:', $('li').size())
    console.log('length:', $('li').length)
    console.log($('li').get());
  });
</script>

2.jQuery构造函数解密

2.1 构造函数的each方法

• 语法：jQuery.each(object, [callback])

• 概述

  通用例遍方法，可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

• 参数

  • object:需要例遍的对象或数组。
  • callback:每个成员/元素执行的回调函数。

• 示例

  // 例遍数组，同时使用元素索引和内容。
  $.each( [0,1,2], function(i, n){
    alert( "Item #" + i + ": " + n );
  });
  // 例遍对象，同时使用成员名称和变量内容。
  $.each( { name: "John", lang: "JS" }, function(i, n){
    alert( "Name: " + i + ", Value: " + n );
  });
  

2.2 构造函数的map方法

• 语法 ：jQuery.map(arr|obj,callback)

• 返回值： Array新数组

• 概述

  将一个数组中的元素转换到另一个数组中。作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。

• 参数

  • array:待转换数组。
  • callback:为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。函数可返回任何值。

• 示例

  // 将原数组中每个元素加 4 转换为一个新数组。
  $.map( [0,1,2], function(n){
    return n + 4;
  });
  // 结果:
  // [4, 5, 6]
  
  // 原数组中大于 0 的元素加 1 ，否则删除。
  $.map( [0,1,2], function(n){
    return n > 0 ? n + 1 : null;
  });
  // 结果:
  // [2, 3]
  
  // 原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。
  $.map( [0,1,2], function(n){
    return [ n, n + 1 ];
  });
  // 结果:
  // [0, 1, 1, 2, 2, 3]
  

2.3 数组的过滤方法grep

• 语法 jQuery.grep(array, callback, [invert])

• 概述

  使用过滤函数过滤数组元素。此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

• 参数

  • array:待过滤数组。

  • callback:此函数将处理数组每个元素。第一个参数为当前元素，第二个参数而元素索引值。

  • invert:如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。

• 返回值： 数组Array

• 示例

  // 过滤数组中小于 0 的元素。
  $.grep( [0,1,2], function(n,i){
    return n > 0;
  });
  // 结果:
  // [1, 2]
  
  // 排除数组中大于 0 的元素，使用第三个参数进行排除。
  $.grep( [0,1,2], function(n,i){
    return n > 0;
  }, true);
  // 结果:
  // [0]
  

2.4 转换数组方法jQuery.makeArray

• 语法：jQuery.makeArray(obj)

• 概述

  将类数组对象转换为数组对象。类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。

• 参数： obj:类型Object，类数组对象。

• 示例

  // 过滤数组中小于 0 的元素。
  // <div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
  
  var arr = jQuery.makeArray(document.getElementsByTagName("div"));
  arr.reverse(); // 使用数组翻转函数
  // 结果:
  // Fourth
  // Third
  // Second
  // First
  

2.5 数组包含校验inArray

• 语法：jQuery.inArray(value,array,[fromIndex])

• 概述

  确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。

• 参数

  • value:用于在数组中查找是否存在
  • array:待处理数组。

• fromIndex:用来搜索数组队列，默认值为0。

• 示例

  // 查看对应元素的位置
  var arr = [ 4, "Pete", 8, "John" ];
  jQuery.inArray("John", arr);  //3
  jQuery.inArray(4, arr);  //0
  jQuery.inArray("David", arr);  //-1
  jQuery.inArray("Pete", arr, 2);  //-1
  

2.6 合并数组方法merge

• 语法：jQuery.merge(first,second)

• 概述

  合并两个数组返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()

• 参数

  • first:第一个待处理数组，会改变其中的元素。
  • second:第二个待处理数组，不会改变其中的元素。

• 示例

  // 合并两个数组到第一个数组上。
  $.merge( [0,1,2], [2,3,4] )
  // 结果:
  // [0,1,2,2,3,4]
  

2.7 数组去重unique

• 语法：jQuery.unique(array)

• 概述

  删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。

• 示例

  // 删除重复 div 标签。
  $.unique(document.getElementsByTagName("div"));
  // 结果:
  // [<div>, <div>, ...]
  

2.8 jQuery构造函数的扩展对象方法（继承）

• 语法：jQuery.extend([deep], target, object1, [objectN])

• 概述

  用一个或多个其他对象来扩展一个对象，返回被扩展的对象。如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。 未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

• 参数

  • target:一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。
  • object1:待合并到第一个对象的对象。
  • objectN:待合并到第一个对象的对象。
  • deep:如果设为true，则递归合并。

• 示例

  // 合并 settings 和 options，修改并返回 settings。
  var settings = { validate: false, limit: 5, name: "foo" };
  var options = { validate: true, name: "bar" };
  jQuery.extend(settings, options);
  // 结果:
  // settings == { validate: true, limit: 5, name: "bar" }
  

上课代码

// 深拷贝
var target = {name: 'laoma'};
var obj1 = {age: 18, cellphone: '18911865673', mail: '[email protected]'};
var p1 = {k: 123, m: 'abc'};
var obj2 = {run: function() { console.log(1); }, p: p1};

var newObj = jQuery.extend(true, target, obj1, obj2);
console.log(newObj, target);
console.log(newObj === target)

// console.log(newObj.p === p1);
console.log(newObj.p.k); //123
p1.k = 444; //newObj.p.k
console.log(newObj.p.k); //123
console.log('p1.k', p1.k); //444

2.9 其他构造函数上的方法和属性

属性名	实例	说明
noop	var f = jQuery.noop;	一个空函数
isArray	$.isArray([1,3,4])	测试对象是否为数组。
isFunction	jQuery.isFunction(obj)	测试对象是否为函数。
isNumeric	jQuery.isNumeric(value)	确定它的参数是否是一个数字。
isWindow	jQuery.isWindow(obj)	测试对象是否是窗口
error	jQuery.error(message)	接受一个字符串，并且直接抛出一个包含这个字符串的异常
trim	jQuery.trim(str)	去掉字符串起始和结尾的空格

3.链式编程和隐式迭代

3.1 链式编程

由于大部分jQuery的api方法内部返回值都是jQuery的包装对象自身。所以我们可以在jQuery的api调用之后继续调用jQuery的方法，这样就称作是链式编程。

例如代码:

$('#p1').css('color', 'red').height(200).hide('slow');
// 等价于
$('#p1').css('color', 'red');
$('#p1').height(200);
$('#p1').hide('slow');

由于css方法、height、hide方法都返回jQuery包装对象自身。所以就可以继续链式调用。

链式编程的原理

//链式编程的原理：对象调用了方法后，方法返回当前对象。
var cat = {
  run: function() {
    console.log('runing');
    return this; // 核心：方法内部又把当前对象返回了。
  },
  sayHi: function() {
    console.log('hi');
    return this;
  },
  jump: function() {
    console.log('jump');
    return this;
  }
};

cat.run().sayHi().jump(); 

有些方法可以破坏链式的结构，比如：
nextAll(),prevAll(),sibilings(),find(),children(),parent(),parents()...

如果想回到最近一次破坏链式结构之前的代码可以使用end方法。

$('#p1').nextAll().hide().end().css('color', 'red');

3.2 隐式迭代

jQuery包装对象本身就是一个伪数组，匹配的元素有多个的时候，要做设置操作的时候，jQuery内部会隐式的变量所有的匹配元素调用设置操作，所以称为隐式迭代。

评分控件案例

<ul class="list">
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
</ul>
<script src="./lib/jquery-1.12.4.js"></script>
<script>
  $(function() {
    // 第一个效果： 当鼠标移入 五角星时候。之前的五角星和自己都变成实心的五角星
    $('.list li').hover(function(e) {
      // 鼠标移入：当鼠标移入 五角星时候。之前的五角星和自己都变成实心的五角星
      $(this).text('★').prevAll().text('★'); // 隐式迭代。
    }, function(e) {
      // 鼠标移出： 把自己变成空心五角星，而且后面的也都变成空心五角星
      $(this).text('☆').nextAll().text('☆');
    }).on('click', function(e) {
      // 点击之后，记录当前点击的是谁
      $(this).addClass('cur').siblings().removeClass('cur');
    });

    // 给整个ul标签绑定一个mouseleave事件。
    $('.list').on('mouseleave', function(e) {
      // 拿到当前 cur 类的li标签。
      $('.list li.cur').text('★')
          .prevAll().text('★').   // 前面的节点都设置成实心
        end().nextAll().text('☆');// 点击元素后面的节点设置成空心
    });
  });
</script>

4.jQuery的插件封装

4.1 给jQuery包装对象扩展方法属性

• 直接给$.fn添加方法和属性

(function(jQuery) {
  jQuery.fn.logText = function() {
    console.log(this.text());
  };
})(jQuery);

4.2 给构造函数扩展方法和属性

• 通过$.extend()来扩展jQuery构造函数

$.extend({
    log: function(message) {
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
            d = now.getDate(),
            h = now.getHours(),
            min = now.getMinutes(),
            s = now.getSeconds(),
            time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
        console.log(time + ' My App: ' + message);
    }
});

$.log('initializing...'); //调用

• 直接给jQuery构造函数添加属性和方法

(function(jQuery) {
  jQuery.appName = 'laoma Extend';
})(jQuery);

上课案例：自定义插件演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表切换案例</title>
  <style>
    html, body, div,  ul, li {
      padding: 0;
      margin: 0;
    }

    ul, ol {
      list-style: none;
    }

    .tab-wrap {
      border: 1px solid #ccc;
      width: 606px;
      height: 340px;
      overflow: hidden;
    }

    .tab-wrap .tab-hd {
      overflow: hidden;
    }

    .tab-wrap .tab-hd .tab-hd-item {
      float: left;
      width: 200px;
      height: 30px;
      line-height: 30px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      text-align: center;
      cursor: pointer;
    }

    .tab-wrap .tab-hd .tab-hd-item:hover {
      background-color: #fafafa;
    }

    .tab-wrap .tab-bd .tab-bd-item {
      width: 600px;
      display: none;
    }

    .tab-wrap .tab-bd .on {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab-wrap">
    <ul class="tab-hd">
      <li class="tab-hd-item">商品1</li>
      <li class="tab-hd-item">商品2</li>
      <li class="tab-hd-item">商品3</li>
    </ul>

    <ul class="tab-bd">
      <li class="tab-bd-item on">
        <img src="./img/1.png" alt="">
      </li>
      <li class="tab-bd-item">
        <img src="./img/2.png" alt="">
      </li>
      <li class="tab-bd-item">
        <img src="./img/3.png" width="600" height="300" alt="">
      </li>
    </ul>
  </div>
  <script src="./lib/jquery-1.12.4.js"></script>
  <script>
    (function ($) {
      $.fn.lmTab = function () {
        var $hdItems = $(this).find('.tab-hd-item'),
            $bdItems = $(this).find('.tab-bd-item');
        $hdItems.on('mouseenter', function (e) {
          // 拿到当前鼠标移入的hd部分li的索引。
          var index = $hdItems.index(this); // 获取元素的索引。
          var bdLiDom = $bdItems.get(index); // 可以获得第index个元素的dom对象。
          $(bdLiDom).addClass('on').siblings().removeClass('on');
        });
      };
    })(jQuery);


    $(function () {
      // 自定义插件
      $('.tab-wrap').lmTab();  
    });
  </script>
</body>
</html>

5.jQuery常用插件

• jQuery UI

• jQuery EasyUI

• jQuery formvalidate

• jQuery 延迟加载插件

.....