06-老马jQuery教程-jQuery高级

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

jQuery的包装对象封装了<code>each(callback)</code>方法，以每一个匹配的元素作为上下文来执行一个函数。

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

实例：

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

第一种方法：<code>$('p').size();</code>

第二种方法：<code>$('p').length</code>

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

属性/方法名

用法

介绍

<code>selector</code>

<code>$('p').selector</code>

返回选择器的字符串

<code>get()</code>

<code>$('p').get();</code>

返回所有的选择的dom对象的集合

<code>get(index)</code>

<code>$('p').get(1);</code>

返回第2个dom对象，索引从0开始

<code>toArray()</code>

<code>$('p').toArray();</code>

把jQuery集合中所有DOM元素恢复成一个数组。

语法：<code>jQuery.each(object, [callback])</code>

概述

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

参数

object:需要例遍的对象或数组。

callback:每个成员/元素执行的回调函数。

示例

语法 ：<code>jQuery.map(arr|obj,callback)</code>

返回值： Array新数组

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

array:待转换数组。

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

语法 <code>jQuery.grep(array, callback, [invert])</code>

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

array:待过滤数组。

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

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

返回值： 数组Array

语法：<code>jQuery.makeArray(obj)</code>

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

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

语法：<code>jQuery.inArray(value,array,[fromIndex])</code>

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

value:用于在数组中查找是否存在

array:待处理数组。

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

语法：<code>jQuery.merge(first,second)</code>

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

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

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

语法：<code>jQuery.unique(array)</code>

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

语法：<code>jQuery.extend([deep], target, object1, [objectN])</code>

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

target:一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。

object1:待合并到第一个对象的对象。

objectN:待合并到第一个对象的对象。

deep:如果设为true，则递归合并。

属性名

实例

说明

<code>noop</code>

<code>var f = jQuery.noop;</code>

一个空函数

<code>isArray</code>

<code>$.isArray([1,3,4])</code>

测试对象是否为数组。

<code>isFunction</code>

<code>jQuery.isFunction(obj)</code>

测试对象是否为函数。

<code>isNumeric</code>

<code>jQuery.isNumeric(value)</code>

确定它的参数是否是一个数字。

<code>isWindow</code>

<code>jQuery.isWindow(obj)</code>

测试对象是否是窗口

<code>error</code>

<code>jQuery.error(message)</code>

接受一个字符串，并且直接抛出一个包含这个字符串的异常

<code>trim</code>

<code>jQuery.trim(str)</code>

去掉字符串起始和结尾的空格

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

例如代码:

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

有些方法可以破坏链式的结构，比如：

<code>nextAll(),prevAll(),sibilings(),find(),children(),parent(),parents()...</code>

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

<code>$('#p1').nextAll().hide().end().css('color', 'red')</code>;

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

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

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

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

jQuery UI

jQuery EasyUI

jQuery formvalidate

jQuery 延迟加载插件

.....

老马qq： 515154084

老马微信：请扫码

微信：Flydragon_malun 或者18911865673