jQuery高级

　一、动画效果

　　常用的几种效果都是没有easing参数的，也即动画只能swing。$(selector).animate(styles,speed,easing,callback)中是有easing参数的，jQuery中默认只有两种，linear和swing(摆动)，默认情况下是swing。若要使用更多参数，可以使用jquery.easing插件。

　　jQuery.easing.def = "string";可以使用string覆盖默认的swing。

　　使用该插件之后，有两种调用方式，1、直接在原来的参数后面添加一个easing参数，即slideDown(speed,easing,callback)这种形式。

　　2、不添加easing参数，而是直接修改speed参数，并合并callback参数。speed参数变为如下形式：

{ 
    duration: 1000, 
    easing: method, 
    complete: callback 
}

　　第一个持续时间，第二个easing参数，第三个callback参数。

　　3、甚至还可以这样

$(element).animate({ 
    width:[200, 'easeInOutBack'], 
    height:[200, 'easeOutBack'] 
},1000,callback);

　　对每一个变化的css使用不同的easing参数。

　　easing有以下几种参数：easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们是：linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine， easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce.

　　源码：可以参考源码写自己的easing。

　　二、动态绑定事件

　　bind(),on(),one()。不推荐用bind()，on()是首选方法，one()是执行一次的事件。

　　1、$(selector).bind(event,data,function,map)。

参数 描述
event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。需要按对象形式加入{a:1,b:2}。
function 必需。规定当事件发生时运行的函数。function可以有一个event参数，event.data可以取到上面的值。
map 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

　　绑定多个事件，处理处理程序只有一个：

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

　　同时绑定多个事件与事件处理程序：

$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
})

　　通过返回false来取消默认的行为并阻止事件起泡，但不阻止绑定在该元素上的其他事件。（这里注意一下，如果是直接onclick方法中return false，则不能阻止事件冒泡，只能阻止默认事件。）

$("form").bind("submit", function() { return false; })

　　通过使用 preventDefault() 方法只取消默认的行为。

$("form").bind("submit", function(event){
  event.preventDefault();
});

　　通过使用 stopPropagation() 方法只阻止一个事件冒泡。

$("form").bind("submit", function(event){
  event.stopPropagation();
});

　　通过使用stopImmediatePropagation()方法，阻止其他事件处理程序被调用，阻止该元素的次优先级程序及所有冒泡事件，但不阻止默认行为。

$("form").bind("submit", function(event){
  event.stopImmediatePropagation();
});

　　2、$(selector).unbind(event,function,eventObj)。

　　该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。

　　该方法也可以通过 event 对象取消绑定的事件处理程序。该方法也用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。

　　如果未规定参数，则 unbind() 方法会删除指定元素的所有事件处理程序。unbind() 方法适用于任意由 jQuery 添加的事件处理程序。

　　3、$(selector).on(event,childSelector,data,function,map)。on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

参数描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector

可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data 可选。规定传递到函数的额外数据。同上
function 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

　　基本同上，拓展：$("form").bind("submit", false);可以直接写false。同时，使用map时后面也可以跟参数，只用使用map替换event参数即可。

　　4、$(selector).off(event,selector,function(eventObj),map)。off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

　　参数同上，注意如果要移除事件，处理函数必须用函数对象传递，不能使用匿名函数传递。也可以使用event移除事件。

　　5、$(selector).one(event,data,function)。仅执行一次的事件，执行完后自动删除。

　　6、$(selector).live(event,data,function)。在版本 1.9 中被移除。

　　live() 方法为被选元素添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

　　通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

　　7、$(selector).die(event,function)。在版本 1.9 中被移除。

　　用于移除使用live()添加的事件。

　　8、$(selector).delegate(childSelector,event,data,function)。不推荐使用。

　　为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

　　9、$(selector).undelegate(selector,event,function)。用于删除使用delegate()添加的事件，不推荐使用。

　　方法移除一个或多个由 delegate() 方法添加的事件处理程序。

　　10、error事件。error() 方法在 jQuery 版本 1.8 中被废弃。可以使用bind('error', handler) 。

　　三、动态触发事件

　　使用代码动态触发事件，可以直接使用$(selector).event();来触发，不带参数。

