jQuery使用的一些常用方法的总结

自己的方法（$，$，map，$，$，ajax）

常用的工具方法

（1）修剪。

修剪方法用于去除字符串头部和尾部之间多余的空格。

复制代码代码如下所示：

美元。修剪（你好'） / /你好
（2）$。

$方法返回一个布尔值，该值指示某个DOM元素（第二个参数）是否是另一个DOM元素的低级元素（第一个参数）。

复制代码代码如下所示：

美元。包含（document.documentelement，文件体）；

/真

美元。包含（document.body，文档。文档元素}）；

/ false
（3）每美元，美元。

每个方法用于遍历数组和对象，然后返回到原始对象，它分别接受两个参数：数据集和回调函数。

复制代码代码如下所示：

$（{ 52, 97 }，函数（index，value）{）

console.log（指数+：+价值）；

}）；

52 0：

97 1：

var obj = { {

P1：你好

P2：世界

}；

美元。每个（obj，功能（键，值）{

console.log（键+：+价值）；

}）；

P1：

P2：/世界
需要注意的是jQuery对象实例也有一个方法（每一个），这两个方法是一样的。

map方法也用于遍历数组和对象，但它返回一个新对象。

复制代码代码如下所示：

var

a = map（a，函数（n，i）{）

返回（n.touppercase（）+我）；

}）；

{
（4）美元。内部数组

美元。内部数组方法返回的数组中的值的位置（从0开始）。如果该值不在数组中，将返回- 1。

复制代码代码如下所示：

var a = {三}；

美元。内部数组（4、一） / / 3
（5）美元。

扩展方法用于将多个对象合并到第一个对象中。

复制代码代码如下所示：

VaR O1 = { P1 P2：A，B}；

VaR O2 = { P1：c}；

美元。延长（O1，O2）；

o1.p1 / /
扩展的另一个用途是生成一个用于继承原始对象的新对象，此时，它的第一个参数应该是一个空对象。

复制代码代码如下所示：

VaR O1 = { P1 P2：A，B}；

VaR O2 = { P1：c}；

VAR（O1，美元。延长= {}，O2）；

o

对象
默认情况下，扩展方法生成的对象是浅拷贝。也就是说，如果一个属性是一个对象或者一个数组，它会生成指向这个对象或数组的指针，而不是复制值。如果你想要一个深度拷贝，你可以将布尔值true传递给扩展方法的第一个参数。

复制代码代码如下所示：

VaR O1 = { P1：{ 'a'，'b' } }；

VaR O2 =美元。延长（{ }，O1）；

VaR O3 =美元。扩展（真的，{ }，O1）；

O1。P1 { 0 } = C；

o2.p1 / / C {

o3.p1 / / {
在上面的代码中，O2是一个浅拷贝，O3是一个深拷贝，因此，O2随原始数组的性质而变化，而O3不改变。

（6）$代理

美元。代理方法类似于ECMAｓｃｒｉｐｔ 5结合的方法，可以结合函数的上下文（即该对象）和参数，并返回一个新的功能。

对jquery.proxy主要使用（）是结合上下文对象的回调函数。

复制代码代码如下所示：

var { { { {

类型：对象

测试：函数（事件）{

console.log（这类型）；

}

}；

$（#按钮）

，（点击，o.test） / /无输出

在（单击）
在上面的代码中，第一个回调函数没有绑定上下文，所以结果是空的，没有任何输出。第二个回调函数将上下文绑定到对象O，结果是对象。

这个例子的另一个等价物是：

复制代码代码如下所示：

$（#按钮），（单击
以上代码的$代理（O，test）意味着O的方法，测试，绑定到O。

这个例子表明代理方法有两种主要形式。

复制代码代码如下所示：

JQuery.proxy（功能、语境）

或

JQuery.proxy（上下文、名称）
第一种方法是为函数（函数）指定上下文对象（上下文）。第二种方法是指定上下文对象（上下文）及其方法名（name）。

再看一个例子，通常，下面代码中的这个对象指向点击事件发生的DOM对象。

复制代码代码如下所示：

$（# myelement）。Click（function（）{）

$（这）AddClass（'anewclass）；

}）；
如果我们想要回调函数运行后期，setTimeout方法将出错原因代码，因为setTimeout让回调函数运行在全球环境中，而这将指向全局对象。

复制代码代码如下所示：

$（# myelement）。Click（function（）{）

setTimeout（）{（）函数（

$（这）AddClass（'anewclass）；

}，1000）；

}）；
上面代码中的这一点将指向全局对象窗口，从而导致错误。

在这一点上，你可以使用代理的方法把这个对象的myelement对象。

复制代码代码如下所示：

$（# myelement）。Click（function（）{）

setTimeout（美元。代理（功能）{（）{

$（这）AddClass（'anewclass）；

}，这个，1000）；

}）；

（7）美元。美元在元素上移除存放的数据数据。

数据方法可以用于存储DOM节点上的数据。

复制代码代码如下所示：

在{数据}中

美元。数据（document.body，foo

读取数据

美元。数据（document.body，foo）；

读取所有数据

数据（文档，正文）；
上面的代码在主体页面元素、密钥富、密钥52中存储键值对。

美元。在元素上移除存放的数据的方法是用来消除由$存储数据。数据的方法。

复制代码代码如下所示：

美元。数据（DIV，、

美元。在元素上移除存放的数据（DIV，、）；
（8）美元。parsehtml，美元。parseJSON，parsexml美元。

美元。parsehtml方法用于解析字符串的DOM对象。

美元。parseJSON方法来解析JSON字符串为Javaｓｃｒｉｐｔ对象，这是类似于本土的JSON.parse（）。然而，jQuery不提供一种类似于json.stringify（），即，它不提供将Javaｓｃｒｉｐｔ对象转化为JSON对象的方法。

美元。parsexml方法用于解析XML对象的字符串。

复制代码代码如下所示：

VaR的HTML =美元。parsehtml（你好，我的名字是jQuery的。）；

var obj =美元。parseJSON（{的名字：约翰}）；

varRSS标题；

VaR xmlDoc =美元。parsexml（XML）；
（9）makearray美元。

美元。makearray方法将数组一样的物体变成一个真正的数组。

复制代码代码如下所示：

var a =美元。makearray（document.getelementsbytagname（div））；

（10）合并。
合并方法用于将数组（第二个参数）合并到另一个数组（第一个参数）。

复制代码代码如下所示：

VaR A1 = {0,1,2}；

VaR A2 = {、}；

$合并（A1，A2）；

A1

1 0, 2, 2，3, 4 }

（11）美元。
美元。现在方法返回对应于1970年1月1日00:00:00 UTC当前时间距离的毫秒数，相当于（新）GetTime（）。

复制代码代码如下所示：

现在（）

1388212221489
判断数据类型的一种方法

jQuery提供了一系列用于确定数据类型来弥补Javaｓｃｒｉｐｔ原生类型的运营商缺乏工具的方法。以下方法确定参数并返回一个布尔值。

JQuery.isArray（）：它是否是一个数组。

JQuery.isEmptyObject（）：无论是一个空的对象（不可枚举的属性）。

jquery.isfunction（）：它是一个函数。

JQuery.isNumeric（）：它是否是一个数组。

（jQuery。isplainobject）：对象是否使用对象或新{ }生成的，而不是原生浏览器对象。

JQuery.isWindow（）：它是否是一个窗口对象。

JQuery.isXMLDoc（）：决定一个DOM节点的XML文档。

下面是一些例子。

复制代码代码如下所示：

美元。isemptyobject（{ }） / /真的

美元。isplainobject（文件位置） / /假

美元。iswindow（窗口） / /真的

美元。isxmldoc（文档。体） / /假
除了以上方法外，还有一个美元。类型的方法，可以返回一个变量的数据类型。它的实质是利用object.prototype.tostring方法读{ {类} }属性在对象（见标准库中的对象的部分）。

复制代码代码如下所示：

美元。型（ / / / 测试）/ regexp
Ajax操作

美元。阿贾克斯

jQuery对象还定义了Ajax方法（ajax（））来处理Ajax操作。

ajax（）有很多用途，最常见的是提供一个对象参数。

复制代码代码如下所示：

$ ajax（{

异步：真，

URL：，

类型：' '，

数据：{ id：123 }，

DataType：'json，

超时时间：30000，

成功：successCallback，

错误：errorCallback，

完成：completecallback

}）

功能successCallback（JSON）{

$（）。文本（JSON。标题）AppendTo（'body）；

}

功能的errorCallback（XHR，状态）{

console.log（out问题！）；

}

功能completecallback（XHR，状态）{

console.log（'ajax请求结束。）；

}
上述代码的对象参数具有多个属性，如下所示：

异步：默认的是真实的，如果它被设置为false，它代表了一个同步请求。

缓存：默认为true，如果设置为false，浏览器不缓存服务器返回的数据。请注意，浏览器本身不缓存POST请求返回的数据，因此即使将其设置为false，也只有头和GET请求是有效的。

URL：服务器端URL。这是唯一必要的属性，其他属性可以省略。

类型：用于向服务器发送信息的HTTP谓词，默认为获取，其他谓词是发送、添加和删除。

DataType：这要求服务器的数据类型可以设置为文本、HTML、脚本和XML，JSON，JSONP。

数据：发送到服务器的数据，如果使用get方法，此项将转到连接到URL结尾的查询字符串。

成功：当请求成功时回调函数，函数参数是服务器返回的数据、状态信息、发出请求的原始对象。

等待超时的最大毫秒数：如果此时间被传递，请求未返回，请求状态将自动更改为失败。

错误：当请求失败时的回调函数，函数参数是发出请求的原始对象和返回的状态信息。

完整：无论请求成功或失败，都执行回调函数，函数参数是发出请求的原始对象和返回的状态信息。

在这些参数中，URL可以独立于Ajax方法的第一个参数，也就是说，上述代码也可以写成以下内容。

复制代码代码如下所示：

$ $

类型：' '，

DataType：'json，

成功：successCallback，

错误：errorCallback

}）
简单的写作方法

编写ajax方法有一些简单的方法。

$ get（）：发出GET请求。

美元。getｓｃｒｉｐｔ（）：读一个Javaｓｃｒｉｐｔ脚本文件并执行它。

美元。getJSON（）：发出一个GET请求和读取JSON文件。

$ $（）：发出POST请求。

美元。fn.load（）：读取一个HTML文件，并把它转化为当前元素。

一般来说，这些简单的方法依次接受三个参数：URL、数据和成功时间的回调函数。

（1）$。

这两种方法分别对应于HTTP的GET方法和POST方法。

复制代码代码如下所示：

获取（（数据 html），函数（HTML）{）

$（#目标）。Html（HTML）；

}）；

美元。后（ /数据/保存，{姓名：'rebecca功能（RESP）}，{）

console.log（JSON.parse（RESP））；

}）；
GET方法在请求成功后接受两个参数：服务器端URL和回调函数。POST方法在这两个参数中间有一个参数，表示发送到服务器的数据。

上面的POST方法对应于以下Ajax。

复制代码代码如下所示：

$ ajax（{

类型：'post，

URL：，

数据：{姓名：'rebecca}，

DataType：'json，

成功：功能（对应）{

console.log（JSON.parse（RESP））；

}

}）；
（2）美元getJSON（）。

另一个写的AJAX方法的简单方法是getJSON方法。当服务器返回的JSON格式的数据，这种方法可以用来代替美元的Ajax方法。

复制代码代码如下所示：

美元。getJSON（'url / / JSON，{ 1 }，A：功能（数据）{）

console.log（数据）；

}）；
以上代码相当于以下文字。

复制代码代码如下所示：

$ ajax（{

DataType：JSON

URL，

数据：{ 1 } A，

成功：函数（数据）{

console.log（数据）；

}

}）；
（3）getｓｃｒｉｐｔ（）美元。

美元。getｓｃｒｉｐｔ方法用于从服务器端加载脚本文件。

复制代码代码如下所示：

美元。getｓｃｒｉｐｔ（ / / /静态JS myｓｃｒｉｐｔ。JS，函数（）{（）{

FunctionFromMyｓｃｒｉｐｔ（）；

}）；
上面的代码首先载入myｓｃｒｉｐｔ.js脚本从服务器，然后执行的回调函数提供的脚本功能。

的getｓｃｒｉｐｔ回调函数接受三个参数，脚本文件的内容，HTTP响应的状态信息，和Ajax对象实例。

复制代码代码如下所示：

美元。getｓｃｒｉｐｔ（AJAX /测试。JS

console.log（数据）； / / test.js内容

console.log（textstatus）； / /成功

console.log（jqxhr。状态）； / / 200

}）；
getｓｃｒｉｐｔ是编写Ajax方法的一个简单的方法，所以返回的是一个延迟的对象，可以使用递延界面。

复制代码代码如下所示：

jquery.getｓｃｒｉｐｔ（ / / /路径myｓｃｒｉｐｔ .js）

完成（函数（）{（））

/ /…

}）

失败（函数（）{（））

…

}）；
（4）fn.load（）美元。

美元。fn.load不是jQuery的工具方法，但方法定义在jQuery对象的实例，它是用来获取HTML文件在服务器端，并把它转化为当前元素。因为这种方法也属于Ajax操作，让我们在一起。

复制代码代码如下所示：

$（新#）。负荷（ / foo。HTML）；
美元。fn.load方法也可以指定一个选择器，把远程文件的匹配选择器为当前元素，并指定回调函数，当操作完成。

复制代码代码如下所示：

$（新#）。负荷（ / foo.html # mydiv H1：第一，

函数（HTML）{

console.log（内容更新！）；

}）；
上面的代码只能加载匹配的# mydiv H1的foo.html部分：第一，当加载完成后，运行指定的回调函数。

Ajax事件

jQuery提供了以下方法，用于指定特定Ajax事件的回调函数。

。ajaxcomplete（）：Ajax请求完成。

。当（）：Ajax请求错误。

。ajaxsend（）：ajax发送请求之前。

。ajaxstart（）：第一个Ajax请求开始，即没有Ajax请求尚未完成。

。ajaxstop（）：在所有的Ajax请求完成。

。ajaxsuccess（）：AJAX请求成功后。

下面是一个例子。

复制代码代码如下所示：

$（# loading_indicator）

。ajaxstart（函数（）{ $（this）。表明（）；}）

。ajaxstop（函数（）{ $（this）。隐藏（）；}）；
返回值

Ajax方法返回一个延迟对象，该对象可以为对象的回调函数用随后的方法指定（详细地参见延迟对象的一部分）。

复制代码代码如下所示：

$ ajax（{

URL：，

DataType：'json

}然后。

console.log（或人）；

}）
JSONP

因为浏览器具有相同的域的限制，Ajax方法只能发送HTTP请求的域名在当前网页。然而，通过插入脚本元素为当前网页，GET请求可以被发送到不同的域名，称为JSONP（JSONwithPadding）。

Ajax方法发出JSONP请求指定的数据类型作为参数的对象json。

复制代码代码如下所示：

$ ajax（{

网址： / /搜索json的数据，

数据：{问：A}，

DataType：'jsonp，

成功：功能（对应）{

$（#目标）。Html（'results：+或结果。长度）；

}

}）；

JSONP的普遍做法是你想请求的URL后添加回调函数的名称。Ajax方法指定如果请求的URL以相似的形式作为回调=，它会自动使用JSONP的形式。因此，上面的代码也可以写成如下。

复制代码代码如下所示：

美元。getJSON（ /数据/搜索。jsonpq = acallback =，

函数（对应）{

$（#目标）。Html（'results：+或结果。长度）；

}

）；