你可以简单地理解为jqXHR对象是jQuery自己伪造的一个XMLHttpRequest对象和$.Deferred
对象的结合体。
jqXHR是浏览器原生XMLHttpRequest对象的超集。例如,它也包含responseText
和responseXML
属性,以及getResponseHeader()
方法。当传输机制与 XMLHttpRequest
对象不同时(例如,用一个<script>
标签来完成JSONP
请求),jqXHR
对象会尽可能地模拟本地 XMLHttpRequest
对象的功能。
从jQuery 1.5.1
开始,jqXHR
对象也overrideMimeType()
方法(它在 1.4.x 中也可用,但在 1.5 中被临时移除)。overrideMimeType()
方法可用于beforeSend()
的回调函数中,比如用来修改 Content-Type 响应头。
从jQuery 1.5
开始,$.ajax()
返回的jqXHR
对象实现了Promise
接口,包括其所有的属性、方法和行为。因此,我们通过jqXHR
可以非常简单地为本次$.ajax()
绑定AJAX
请求对应状态执行的回调函数。
我们通过解剖一个完整的jqXHR
对象,来了解jqXHR
对象的属性和方法:
var jqXHR = {
abort: function (statusText){
// 取消请求,关闭连接
},
always: function (){
// 设置请求完成(无论成功或失败)时需要执行的一个或多个回调函数
},
complete: function (){
// always()函数的别名,设置请求完成(无论成功或失败)时需要执行的一个或多个回调函数
},
done: function (){
// 设置请求成功时需要执行的一个或多个回调函数
},
error: function (){
// fail()函数的别名,设置请求失败时需要执行的一个或多个回调函数
},
fail: function (){
// 设置请求失败时需要执行的一个或多个回调函数
},
getAllResponseHeaders: function (){
// 获取响应头信息的原始字符串
},
getResponseHeader: function (key){
// 获取响应头中指定名称的值
},
overrideMimeType: function (type){
// 重写 Content-Type响应头
},
pipe: function (){
// then()函数的别名,分别设置请求成功、失败、正在进行时需要执行的回调函数
},
progress: function (){
// 设置Deferred对象生成进度通知时需要执行的回调函数
},
promise: function (obj){
// 为指定对象追加Promise对象的成员,以充当Promise对象
},
readyState: 4, // 请求的状态
responseText: "<!DOCTYPE html><html>......</html>", // 响应的文本内容
setRequestHeader: function (name, value){
// 设置请求头
},
state: function (){
// 确定一个Deferred对象的当前状态,例如:"pending"、"resolved"、"rejected"
},
status: 200,
statusCode: function (map){
// 设置响应指定状态码需要执行的回调函数
// map形如:{ 301:function(){}, 404:function(){} }
},
statusText: "OK", // 状态响应头中的描述文本
success: function (){
// done()函数的别名,设置请求成功时需要执行的一个或多个回调函数
},
then: function (){
// 分别设置请求成功、失败、正在进行时需要执行的回调函数
}
};
jQuery.ajaxSetup() 方法设置全局 AJAX 默认选项。
jQuery.ajaxSetup(name:value, name:value, ...)
设置 AJAX 请求默认地址为 "/xmlhttp/"
,禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数:
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
参数 描述
name:value 可选。使用名称/值对来规定 AJAX 请求的设置。
serializeArray()
方法通过序列化表单值来创建对象数组(名称和值)。
您可以选择一个或多个表单元素(比如 input
及/
或 textarea
),或者 form
元素本身。
语法
$(selector).serializeArray()
详细说明
serializeArray()
方法序列化表单元素(类似 .serialize()
方法),返回 JSON 数据结构数据。
注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。
返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:
[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
{name: 'alias'}, // 值为空
]
jQuery ajax - load() 方法
加载页面片段
.load()
方法,与 $.get()
不同,允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。
我们可以修改上面的例子,这样就可以使用所获得文档的某部分:
$("#result").load("ajax/test.html #container");
如果执行该方法,则会取回 ajax/test.html
的内容,不过然后,jQuery 会解析被返回的文档,来查找带有容器 ID 的元素。该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。
jQuery 使用浏览器的 .innerHTML
属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 <html>
, <title>
或 <head>
元素。结果是,由 .load()
取回的元素可能与由浏览器直接取回的文档不完全相同。
注释:由于浏览器安全方面的限制,大多数 “Ajax” 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。
jQuery.fx.interval 属性
以较少的帧数来运行 <div>
元素的动画:
$("#toggle").on("click",function(){
$("div").toggle(5000);
});
$("#interval").on("click",function(){
jQuery.fx.interval = 500;
});
定义和用法
jQuery.fx.interval
属性用于改变以毫秒计的动画运行速率。可操作该属性来调整动画运行的每秒帧数。
默认值是 13 毫秒。该属性常用于修改动画运行的每秒帧数。
降低这个值能够使动画在更快的浏览器中运行得更流畅,但这么做也行会影响性能。
提示:由于 jQuery 使用一个全局的间隔时间,为了使该属性生效,动画应该不在运行或者首先停止所有动画。
注释:该属性在支持 requestAnimationFrame
属性的浏览器中无效,比如 Google Chrome 11。
警告:在 ECMAScript 第五版 (ES5)
的 严格模式 中禁止使用 arguments.callee()
。
三、callee
返回正被执行的 Function
对象,也就是所指定的 Function
对象的正文。
[function.]arguments.callee
可选项 function
参数是当前正在执行的 Function
对象的名称。
说明:callee
属性的初始值就是正被执行的 Function
对象。
callee
属性是 arguments
对象的一个成员,他表示对函数对象本身的引用,这有利于匿名函数的递归或确保函数的封装性,例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。更有需要注意的是callee
拥有length
属性,这个属性有时候用于验证还是比较好的。arguments.length
是实参度,arguments.callee.length
是形参长度,由此能够判断调用时形参长度是否和实参长度一致。
//callee能够打印其本身
function calleeDemo() {
alert(arguments.callee);
}
//递归计算
var sum = function(n){
if (n <= 0)
{
return 1;
}
else
{
return n +arguments.callee(n - 1)
}
}
比较一般的递归函数:
var sum = function(n){
if (1==n) return 1;
else return n + sum (n-1);
}
调用时:alert(sum(100));
其中函数内部包含了对sum自身的引用,函数名仅仅是个变量名,在函数内部调用sum
即相当于调用一个全局变量,不能很好的体现出是调用自身,这时使用callee
会是个比较好的方法。
stop(stopAll,goToEnd)
参数 描述
stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd 可选。规定是否允许完成当前的动画。
该参数只能在设置了 stopAll 参数时使用。
stopAll 为false时,不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时,停止所有加入队列的动画(如goToend为true,直接跳到当前动画的最终效果)。
goToend为false时,不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧),goToend为true时,允许直接跳到完成当前动画的最终末尾效果s
<script>
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
//注意这一块
//next() == $(this).dequeue();
//dequeue用来出列,queue是入列,具体含义你可以在手册里面看看
$("div").queue(function (next) {
$(this).addClass("newcolor");
next();
//$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").queue("fx", []);
$("div").stop();
});
</script>
定义和用法
triggerHandler()
方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。
triggerHandler()
方法与 trigger()
方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。
与 trigger()
方法相比的不同之处
它不会引起事件(比如表单提交)的默认行为
.trigger()
会操作 jQuery
对象匹配的所有元素,而 .triggerHandler()
只影响第一个匹配元素。
由 .triggerHandler()
创建的事件不会在 DOM
树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
该方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。此外,如果没有处理程序被触发,则这个方法返回 undefined
。
删除元素节点
由于我们需要经常动态去改变DOM元素,因此Jquery提供了两种删除节点的方法,即remove()
和empty()
;
1. remove()方法
$(“p”).remove();// 我们可以获取到要删除的元素,然后调用remove()方法
$(“ul li:eq(0)”).remove().appendTo(“ul”);// 删除ul下面的第一个li标记,然后再把删除的li标记重新加到ul里面,remove()方法返回删除元素的引用,这时你可以继续使用
$(“ul li”).remove(“li[title!=ABC]“);//remove可以接受通过参数来选择性的删除符合条件的元素;
2. empty()方法
严格来讲,empty()方法并不是删除元素,而是清空
例:
<ul>
<li title=”AAA”>AAA</li>
</ul>
JQuery代码
$(“ul li:eq(0)”).empty();
结果
<ul>
<li title=”AAA”></li>
</ul>
记住,只会清空内容,不会请空属性;
//①下面贴出 简单的jquery的ajax处理JS 设置 dataType 类型为script ,自动执行JS脚本
$(document).ready(function() {
$("#company").focus();
$("#company").mouseup(function() {
$.ajax({
type: "POST",
url: "checkCompanyExist.action",
data: "companyName="+$("#company").val(),
async: false,
//关键地方
dataType: "script"
});
});
});
// ②使用这个 $.get()调用ajax ,处理结果 . 直接执行JS
$(document).ready(function() {
$("#company").focus();
$("#company").mouseup(function() {
$.get("checkCompanyExist.action?companyName="+$("#company").val(), function(data){
eval(data);
});
});
});
//③ 对返回的结果进行处理,直接执行JS (用$.ajax还有个好处就是 在向 后台 参数的时候不会有乱码问题)
$(document).ready(function() {
$("#company").focus();
$("#company").mouseup(function() {
$.ajax({
type: "POST",
url: "checkCompanyExist.action",
data: "companyName="+$("#company").val(),
async: false,
success: function(msg){
eval(msg);
}
});
});
});
jquery根据name属性查找:
$("div[id]") 选择所有含有id属性的div元素
$("input[name='keleyicom']") 选择所有的name属性等于'keleyicom'的input元素
$("input[name!='keleyicom']") 选择所有的name属性不等于'keleyicom'的input元素
$("input[name^='keleyi']") 选择所有的name属性以'keleyi'开头的input元素
$("input[name$='keleyi']") 选择所有的name属性以'keleyi'结尾的input元素
$("input[name*='keleyi']") 选择所有的name属性包含'keleyi'的input元素
$("input[id][name$='keleyi']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素
例如:$(":input[name='keleyi']") 表示查找的是name为keleyi的表单。