　　使用triger来触发事件。

　　$(selector).trigger(event,eventObj,param1,param2,...);

　　其中event是事件名，参数是可以传递进去的参数，参数要用数组形式。用于自定义事件，即使是自定义事件，事件处理函数的第一个参数也必须是event，用于表明点击事件的对象。

　　event和eventObj两者不同时出现。eventObj是事件类型，可以使用jQuery.Event对象创建，可以将数据放进这个对象，并且这个对象可以被触发的事件处理函数获取到。详细的Event构造方法参考jQuery API。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中！");
  });
  var e = jQuery.Event("select");
  $("button").click(function(){
    $("input").trigger(e);
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
</body>
</html>

　　也可以使用triggerHandler来触发事件。与trigger不同，trigger() 也触发事件的默认行为（比如表单提交），triggerHandler不触发默认事件。

　　四、默认事件　

　　事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情。

　　怎么阻止？当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false;，之后浏览器便不会执行默认的操作了。

　　事件默认行为实例：（自定义右键菜单）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 200px; border: 1px solid red; position: absolute; display: none;}
</style>
<script>
window.onload = function() {
     
    var oDiv = document.getElementById('div1');
     
    document.oncontextmenu = function(ev) {
        var ev = ev || event;
         
        oDiv.style.display = 'block';
         
        oDiv.style.left = ev.clientX + 'px';
        oDiv.style.top = ev.clientY + 'px';
         
        return false;
         
    }
     
    document.onclick = function() {
        oDiv.style.display = 'none';
    }
     
}
</script>
</head>
 
<body>
    <div id="div1"></div>
</body>
</html>

 　　五、对于html元素中直接的事件处理

　　onclick="functionName()"，这里其实是把onclick后面的JavaScript语句加入一个事件函数中。使用后面的代码进行测试：

<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
alert(document.getElementById("test").onclick);
}
</script>
</head>
<body>

<input type="text" id="test" onclick="alert(123);"><br><br>

<button onclick="copyText()">测试函数</button>

<p>当按钮被单击时触发函数。此函数获取onclick的全部扩展属性，通过DOM的attribute获取属性内容文本。</p>

</body>
</html>

　　结果为：

function onclick(event){
    alert(123);
}

　　相当于自动创建了一个onclick函数，令后面文本内容列入此函数中。可以则拓展测试，使用不同语句加入时间处理函数后，该属性会获得什么内容。

　　当onclick函数返回false时，相当于禁止此事件。

　　六、jQuery Ajax

　　Ajax方法总览：

方法描述
$.ajax() 执行异步 AJAX 请求
$.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项
$.ajaxSetup() 为将来的 AJAX 请求设置默认值
$.ajaxTransport() 创建处理 Ajax 数据实际传送的对象
$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript() 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param() 创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete() 规定 AJAX 请求完成时运行的函数，Ajax 事件
ajaxError() 规定 AJAX 请求失败时运行的函数，Ajax 事件
ajaxSend() 规定 AJAX 请求发送之前运行的函数，Ajax 事件
ajaxStart() 规定第一个 AJAX 请求开始时运行的函数，Ajax 事件
ajaxStop() 规定所有的 AJAX 请求完成时运行的函数，Ajax 事件
ajaxSuccess() 规定 AJAX 请求成功完成时运行的函数，Ajax 事件
load() 从服务器加载数据，并把返回的数据放置到指定的元素中
serialize() 编码表单元素集为字符串以便提交
serializeArray() 编码表单元素集为 names 和 values 的数组

　　虽然方法很多，但是大多数都是对$.ajax()方法的简单化处理。下面针对$.ajax()进行详解。

　　1)、$.ajax({name:value, name:value, ... })

