老马jQuery教程_H5之家 - 中国HTML5教程资源分享第一站

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

示例

// 过滤数组中小于 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。