名称值/描述
async 布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr) 发送请求前运行的函数。如添加自定义 HTTP 头。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。status为描述请求类型的字符串。
contentType 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context 为所有 AJAX 相关的回调函数规定 "this" 值。
data 规定要发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType 预期的服务器响应的数据类型。
error(xhr,status,error) 如果请求失败要运行的函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
jsonp 在一个 jsonp 中重写回调函数的字符串。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
jsonpCallback 在一个 jsonp 中规定回调函数的名称。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
password 规定在 HTTP 访问认证请求中使用的密码。用于响应 HTTP 访问认证请求的密码.
processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
scriptCharset 规定请求的字符集。只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
success(result,status,xhr) 当请求成功时运行的函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
timeout 设置本地的请求超时时间（以毫秒计）。此设置将覆盖全局设置。
traditional 布尔值，规定是否使用参数序列化的传统样式。如果你想要用传统的方式来序列化数据，那么就设置为 true。
type 规定请求的类型（GET 或 POST）。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url 规定发送请求的 URL。默认是当前页面。
username 规定在 HTTP 访问认证请求中使用的用户名。用于响应 HTTP 访问认证请求的用户名。
xhr 用于创建 XMLHttpRequest 对象的函数。需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。

　　关于dataType:预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

  • "xml": 返回 XML 文档，可用 jQuery 处理。
  • "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  • "json": 返回 JSON 数据 。
  • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  • "text": 返回纯文本字符串

　　$.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML，那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型，比如 HTML，则数据就以文本形式来对待。

　　通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML，还可以指定 html、json、jsonp、script 或者 text。

　　其中，text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。

　　注意：我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。

　　如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。类似地，指定 script 类型的话，也会先执行服务器端生成 JavaScript，然后再把脚本作为一个文本数据返回。

　　如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。如果浏览器不支持，则使用一个函数来构建。

　　JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名，以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback，可以通过设置 $.ajax() 的 jsonp 参数。

　　注意：JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。

　　如果指定了 script 或者 jsonp 类型，那么当从服务器接收到数据时，实际上是用了 <script> 标签而不是 XMLHttpRequest 对象。这种情况下，$.ajax() 不再返回一个 XMLHttpRequest 对象，并且也不会传递事件处理函数，比如 beforeSend。

　　处理数据的回调函数：

　　如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
　　beforeSend
　　在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
　　error
　　在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
　　dataFilter
　　在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
　　success
　　当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
　　complete
　　当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。

　　发送数据到服务器：

　　默认情况下，Ajax 请求使用 GET 方法。如果要使用 POST 方法，可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。
　　data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变 contentType 选项的值，用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。

　　高级选项

　　global 选项用于阻止响应注册的回调函数，比如 .ajaxSend，或者 ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在 ajaxSend 里禁用这个。
　　如果服务器需要 HTTP 认证，可以使用用户名和密码可以通过 username 和 password 选项来设置。
　　Ajax 请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过 jQuery.ajaxSetup 来全局设定，很少为特定的请求重新设置 timeout 选项。
　　默认情况下，请求总会被发出去，但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果，可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置 ifModified 为 true。
　　scriptCharset 允许给 <script> 标签的请求设定一个特定的字符集，用于 script 或者 jsonp 类似的数据。当脚本和页面字符集不同时，这特别好用。
　　Ajax 的第一个字母是 asynchronous 的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax() 的 async 参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成 false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。
　　$.ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象，但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的 .abort() 可以在请求完成前挂起请求。

　　2)、$.ajaxSetup({name:value, name:value, ... })

　　$.ajax方法的所有参数都是可以不设置的，都存在默认值，而ajaxSetup就是设置ajax方法的默认值的。参数同$.ajax。

　　3)、$.param(object,trad)

　　对一个对象或数组进行序列化，序列化为URL查询字符串的形式，序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。如果是数字，数组内必须是对象形式，对象内的数字也可以正常序列化。

　　第二个参数规定是否使用传统的方式浅层进行序列化（参数序列化）。

　　param() 方法用于在内部将元素值转换为序列化的字符串表示。对于 jQuery 1.3，如果传递的参数是一个函数，那么用 .param() 会得到这个函数的返回值，而不是把这个函数作为一个字符串来返回。对于 jQuery 1.4，.param() 方法将会通过深度递归的方式序列化对象，以便符合现代化脚本语言的需求，比如 PHP、Ruby on Rails 等。你可以通过设置 jQuery.ajaxSettings.traditional = true; 来全局地禁用这个功能。

　　4)、$(selector).load(url,data,function(response,status,xhr))

　　该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当侦测到成功的响应时（比如，当 textStatus 为 "success" 或 "notmodified" 时），.load() 将匹配元素的 HTML 内容设置为返回的数据。如果提供回调函数，则会在执行 post-processing 之后执行该函数。

　　特殊的是他可以加载页面片段：

　　.load() 方法，与 $.get() 不同，允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格，紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。如：$("#result").load("ajax/test.html #container");如果执行该方法，则会取回 ajax/test.html 的内容，不过然后，jQuery 会解析被返回的文档，来查找带有容器 ID 的元素。该元素，连同其内容，会被插入带有结果 ID 的元素中，所取回文档的其余部分会被丢弃。

　　jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档，并把它插入当前文档。在此过程中，浏览器常会从文档中过滤掉元素，比如 <html>, <title> 或 <head> 元素。结果是，由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

　　注意：由于浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。

　　5)、$(selector).serialize()

　　serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些。

　　注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

　　6)、$(selector).serializeArray()

　　serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。

　　serializeArray() 方法序列化表单元素，返回 JSON 数据结构数据。此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数（如果 value 不为空的话）。

　　serializeArray() 方法使用了 W3C 关于 successful controls（有效控件） 的标准来检测哪些元素应当包括在内。特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。该方法可以对已选择单独表单元素的对象进行操作，比如 <input>, <textarea>, 和 <select>。不过，更方便的方法是，直接选择 <form> 标签自身来进行序列化操作。

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

//recursiveEncoded 和 recursiveDecoded 的值输出如下：

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

//后面参数为true时
a=%5Bobject+Object%5D&b=1&b=2&b=3
a=[object+Object]&b=1&b=2&b=3

 　　七、HTML操作方法

　　1)、$(selector).detach()，detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。该方法会保留移除元素的副本，作为返回值，允许它们在以后被重新插入。

　　2)、属性操作，prop() 和 attr() 之间的不同。.prop()方法应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

　　.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以继续运行，就像1.6之前做的那样)

　　从性能上对比，.prop() > .data() > .attr()，不同浏览器不同版本.data()和.attr()的性能关系有差异，不过.prop()总是最优的。

　　顺便提下DOM元素获取属性的两种方法，第一种是使用getAttribute()，该方法获取有些动态属性如表单值时，会获取初始值，而不是即时值，且获取的类型为字符串。第二种是通过元素属性来访问值，如.value()，属性访问可以保证获得当前值，类型可以直接为数字。

　　.attr()，此方法从jq1.0开始一直存在，官方文档写的作用是读/写DOM的attribute值，其实1.6之前有时候是attribute，有时候又是property。

　　.prop()，此方法jq1.6引入，读/写DOM的property。

　　.data()，此方法在jq1.2.3引入，作用是把任意的值读取/存储到DOM元素对应的jq对象上。

　　.data()，我们知道 html 5里面DOM标签可以加以一些data-xxx的属性，你可以把.data()看作是存取data-xxx这样DOM附加信息的方法。当 然，.data()存取的内容不仅是字符串，还可以包含数组和对象。data-xxx属性会自动被添加到jq的data对象里。

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"noahlu"}'></div>
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "noahlu";

　　具体对比参考推酷。

　　八、jQuery遍历方法（注意区分domElement于jQuery对象）

　　1)、addBack()与andSelf()，把之前的元素集添加到当前集合中，如用.next()获取下一个元素后，还想包括本元素，可以使用addBack()，返回包括当前元素的元素集合。

　　2)、closest()，返回被选元素的第一个祖先元素。如一个元素上层有两个<div>，使用这个会返回最里层的<div>。

　　3)、offsetParent()，返回第一个不使用默认定位的祖先元素

　　4)、each(function(index,element))，为每个被选择的元素执行方法

　　5)、has(element)，返回拥有匹配指定选择器的一个或多个元素在其内的所有元素

　　6)、is()，根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true

　　7)、map()，把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象

　　.map(callback(index,domElement))，由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。.map() 方法对于获得或设置元素集的值特别有用。在 callback 函数内部，this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项，或者是要被插入结果集中的数据项的数组。如果返回的是数组，数组内的元素会被插入集合中。如果函数返回 null 或 undefined，则不会插入任何元素。

　　8)、contents()，返回所有直接子元素，包括被选元素的文本和注释节点。contents() 方法也能访问 iframe 的 HTML。

　　9)、eq(index)，返回带有被选元素的指定索引号的元素。可以使用负数。

　　10)、end()，结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

　　11)、slice(start,stop)，选取基于索引的元素的子集。子集是一个属于大的集合中的一部分的集合。该方法用于通过开始点和结束点来限制组合中元素的选择。不包括最后一个点。

　　12)、data()，向被选元素附加数据，或者从被选元素获取数据。可以使用底层的jQuery.data把数据存储在底层，jQuery.hasData()用于判断是否有特定的数据。

　　13)、get(index)，获取由选择器指定的 DOM 元素。

　　14)、index()，用于和this配合，返回指定元素相对于其他指定元素的 index 位置。

　　15)、size()，返回被 jQuery 选择器匹配的元素的数量。在 jQuery 版本 1.8 中被废弃。 请使用 length 属性代替。

　　16)、toArray()，以数组的形式返回 jQuery 选择器匹配的元素。

　　17)、队列控制：

函数描述
.clearQueue(queueName) 从队列中删除所有未运行的项目。
.dequeue(queueName) 从队列最前端移除一个队列函数，并执行它。
jQuery.dequeue(queueName) 从队列最前端移除一个队列函数，并执行它。
.queue(queueName) 显示或操作匹配元素所执行函数的队列。
jQuery.queue(queueName) 显示或操作匹配元素所执行函数的队列。

　　queueName字符串为序列名，默认为fx，标准的效果序列。

　　要用到queueName的还有delay(duration, [queueName])，用于延时序列。

　　上面所有函数还有另外一个参数，为函数Array<Function>，用于替换的队列。所有函数都有同一个参数，这个值与queue(callback)相同。

　　以queue为例子说明：.queue(queueName,newQueue)。

　　queueName：可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

　　每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中，只使用一个队列（名为 fx）。队列运行在元素上异步地调用动作序列，而不会终止程序执行。典型例子时调用元素上的多个动画方法。$('#foo').slideUp().fadeIn();当这条语句执行时，元素会立即开始其滑动动画，但是淡入过渡被置于 fx 队列，只有当滑动过渡完成后才会被调用。.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用；它允许我们在队列末端放置一个新函数。这个特性与动画方法提供回调函数类似，但是无需在动画执行时设置回调函数。请注意，当通过 .queue() 添加函数时，我们应当确保最终调用了 .dequeue()，这样下一个排队的函数才能执行。

　　可以调用$("div").queue("fx", []);来清除队列内容。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>

  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

  <button id="start">开始</button>
  <button id="stop">结束</button>
  <div></div>

 <script>
    $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(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>

</body>
</html>

　　queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组)。该函数只是添加了队列，并不会对队列执行，要执行必须使用dequeue。

　　dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它。所以如果不调用它，队列中的函数不会得到执行的机会。当调用 .dequeue() 时，会从序列中删除下一个函数，然后执行它。该函数反过来会（直接或间接地）引发对 .dequeue() 的调用，这样序列才能继续下去。

　　clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但很多人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法。

　　要先理解，队列中的函数就是移除一个执行一个。也可以自己创建队列：

var _slideFun=[ 
function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);}, 
function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);}, 
function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);}, 
function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);}, 
function(){$('.five').delay(300).animate({top:'+=270px'},500,_takeOne);}, 
function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);}, 
function(){$('.seven').delay(300).animate({top:'+=270px'},500,function(){ 
alert('按序落体运动结束! Yeah!'); 
});} 
]; 
$('#demo').queue('slideList',_slideFun); 
var _takeOne=function(){ 
$('#demo').dequeue('slideList'); 
}; 
_takeOne();

　　1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?); 
　　2. 用queue将这组动画函数数组加入到slideList队列中; 
　　3. 用dequeue取出slideList队列中第一个函数, 并执行它; 
　　4. 初始执行第一个函数. 

posted @ 2015-01-14 13:55  光闪  阅读(389)  评论(0)  编辑  收藏  举报