Web_JavaScript_JQuery_JQuery参考知识;

来源:互联网 发布:vscode 真机调试 编辑:程序博客网 时间:2024/04/29 18:51
jQuery 参考手册(2014/12/17 22:54)


前言:W3school 提供完整的 jQuery 参考手册以及大量的在线实例;
1、jQuery 参考手册
选择器
事件
效果
文档操作
属性
CSS
AJAX
遍历
数据
DOM 元素
核心


一、jQuery 参考手册 - 选择器
元素选择器、属性选择器、CSS 选择器




二、jQuery 参考手册 - 事件
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
1、触发事件
// 将触发 id="demo" 的 button 元素的 click 事件
$("button#demo").click()


2、绑定函数
// 在点击 id="demo" 的按钮时隐藏所有图像
$("button#demo").click(function(){$("img").hide()})


3、bind()方法_向匹配元素附加一个或更多事件处理器
// 当点击鼠标时,隐藏或显示 p 元素
$("button").bind("click",function(){
  $("p").slideToggle();
});
(1)、定义和用法
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
(2)、将事件和函数绑定到元素
规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数。
语法:$(selector).bind(event,data,function);
参数:event,必需,规定添加到元素的一个或多个事件,由空格分隔多个事件,必须是有效的事件;data,可选,规定传递到函数的额外数据;function,必需,规定当事件发生时运行的函数;
替代语法:$(selector).bind({event:function, event:function, ...});
参数:{event:function, event:function, ...} 必需。规定事件映射,其中包含一个或多个添加到元素的事件,以及当事件发生时运行的函数。
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});


4、blur()方法_触发、或将函数绑定到指定元素的 blur 事件
// 当输入域失去焦点 (blur) 时改变其颜色:
$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});
(1)、定义和用法
当元素失去焦点时发生 blur 事件。提示:早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素。
(2)、触发 blur 事件
// 触发被选元素的 blur 事件
$(selector).blur();
(3)、将函数绑定到 blur 事件
// 规定当被选元素的 blur 事件发生时运行的函数
$(selector).blur(function);
function 可选。规定当 blur 事件发生时运行的函数。


5、change()方法
// 当输入域发生变化时改变其颜色
$(".field").change(function(){ // 类名为field的输入域;
  $(this).css("background-color","#FFFFCC");
});
(1)、定义和用法
当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
(2)、触发 change 事件
触发被选元素的 change 事件
$(selector).change();
(3)、绑定函数
规定当被选元素的 change 事件发生时运行的函数。
$(selector).change(function);
function,可选,规定当 change 事件发生时运行的函数。


6、click()方法
触发、或将函数绑定到指定元素的 click 事件;
// 当点击按钮时,隐藏或显示元素
$("button").click(function(){
  $("p").slideToggle();
});
(1)、定义和用法
当点击元素时,会发生 click 事件。当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。
(2)、触发 click 事件
$(selector).click();
(3)、将函数绑定到 click 事件
$(selector).click(function);


7、dblclick()方法
(1)、定义和用法
当双击元素时,会发生 dblclick 事件。当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。在很短的时间内发生两次 click,即是一次 double click 事件。dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数。
提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题。
(2)、触发 dblclick 事件
$(selector).dblclick();
(3)、将函数绑定到 dblclick 事件
$(selector).dblclick(function);


8、delegate()方法
向匹配元素的当前或未来的子元素附加一个或多个事件处理器;
// 委托div里btn按钮:当点击时,隐藏或显示 p 元素
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});
(1)、定义和用法
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
语法:$(selector).delegate(childSelector,event,data,function);
参数:childSelector,必需,规定要附加事件处理程序的一个或多个子元素;event,必需,规定附加到元素的一个或多个事件,由空格分隔多个事件值,必须是有效的事件;data,可选,规定传递到函数的额外数据;function,必需,规定当事件发生时运行的函数;
// 向未来的元素添加事件处理程序
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("div").delegate("p", "click", function() {
                $(this).slideToggle();
            });
            $("button").click(function() {
                $("<p>这是一个新段落。</p>").insertAfter("button");
            });
        });
    </script>
</head>
<body>
    <div style="background-color:yellow">
        <p>这是一个段落。</p>
        <p>这是一个段落。</p>
        <button>插入新段</button>
    </div>
    <p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p>
</body>
</html>


9、die()方法
移除所有通过 live() 函数添加的事件处理程序。
// 移除所有通过 live() 方法向 p 元素添加的事件处理程序
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("p").live("click", function() {
                $(this).slideToggle();
            });
            $("button").click(function() {
                $("p").die();
            });
        });
    </script>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是一个段落。</p>
    <p>请点击任意 p 元素,段落会消失。包括本段落。</p>
    <button>移除处理程序</button>
</body>
</html>
(1)、定义和用法
die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
语法:$(selector).die(event,function);
参数:event,必需,规定要移除的一个或多个事件处理程序,由空格分隔多个事件值,必须是有效的事件;function,可选,规定要移除的特定函数;
(2)、移除特定事件特定函数
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        function changeSize() {
            $(this).animate({
                fontSize: "+=3px"
            });
        }
        function changeSpace() {
            $(this).animate({
                letterSpacing: "+=0.5em"
            });
        }
        $(document).ready(function() {
            $("p").live("click", changeSize);
            $("p").live("click", changeSpace);
            $("button").click(function() {
                $("p").die("click", changeSize);
            });
        });
    </script>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是一个段落。</p>
    <p>I love you!</p>
    <p>点击任意 p 元素可以增加尺寸和字间距。包括该段落。</p>
    <button>移除函数</button>
    <p>注释:移除通过 live() 方法为 p 元素添加的 changeSize() 事件处理器</p>
</body>
</html>


10、error()方法
触发、或将函数绑定到指定元素的 error 事件
// 如果图像不存在,则用预定义文本取代它
$("img").error(function(){
  $("img").replaceWith("
Missing image!
  ");
});
(1)、定义和用法
当元素遇到错误(没有正确载入)时,发生 error 事件。error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。
提示:该方法是 bind('error', handler) 的简写方式。
(2)、触发 error 事件
$(selector).error();
(3)、将函数绑定到 error 事件
$(selector).error(function);


11、event.isDefaultPrevented()方法
返回 event 对象上是否调用event.preventDefault()。
//防止链接打开 URL,并声明来自 isDefaultPrevented() 的结果
$("a").click(function(event){
   event.preventDefault(); // 防止链接打开;
   alert("Default prevented: " + event.isDefaultPrevented());// 返回true;
});
(1)、定义和用法
isDefaultPrevented() 方法返回指定的 event 对象上是否调用 preventDefault() 方法,返回布尔类型;
语法:event.isDefaultPrevented();
参数:event,必需,规定需要检查的事件,这个 event 参数来自事件绑定函数,就是函数参数传进来的;


12、event.pageX属性_相对于文档左边缘的鼠标位置;
13、event.pageY属性_相对于文档上边缘的鼠标位置;
// 显示鼠标指针的位置
$(document).mousemove(function(e){
  $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});


14、event.preventDefault()方法
阻止事件的默认动作(比如阻止链接跳转)。
// 防止链接打开 URL
$("a").click(function(event){
  event.preventDefault();
});
(1)、定义和用法
preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
event.preventDefault();


15、event.result属性
包含由被指定事件触发的事件处理器返回的最后一个值。
// 显示最后一次点击事件返回的结果
$("button").click(function(e) {
  $("p").html(e.result);
});
(1)、定义和用法
result 属性包含由被指定事件触发的事件处理器返回的最后一个值,除非这个值未定义。


16、event.target属性_触发该事件的 DOM 元素;
// 显示哪个 DOM 元素触发事件
$("p, button, h1, h2").click(function(event){
  $("div").html("Triggered by a " + event.target.nodeName + " element.");
});


17、event.timeStamp属性_该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数(时间戳)。
18、event.type属性_描述事件的类型。
// 显示哪种类型的事件
$("p").bind('click dblclick mouseover mouseout',function(event){
  $("div").html("Event: " + event.type);
});


16、event.which属性_指示按哪个键或按钮。
// 显示按了哪个键
$("input").keydown(function(event){
  $("div").html("Key: " + event.which);
});
17、focus()方法
触发、或将函数绑定到指定元素的 focus 事件;


18、keydown()方法_触发、或将函数绑定到指定元素的 key down 事件;
19、keypress()方法_触发、或将函数绑定到指定元素的 key press 事件;
20、keyup()方法_触发、或将函数绑定到指定元素的 key up 事件;


21、live()方法
为当前或未来的匹配元素添加一个或多个事件处理器,可用die()移除;
(1)、定义和用法
live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
语法:$(selector).live(event,data,function);


22、load()方法
触发、或将函数绑定到指定元素的 load 事件。
// 当图像加载时,改变 div 元素的文本
$("img").load(function(){
  $("div").text("Image loaded");
});
(1)、定义和用法
当指定的元素(及子元素)已加载时,会发生 load() 事件。该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。
注释:还存在一个名为 load() 的 jQuery Ajax 方法,根据不同的参数而定。
语法:$(selector).load(function);


23、mousedown()方法_触发、或将函数绑定到指定元素的 mouse down 事件;
24、mouseenter()方法_触发、或将函数绑定到指定元素的 mouse enter 事件;
注释:与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件,但不会触发mouseenter事件。
25、mouseleave()方法_触发、或将函数绑定到指定元素的 mouse leave 事件;
注释:与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件,但不会触发mouseleave事件。
26、mousemove()方法_触发、或将函数绑定到指定元素的 mouse move 事件;
注意:用户把鼠标移动一个像素,就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。
27、mouseout()方法_触发、或将函数绑定到指定元素的 mouse out 事件;
注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
28、mouseover()方法_触发、或将函数绑定到指定元素的 mouse over 事件;
注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
29、mouseup()方法_触发、或将函数绑定到指定元素的 mouse up 事件;


30、one()方法_向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
// 当点击 p 元素时,增加该元素的文本大小
$("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
});
(1)、定义和用法
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
语法:$(selector).one(event,data,function);


31、ready()方法_文档就绪事件(当 HTML 文档就绪可用时)
// 在文档加载后激活函数
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideToggle();
  });
});
(1)、定义和用法
当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
切记:ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档,因此无需选择器。
(2)、语法
$(document).ready(function);
$().ready(function);
$(function);
提示:ready() 函数不应与 <body onload=""> 一起使用。


32、resize()方法_触发、或将函数绑定到指定元素的 resize 事件;
// 对浏览器窗口调整大小进行计数
$(window).resize(function() {
  $('span').text(x+=1);
});


32、scroll()方法_触发、或将函数绑定到指定元素的 scroll 事件
当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。


33、select()方法_触发、或将函数绑定到指定元素的 select 事件
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
$("input").select(function(){
$("input").after(" Text marked!");// 在输入域后添加文字;
});


34、submit()方法_触发、或将函数绑定到指定元素的 submit 事件
// 当提交表单时,显示警告框
$("form").submit(function(e){
  alert("Submitted");
});


35、toggle()方法_绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
// 切换不同的背景色
$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);
toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。该方法也可用于切换被选元素的 hide() 与 show() 方法。
(1)、向 Toggle 事件绑定两个或更多函数
当指定元素被点击时,在两个或多个函数之间轮流切换。如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。例如,如果存在三个函数,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数。第四次点击再次调用第一个函数,以此类推。
语法:$(selector).toggle(function1(),function2(),functionN(),...);
(2)、切换 Hide() 和 Show()
检查每个元素是否可见。如果元素已隐藏,则运行 show()。如果元素可见,则元素 hide()。这样就可以创造切换效果。
语法:$(selector).toggle(speed,callback);
参数:speed,可选,规定 hide/show 效果的速度,默认是 "0",可能的值:毫秒(比如 1500)、"slow"、"normal"、"fast";
(3)、显示或隐藏元素
规定是否只显示或只隐藏所有匹配的元素。
语法:$(selector).toggle(switch);
参数:switch,必需,布尔值,规定 toggle() 是否应只显示或只隐藏所有被选元素,true - 显示元素,false - 隐藏元素;


36、trigger()方法_触发所有匹配元素的指定事件
//触发 input 元素的 select 事件
$("button").click(function(){
  $("input").trigger("select");
});
(1)、定义
trigger() 方法触发被选元素的指定事件类型。
(2)、触发事件
$(selector).trigger(event,[param1,param2,...])
(3)、使用 Event 对象来触发事件
语法:$(selector).trigger(eventObj);
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中!");
  });
  var e = jQuery.Event("select");
  $("button").click(function(){
    $("input").trigger(e);
  });
});


37、triggerHandler()方法_触发指定事件的处理函数,不会引起所发生事件的默认行为;
(1)、定义和用法
triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。
(2)、与 trigger() 方法相比的不同之处
a、它不会引起事件(比如表单提交)的默认行为;
b、.trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素;
c、由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情;
d、该方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。此外,如果没有处理程序被触发,则这个方法返回 undefined;
(3)、触发事件
语法:$(selector).triggerHandler(event,[param1,param2,...]);


38、unbind()方法_从匹配元素移除一个被添加的事件处理器
(1)、定义和用法
unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。ubind() 适用于任何通过 jQuery 附加的事件处理程序。
(2)、取消绑定元素的事件处理程序和函数
规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。
语法:$(selector).unbind(event,function);
(3)、使用 Event 对象来取消绑定事件处理程序
规定要删除的事件对象。用于对自身内部的事件取消绑定(比如当事件已被触发一定次数之后,删除事件处理程序)。如果未规定参数,则 unbind() 方法会删除指定元素的所有事件处理程序。
语法:$(selector).unbind(eventObj);


39、undelegate()方法_从匹配元素移除一个被添加的事件处理器,现在或将来
// 从所有元素删除由 delegate() 方法添加的所有事件处理器
$("body").undelegate();
(1)、定义和用法
undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。
语法:$(selector).undelegate(selector,event,function);


40、unload()方法_触发、或将函数绑定到指定元素的 unload 事件
// 当用户点击链接离开本页时,弹出一个消息框
$(window).unload(function(){
  alert("Goodbye!");
});
(1)、定义和用法
当用户离开页面时,会发生 unload 事件。
具体来说,当发生以下情况时,会发出 unload 事件:
点击某个离开页面的链接;
在地址栏中键入新的 URL;
使用前进或后退按钮;
关闭浏览器;
重新加载页面;
unload() 方法将事件处理程序绑定到 unload 事件。unload() 方法只应用于 window 对象。
语法:event.unload(function);




三、jQuery 参考手册 - 效果
1、animate()方法_对被选元素应用“自定义”的动画
(1)、定义和用法
animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。
(2)、语法 1
$(selector).animate(styles,speed,easing,callback);
styles:必需。规定产生动画效果的 CSS 样式和值。注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。
speed:可选。规定动画的速度。默认是 "normal"。可能的值:毫秒 (比如 1500)、"slow"、"normal"、"fast";
easing:可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数:swing、linear;
callback:可选。animate 函数执行完之后,要执行的函数。
(3)、语法 2
$(selector).animate(styles,options);
styles:必需。规定产生动画效果的 CSS 样式和值(同上)。
options:可选。规定动画的额外选项。可能的值:speed - 设置动画的速度;easing - 规定要使用的 easing 函数;callback - 规定动画完成之后要执行的函数;step - 规定动画的每一步完成之后要执行的函数;queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始;specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数;


2、clearQueue()方法_对被选元素移除所有排队的函数(仍未运行的)
// 停止当前正在运行的动画
$("#stop").click(function(){
  $("#box").clearQueue();
});
(1)、定义和用法
clearQueue() 方法停止队列中所有仍未执行的函数。与 stop() 方法不同,(只适用于动画),clearQueue() 能够清除任何排队的函数(通过 .queue() 方法添加到通用 jQuery 队列的任何函数)。
语法:$(selector).clearQueue(queueName);
参数:queueName,可选。规定要停止的队列的名称。默认是 "fx",标准效果队列。


3、delay()方法_对被选元素的所有排队函数(仍未运行)设置延迟
4、dequeue()方法_运行被选元素的下一个排队函数
5、fadeIn()方法_逐渐改变被选元素的不透明度,从隐藏到可见
提示:如果元素已经显示,则该效果不产生任何变化,除非规定了 callback 函数。
注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。
6、fadeOut()方法_逐渐改变被选元素的不透明度,从可见到隐藏
7、fadeTo()方法_把被选元素逐渐改变至给定的不透明度
8、hide()方法_隐藏被选的元素
9、queue()方法_显示被选元素的排队函数
10、show()方法_显示被选的元素
11、slideDown()方法_通过调整高度来滑动显示被选元素
12、slideToggle()方法_选元素进行滑动隐藏和滑动显示的切换
13、slideUp()方法_通过调整高度来滑动隐藏被选元素
14、stop()方法_停止在被选元素上运行动画
// 停止当前正在运行的动画
$("#stop").click(function(){
  $("#box").stop();
});
(1)、定义和用法
stop() 方法停止当前正在运行的动画。
语法:$(selector).stop(stopAll,goToEnd);
参数:stopAll,可选,规定是否停止被选元素的所有加入队列的动画;goToEnd,可选,规定是否允许完成当前的动画,该参数只能在设置 stopAll 参数时使用;


15、toggle()方法_对被选元素进行隐藏和显示的切换
(1)、定义和用法
toggle() 方法切换元素的可见状态;
(2)、语法
$(selector).toggle(speed,callback,switch);
speed:可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。如果设置此参数,则无法使用 switch 参数。
callback:可选。toggle 函数执行完之后,要执行的函数。
switch:可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。True - 显示所有元素;False - 隐藏所有元素;如果设置此参数,则无法使用 speed 和 callback 参数。
注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。


四、jQuery 参考手册 - 文档操作
1、addClass()_向匹配的元素添加指定的类名
// 向第一个 p 元素添加一个类
$("button").click(function(){
  $("p:first").addClass("intro");
});
(1)、定义和用法
addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。
提示:如需添加多个类,请使用空格分隔类名。
语法:$(selector).addClass(class);
(2)、使用函数来添加类
// 使用函数向被选元素添加类
$(selector).addClass(function(index,oldclass));
参数:function(index,oldclass),必需。规定返回一个或多个待添加类名的函数。index - 可选。选择器的 index 位置。class - 可选。选择器的旧的类名。


2、after()_在匹配的元素之后插入内容
// 在每个 p 元素后插入内容
$("button").click(function(){
  $("p").after("<p>Hello world!</p>");
});


3、append()_向匹配元素集合中的每个元素结尾插入由参数指定的内容
(1)、定义和用法
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。
提示:append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容的位置和选择器。


4、appendTo()_
// 在每个 p 元素结尾插入内容
$("button").click(function(){
  $("<b>Hello World!</b>").appendTo("p");
});
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。
语法:$(content).appendTo(selector);


5、attr()_设置或返回匹配元素的属性和值
6、before()_在每个匹配的元素之前插入内容
7、clone()_创建匹配元素集合的副本
8、detach()_从 DOM 中移除匹配元素集合
// 移除所有 p 元素
$("button").click(function(){
  $("p").detach();
});
detach() 方法移除被选元素,包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
语法:$(selector).detach();


9、empty()_删除匹配的元素集合中所有的子节点
empty() 方法从被选元素移除所有内容,包括所有文本和子节点。


10、hasClass()_检查匹配的元素是否拥有指定的类
11、html()_设置或返回匹配的元素集合中的 HTML 内容
当使用该方法返回一个值时,它会返回第一个匹配元素的内容。
当使用该方法设置一个值时,它会覆盖所有匹配元素的内容。


12、insertAfter()_把匹配的元素插入到另一个指定的元素集合的后面
// 在每个 p 元素之后插入 span 元素
$("button").click(function(){
  $("<span>Hello world!</span>").insertAfter("p");
});
insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。
注释:如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之后。


13、insertBefore()_把匹配的元素插入到另一个指定的元素集合的前面
// 在每个 p 元素之前插入 span 元素
$("button").click(function(){
  $("<span>Hello world!</span>").insertBefore("p");
});


14、prepend()_向匹配元素集合中的每个元素开头插入由参数指定的内容
prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。
提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prependTo() 无法使用函数来插入内容。


15、prependTo()
// 在每个 p 元素的开头插入内容
$(".btn1").click(function(){
  $("<b>Hello World!</b>").prependTo("p");
});


16、remove()_移除所有匹配的元素
remove() 方法移除被选元素,包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。


17、removeAttr()_从所有匹配的元素中移除指定的属性
// 从任何 p 元素中移除 id 属性
$("button").click(function(){
  $("p").removeAttr("id");
});


18、removeClass()_从所有匹配的元素中删除全部或者指定的类
19、replaceAll()_用匹配的元素替换所有匹配到的元素
// 用粗体文本替换每个段落
$(".btn1").click(function(){
   $("p").replaceAll("<b>Hello world!</b>");
});
replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。
提示:replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。


20、replaceWith()_用新内容替换匹配的元素
21、text()_设置或返回匹配元素的内容
22、toggleClass()_从匹配的元素中添加或删除一个类
23、unwrap()_移除指定元素的父元素
// 删除所有 <p> 元素的父元素
$("button").click(function(){
  $("p").unwrap();
});


24、val()_设置或返回匹配元素的值
25、wrap()_把匹配的元素用指定的内容或元素包裹起来
26、wrapAll()_把所有匹配的元素用指定的内容或元素包裹起来
27、wrapinner()_将每一个匹配的元素的子内容用指定的内容或元素包裹起来
// 在每个 p 元素的内容上包围 b 元素
$(".btn1").click(function(){
   $("p").wrapInner("<b></b>");
});




五、jQuery 参考手册 - 属性操作
前言:下面列出的这些方法获得或设置元素的 DOM 属性。这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。
1、addClass()_向匹配的元素添加指定的类名
2、attr()_设置或返回匹配元素的属性和值
3、hasClass()_检查匹配的元素是否拥有指定的类
4、html()_设置或返回匹配的元素集合中的 HTML 内容
5、removeAttr()_从所有匹配的元素中移除指定的属性
6、removeClass()_从所有匹配的元素中删除全部或者指定的类
注释:如果没有规定参数,则该方法将从被选元素中删除所有类。
7、toggleClass()_从匹配的元素中添加或删除一个类
8、val()_设置或返回匹配元素的值




六、jQuery 参考手册 - CSS 操作
1、css()_设置或返回匹配元素的样式属性
2、height()_设置或返回匹配元素的高度
3、offset()_返回第一个匹配元素相对于文档的位置
offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。


4、offsetParent()_返回最近的定位祖先元素
5、position()_返回第一个匹配元素相对于父元素的位置
position() 方法返回匹配元素相对于父元素的位置(偏移)。
6、scrollLeft()_设置或返回匹配元素相对滚动条(水平滚动条)左侧的偏移
scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时,位置是 0。


7、scrollTop()_设置或返回匹配元素相对滚动条顶部的偏移
8、width()_设置或返回匹配元素的宽度 


七、jQuery 参考手册 - Ajax
前言:jQuery Ajax 操作函数,jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
1、jQuery.ajax()
说明:执行异步 HTTP (Ajax) 请求。
实例:通过 AJAX 加载一段文本
// jquery ajax
$(document).ready(function(){
  $("#b01").click(function(){
 htmlobj=$.ajax({
url:"/jquery/test1.txt",
async:false
 });
 $("#myDiv").html(htmlobj.responseText);
  });
});
// HTML页面代码
<div id="myDiv">
<h2>Let AJAX change this text</h2>
</div>
<button id="b01" type="button">Change Content</button>
// test1文件内容
<p>AJAX is not a programming language.</p>
<p>It is just a technique for creating better and more interactive web applications.</p>
(1)、定义和用法
ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。最简单的情况下,$.ajax() 可以不带任何参数直接使用。
注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
(2)、语法
jQuery.ajax([settings]);
settings:可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。
(3)、参数 
>option,Object,可选。AJAX 请求设置。所有选项都是可选的。
>async,Boolean,默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
>beforeSend(XHR),Function,发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
>cache,Boolean,默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。jQuery 1.2 新功能。
>complete(XHR, TS),Function,请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。
>contentType,String,默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。
>context,Object,这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置 success 回调函数的上下文为这个 DOM 元素。
>data:String,发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
>dataFilter,Function,给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
>dataType,String,预期服务器返回的数据类型。如果不指定,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": 返回纯文本字符串
>error,Function,默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。这是一个 Ajax 事件。
>global,Boolean,是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
>ifModified,Boolean,仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
>jsonp,String,在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
>jsonpCallback,String,为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。
>password,String,用于响应 HTTP 访问认证请求的密码;
>processData,Boolean,默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
>scriptCharset,String,只有当请求时 dataType 为 "jsonp" 或 "script",并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
>success,Function,请求成功后的回调函数。参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。这是一个 Ajax 事件。
>traditional,Boolean,如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
>timeout,Number,设置请求超时时间(毫秒)。此设置将覆盖全局设置。
>type,String,默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
>url,String,默认值: 当前页地址。发送请求的地址。
>username,String,用于响应 HTTP 访问认证请求的用户名。
>xhr,Function,需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
(4)、回调函数
如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。
>beforeSend,在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。
>error,在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)
>dataFilter,在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。
>success,当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
>complete,当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。
(5)、数据类型
$.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。
(6)、发送数据到服务器
默认情况下,Ajax 请求使用 GET 方法。如果要使用 POST 方法,可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。
data 选项既可以包含一个查询字符串,比如 key1=value1&key2=value2 ,也可以是一个映射,比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式,则数据在发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时,这种处理可能并不合适。并且在这种情况下,我们也应当改变 contentType 选项的值,用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。
(7)、高级选项
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、.ajaxComplete()
说明:当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
示例:当 AJAX 请求正在进行时显示“正在加载”的指示
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#txt").ajaxStart(function() {
                $("#wait").css("display", "block");
            });
            $("#txt").ajaxComplete(function() {
                $("#wait").css("display", "none");
            });
            $("button").click(function() {
                $("#txt").load("/example/jquery/demo_ajax_load.asp");
            });
        });
    </script>
</head>
<body>
    <div id="txt">
        <h2>通过 AJAX 改变文本</h2>
    </div>
    <button>改变内容</button>
    <div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
        <img src='/i/demo_wait.gif' width="64" height="64" />
        <br />加载中 ...
    </div>
</body>
</html>
(1)、定义和用法
ajaxComplete() 方法在 AJAX 请求完成时执行函数。它是一个 Ajax 事件。
与 ajaxSuccess() 不同,通过 ajaxComplete() 方法规定的函数会在请求完成时运行,即使请求并未成功。
(2)、语法
.ajaxComplete(function(event,xhr,options));
function(event,xhr,options),必需。规定当请求完成时运行的函数。额外的参数:event - 包含 event 对象;xhr - 包含 XMLHttpRequest 对象;options - 包含 AJAX 请求中使用的选项;


3、.ajaxError()
说明:当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。


4、.ajaxSend()
说明:在 Ajax 请求发送之前显示一条消息。


5、jQuery.ajaxSetup()
说明:设置将来的 Ajax 请求的默认值。
示例:为所有 AJAX 请求设置默认 URL 和 success 函数
$("button").click(function(){
  $.ajaxSetup({url:"demo_ajax_load.txt",success:function(result){
    $("div").html(result);}});
  $.ajax();
});
语法:jQuery.ajaxSetup(name:value, name:value, ...);
示例:设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数
$.ajaxSetup({
  url: "/xmlhttp/",
  global: false,
  type: "POST"
});
$.ajax({ data: myData });


6、.ajaxStart()
说明:当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
无论在何时发送 Ajax 请求,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在,则 jQuery 会触发该 ajaxStart 事件。在此时,由 .ajaxStart() 方法注册的任何函数都会被执行。


7、.ajaxStop()
说明:当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
无论 Ajax 请求在何时完成 ,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在,则 jQuery 会触发该 ajaxStop 事件。在此时,由 .ajaxStop() 方法注册的任何函数都会被执行。


8、.ajaxSuccess()
说明:当 Ajax 请求成功完成时显示一条消息;


9、jQuery.get()
说明:使用 HTTP GET 请求从服务器加载数据。
示例:使用 AJAX 的 GET 请求来改变 div 元素的文本:
$("button").click(function(){
  $.get("demo_ajax_load.txt", function(result){
    $("div").html(result);
  });
});
(1)、定义和用法
get() 方法通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
(2)、语法
$(selector).get(url,data,success(response,status,xhr),dataType);


10、jQuery.getJSON()
说明:使用 HTTP GET 请求从服务器加载 JSON 编码数据。
示例:使用 AJAX 请求来获得 JSON 数据,并输出结果
// demo_ajax_json.js

  "firstName": "Bill",
  "lastName": "Gates",
  "age": 60
}
// html
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("/example/jquery/demo_ajax_json.js",function(result){
      $.each(result, function(key, value){
        $("p").append(key + ": " + value + "; ");
      });
    });
  });
});
</script>
</head>
<body>
<button>获得 JSON 数据</button>
<p></p>
</body>
</html>
(1)、定义和用法
通过 HTTP GET 请求载入 JSON 数据。
在 jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。
(2)、语法
jQuery.getJSON(url,data,success(data,status,xhr));


11、jQuery.getScript()
说明:使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。
示例:通过 AJAX 请求来获得并运行JavaScript 文件
// demo_ajax_script.js
alert("This JavaScript alert was loaded by AJAX");
// html
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $.getScript("/example/jquery/demo_ajax_script.js");
  });
});
</script>
</head>
<body>
<button>使用 Ajax 来获得并运行一个 JavaScript 文件</button>
</body>
</html>
(1)、定义和用法
getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。
语法;jQuery.getScript(url,success(response,status));
// 该函数是简写的 Ajax 函数,等价于
$.ajax({
  url: url,
  dataType: "script",
  success: success
});
这里的回调函数会传入返回的 JavaScript 文件。这通常不怎么有用,因为那时脚本已经运行。载入的脚本在全局环境中执行,因此能够引用其他变量,并使用 jQuery 函数。
注释:jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。


12、.load()
说明:通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。
// 使用 AJAX 请求来改变 div 元素的文本
$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});
注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数。
语法:load(url,data,function(response,status,xhr));
该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单:
$("#result").load("ajax/test.html");
(1)、加载页面片段
.load() 方法,与 $.get() 不同,允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。
$("#result").load("ajax/test.html #container");
如果执行该方法,则会取回 ajax/test.html 的内容,不过然后,jQuery 会解析被返回的文档,来查找带有容器 ID 的元素。该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。
jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 <html>, <title> 或 <head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。
注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。
(2)、示例_加载xml数据并处理
// cd_catalog.xml
<CATALOG>
<CD>
<TITLE>主题</TITLE>
<ARTIST>艺术家</ARTIST>
<COUNTRY>国家</COUNTRY>
<COMPANY>公司</COMPANY>
<PRICE>价格</PRICE>
<YEAR>年份</YEAR>
</CD>
</CATALOG>
// html
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("button").click(function() {
// 加载xml数据
                $("div").load("cd_catalog.xml", function(response, status) {
   // 成功获取
                    if (status == "success") {
                        $("div").html("<ol></ol>");
// 显示作家信息
                        $(response).find("artist").each(function() {
                            var item_text = $(this).text();// 获取ARTIST元素值
                            $('<li></li>').html(item_text).appendTo('ol');
                        });
                        alert("There are " + $(response).find("cd").size() + " CDs")
                    }
                });
            });
        });
    </script>
</head>
<body>
    <p>Artists</p>
    <div></div>
    <button>获得 CD 信息</button>
</body>
</html>


13、jQuery.param()
说明:创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。
// 序列化一个 key/value 对象
var params = { width:1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str); // width=1680&height=1050;
// 序列化对象
$(document).ready(function(){
  personObj=new Object();
  personObj.firstname="Bill";
  personObj.lastname="Gates";
  personObj.age=60;
  personObj.eyecolor="blue"; 
  $("button").click(function(){
    $("div").text($.param(personObj)); // firstname=Bill&lastname=Gates&age=60&eyecolor=blue;
  });
});
param() 方法创建数组或对象的序列化表示。该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。
语法:jQuery.param(object,traditional);
参数:object,要进行序列化的数组或对象。traditional,规定是否使用传统的方式浅层进行序列化(参数序列化)。
param() 方法用于在内部将元素值转换为序列化的字符串表示。请参阅 .serialize()[http://www.w3school.com.cn/jquery/ajax_serialize.asp]了解更多信息。对于 jQuery 1.3,如果传递的参数是一个函数,那么用 .param() 会得到这个函数的返回值,而不是把这个函数作为一个字符串来返回。对于 jQuery 1.4,.param() 方法将会通过深度递归的方式序列化对象,以便符合现代化脚本语言的需求,比如 PHP、Ruby on Rails 等。你可以通过设置 jQuery.ajaxSettings.traditional = true; 来全局地禁用这个功能。


14、jQuery.post()
说明:使用 HTTP POST 请求从服务器加载数据。
语法:jQuery.post(url,data,success(data, textStatus, jqXHR),dataType);
url,必需,规定把请求发送到哪个 URL;data,可选,映射或字符串值,规定连同请求发送到服务器的数据;success(data, textStatus, jqXHR),可选,请求成功时执行的回调函数;dataType,可选,规定预期的服务器响应的数据类型,默认执行智能判断(xml、json、script 或 html);
// 该函数是简写的 Ajax 函数,等价于
$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});
根据响应的不同的 MIME 类型,传递给 success 回调函数的返回数据也有所不同,这些数据可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。
注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。
注释:如果由 jQuery.post() 发起的请求返回错误代码,那么不会有任何提示,除非脚本已调用全局的 .ajaxError() 方法。或者对于 jQuery 1.5,jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。
(1)、示例
// 使用 ajax 请求发送表单数据
$.post("test.php", $("#testform").serialize());


15、.serialize()
说明:将表单内容序列化为字符串;
// 输出序列化表单值的结果
$("button").click(function(){
  $("div").text($("form").serialize());
});
serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
语法:$(selector).serialize();
.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。


16、.serializeArray()
说明:序列化表单元素,返回 JSON 数据结构数据;
// 输出以数组形式序列化表单值的结果
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("button").click(function() {
                x = $("form").serializeArray(); // [{name:'FirstName',value:'Bill'}, {name:'LastName', value:'Gates'}],对象数组;
                $.each(x, function(i, field) {
                    $("#results").append(field.name + ":" + field.value + " ");
                });
            });
        });
    </script>
</head>
<body>
    <form action="">
        First name:
        <input type="text" name="FirstName" value="Bill" />
        <br /> 
        Last name:
        <input type="text" name="LastName" value="Gates" />
        <br />
    </form>
    <button>序列化表单值</button>
    <div id="results"></div>
</body>
</html>
serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。
serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。
返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]
.serializeArray() 方法使用 W3C 关于 successful controls(有效控件) 的标准来检测哪些元素应当包括在内。特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。


八、jQuery 参考手册 - 遍历
前言:jQuery 遍历函数包括用于筛选、查找和串联元素的方法。
1、.add()
说明:将元素添加到匹配元素的集合中。
示例:找到所有 div 并添加边框,然后将所有段落添加到该 jQuery 对象,并把它们的背景设置为黄色
$("div").css("border", "2px solid red")
        .add("p")
        .css("background", "yellow");
(1)、语法
.add(selector);
.add(elements);
.add(html);
.add(jQueryObject);
.add(selector, context); // context,选择器开始进行匹配的位置。


2、.andSelf()
说明:把堆栈中之前的元素集添加到当前集合中。
示例:找到所有 div,以及其中的所有段落,并为它们添加两个类名(border、background)[请注意,由于未使用 .andSelf(),div 没有黄色背景色]
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
  p, div { margin:5px; padding:5px; }
  .border { border: 2px solid red; }
  .background { background:yellow; }
</style>
</head>
<body>
  <div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
<script>
    $("div").find("p").andSelf().addClass("border");
    $("div").find("p").addClass("background");
</script>
</body>
</html>
(1)、详细解说
// 请思考这个拥有简单列表的页面
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
// 代码的结果是项目 3,4,5 拥有红色背景
$("li.third-item").nextAll().andSelf().css("background-color", "red");
// 详细解说
首先,初始的选择器会定位项目 3,初始化的堆栈存有仅包含该项目的集合。调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。最后,调用 .andSelf() 会合并这两个集合,所创建的 jQuery 对象指向按照文档顺序的所有三个项目:{[<li.third-item>,<li>,<li> ]}。


3、.children()
说明:获得匹配元素集合中每个元素的所有子元素。请注意,与大多数 jQuery 方法一样,.children() 不返回文本节点;如果需要获得包含文本和注释节点在内的所有子节点,请使用 .contents()。
4、.closest()
说明:[向上寻找]从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
实例:本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
</style>
</head>
<body>
  <ul>
    <li><b>Click me!</b></li>
    <li>You can also <b>Click me!</b></li>
  </ul>
<script>
  $( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });
</script>
</body>
</html>
用法:closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
语法:.closest(selector);
(1)、详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙,却很重要:
.closest(),从当前元素开始,沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止,返回包含零个或一个元素的 jQuery 对象;
.parents(),从父元素开始,沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选;返回包含零个、一个或多个元素的 jQuery 对象;


5、.contents()
说明:获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
6、.each()
说明:对 jQuery 对象进行迭代,为每个匹配元素执行函数。
示例:输出每个 li 元素的文本
$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});
each() 方法规定为每个匹配元素运行函数。提示:返回 false 可用于及早停止循环。
(1)、语法
$(selector).each(function(index,element)); // index - 选择器的 index 位置;element - 当前的元素(也可使用 "this" 选择器);


7、.end()
说明:结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
示例:选择所有段落,找到这些段落中的 span 元素,然后将它们恢复为段落,并把段落设置为两像素的红色边框
$("p").find("span").end().css("border", "2px red solid");
定义:end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。
语法:.end();
大多数 jQuery 的遍历方法会操作一个 jQuery 对象实例,并生成一个匹配不同 DOM 元素集的新对象。当发生这种情况时,应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。如果我们需要老的元素集,可以使用 end() 从堆栈中弹出新集合。


8、.eq()
说明:将匹配元素集合缩减为位于指定索引的新元素。
如果给定表示 DOM 元素集合的 jQuery 对象,.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。如果无法根据指定的 index 参数找到元素,则该方法构造带有空集的 jQuery 对象,length 属性为 0。


9、.filter()
说明:将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
示例:改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框
$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");


10、.find()
说明:获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
示例:搜索所有段落中的后代 span 元素,并将其颜色设置为红色
$("p").find("span").css('color','red');
如果给定一个表示 DOM 元素集合的 jQuery 对象,.find() 方法允许我们在 DOM 树中搜索这些元素的后代,并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。.find() 方法第一个明显特征是,其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。


11、.first()
说明:将匹配元素集合缩减为集合中的第一个元素。
示例:高亮显示段落中的第一个 span 
$("p span").first().addClass('highlight');


12、.has()
说明:[是否拥有]将匹配元素集合缩减为包含特定元素的后代的集合。
// 检测某个元素是否在另一个元素中
$("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");
$("ul").has("li").addClass("full");
如果给定一个表示 DOM 元素集合的 jQuery 对象,.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代;如果任何后代元素匹配该选择器,该元素将被包含在结果中。


13、.is()
说明:[是否存在]根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。
定义:is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。
解说:与其他筛选方法不同,.is() 不创建新的 jQuery 对象。相反,它允许我们在不修改 jQuery 对象内容的情况下对其进行检测。这在 callback 内部通常比较有用,比如事件处理程序。
示例;向 <ul> 元素添加 click 处理程序,然后把代码限制为只有当列表项本身,而非子元素,被点击时才进行触发
$("ul").click(function(event) {
  var $target = $(event.target); // $target估计为jQuery对象;
  if ( $target.is("li") ) {// 是li本身而非li子元素才触发;
    $target.css("background-color", "red");
  }
});


14、.last()
说明:将匹配元素集合缩减为集合中的最后一个元素。
15、.map()
说明:把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。
示例:构建表单中所有值的列表
$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );
定义:map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
语法:.map(callback(index,domElement));
解说:由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。


16、.next()
说明:获得匹配元素集合中每个元素紧邻的同辈元素。
定义:next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。


17、.nextAll()
说明:获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
18、.nextUntil()
说明:获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
语法:
.nextUntil(selector,filter);
.nextUntil(element,filter)


19、.not()
说明:从匹配元素集合中删除元素。


20、.offsetParent()
说明:获得用于定位的第一个父元素;
解说:如果给定一个表示 DOM 元素集合的 jQuery 对象,.offsetParent() 方法允许我们搜索 DOM 树中元素的祖先,并构造一个由最近的定位祖先元素包围的 jQuery 对象。定位元素指的是,元素的 CSS position 属性设置为 relative、absolute 或 fixed。在为表演动画计算偏移或在页面上放置对象时,该信息会很有用处。


21、.parent()
说明:获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。


22、.parents()
说明:获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。
23、.parentsUntil()
说明:获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
定义:parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到(但不包括)被选择器、DOM 节点或 jQuery 对象匹配的元素。
语法:
.parentsUntil(selector,filter);
.parentsUntil(element,filter);


24、.prev()
说明:获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
25、.prevAll()
说明:获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
26、.prevUntil()
说明:获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
详说:prevUntil() 方法获得当前匹配元素集合中每个元素的前面的同胞元素,但不包括被选择器、DOM 节点或 jQuery 对象匹配的元素。
语法:.prevUntil(selector, filter); .prevUntil(element, filter);


27、.siblings()
说明:获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
28、.slice()
说明:将匹配元素集合缩减为指定范围的子集。
语法:.slice(selector,end); // selector,基于 0 的整数值,指示开始选取元素的位置,如果是负数,则指示从集合末端开始的偏移量;end,基于 0 的整数值,指示结束选取元素的位置,如果是负数,则指示从集合末端开始的偏移量,如果省略,则选取范围会在集合末端结束;




九、jQuery 参考手册 - 数据
1、.clearQueue()
说明:从队列中删除所有未运行的项目。
示例:清空队列
<!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").clearQueue(); // 清楚队列;
            $("div").stop(); // 停止动画;
        });
    </script>
</body>
</html>
语法:.clearQueue(queueName); // 可选。字符串值,包含序列的名称。默认是 fx, 标准的效果序列。
详说:当调用 .clearQueue() 方法时,序列中未被执行的所有函数都会被从序列中删除。如果不使用参数,则 .clearQueue() 从 fx (标准效果序列)中删除剩余的函数。在这种方式中,它类似于 .stop(true)。不过,.stop() 方法只用于动画,而 .clearQueue() 也可用于删除通过 .queue() 方法添加到通用 jQuery 序列的任何函数。


2、.data()
说明:存储与匹配元素相关的任意数据。
示例:向元素附加数据,然后取回该数据
$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});
(1)、定义和用法
data() 方法向被选元素附加数据,或者从被选元素获取数据。
(2)、从元素返回数据
// 从被选元素中返回附加的数据
$(selector).data(name);
参数name,可选。规定要取回的数据的名称。如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据。
(3)、向元素附加数据
// 向被选元素附加数据
$(selector).data(name,value);
(4)、使用对象向元素附加数据
// 使用带有名称/值对的对象向被选元素添加数据
$(selector).data(object);


3、jQuery.data()
说明:存储与指定元素相关的任意数据。
(1)、定义和用法
data() 方法向被选元素附加数据,或者从被选元素获取数据。注释:这是底层级的方法;使用 .data() 更加方便。


4、.dequeue()
说明:dequeue() 方法为匹配元素执行序列中的下一个函数。
5、jQuery.dequeue()
说明:dequeue() 方法为匹配元素执行序列中的下一个函数。注释:这是底层级的方法;使用 .dequeue() 更加方便。


6、jQuery.hasData()
说明:检测元素是否拥有与之相关的任何 jQuery 数据。
示例:在元素上设置数据,然后查看 hasData 的结果
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
    <p>结果:</p>
    <script>
        $(function() {
            var $p = jQuery("p"),   // $p为jQuery对象;
                p = $p[0];
            $p.append(jQuery.hasData(p) + " "); /* false */
            jQuery.data(p, "testing", 123);
            $p.append(jQuery.hasData(p) + " "); /* true*/
            jQuery.removeData(p, "testing");
            $p.append(jQuery.hasData(p) + " "); /* false */
        });
    </script>
</body>
</html>
(1)、语法
jQuery.hasData(element);
(2)、详说
jQuery.hasData() 方法检测元素当前是否拥有通过使用 jQuery.data() 设置的任何值。如果没有数据与元素相关(根本不存在数据对象或者数据对象为空),则该方法返回 false;否则返回 true。jQuery.hasData(element) 的主要优势是,在不存在数据对象的情况下,不会创建并将数据对象与元素进行关联。相反地,jQuery.data(element) 总是向调用者返回数据对象,如果之前数据对象不存在,则会创建它。


7、.queue()
说明:显示或操作匹配元素所执行函数的队列。
示例:显示队列的长度
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            margin: 3px;
            width: 40px;
            height: 40px;
            position: absolute;
            left: 0px;
            top: 60px;
            background: green;
            display: none;
        }
        div.newcolor {
            background: blue;
        }
        p {
            color: red;
        }
    </style>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
    <p>队列长度是:<span></span></p>
    <div></div>
    <script>
        var div = $("div");
        function runIt() {
            // 1、显示
            div.show("slow");
            // 2、向右
            div.animate({
                left: '+=200'
            }, 2000);
            // 3、隐藏
            div.slideToggle(1000);
            // 4、显示
            div.slideToggle("fast");
            // 5、向左
            div.animate({
                left: '-=200'
            }, 1500);
            // 6、 隐藏
            div.hide("slow");
            // 7、显示
            div.show(1200);
            // 8、隐藏
            div.slideUp("normal", runIt); // 通过回调函数运行runIt效果函数;
        }


        // 显示队列函数数量
        function showIt() {
            var n = div.queue("fx");
            $("span").text(n.length);
            setTimeout(showIt, 0.1);
        }
        // 运行
        runIt();
        showIt();
    </script>
</body>
</html>
(1)、定义和用法
queue() 方法显示或操作在匹配元素上执行的函数队列。
语法:.queue(queueName);
(2)、操作队列
queue() 方法操作在匹配元素上执行的函数队列。
语法:.queue(queueName,newQueue);
(3)、详说
每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中,只使用一个队列(名为 fx)。队列运行在元素上异步地调用动作序列,而不会终止程序执行。典型例子是调用元素上的多个动画方法。例如:$('#foo').slideUp().fadeIn();当这条语句执行时,元素会立即开始其滑动动画,但是淡入过渡被置于 fx 队列,只有当滑动过渡完成后才会被调用。
.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用;它允许我们在队列末端放置一个新函数。这个特性与动画方法提供回调函数类似,但是无需在动画执行时设置回调函数。
$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});
等价于:
$('#foo').slideUp(function() {
  alert('Animation complete.');
});
请注意,当通过 .queue() 添加函数时,我们应当确保最终调用 .dequeue(),这样下一个排队的函数才能执行。
(4)、设置队列数组来删除队列
$("#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();
});


8、jQuery.queue()
说明:显示或操作匹配元素所执行函数的队列。注释:这是底层级的方法;使用 .queue() 更加方便。


9、.removeData()
说明:移除之前存放的数据。
(1)、定义和用法
removeData() 方法删除之前通过 data() 方法设置的数据。
(2)、语法
$(selector).removeData(name);


10、jQuery.removeData()
说明:移除之前存放的数据。




十、jQuery 参考手册 - DOM 元素方法
1、.get()
说明:获得由选择器指定的 DOM 元素。
示例:获得第一个 p 元素的名称和值
$("button").click(function(){
  x=$("p").get(0);
  $("div").text(x.nodeName + ": " + x.innerHTML);
});
(1)、语法
$(selector).get(index);


2、.index()
说明:返回指定元素相对于其他指定元素的 index 位置。注释:如果未找到元素,index() 将返回 -1。
示例:获取li相对同胞元素的index值
$("li").click(function(){
  alert($(this).index());
});
(1)、元素的 index,相对同胞元素
$(selector).index();
(2)、元素的 index,相对于选择器
$(selector).index(element);
element参数,可选,规定要获得 index 位置的元素,可以是 DOM 元素或 jQuery 选择器。


3、.size()
说明:返回被 jQuery 选择器匹配的元素的数量。
示例:输出被 jQuery 选择器匹配的元素的数量
$("button").click(function(){
  alert($("li").size());
});


4、.toArray()
说明:以数组的形式返回 jQuery 选择器匹配的元素。
示例;将 li 元素转换为数组,然后输出该数组元素的 innerHTML 
$("button").click(function(){
  x=$("li").toArray()
  for (i=0;i<x.length;i++)
    {
    alert(x[i].innerHTML);
    }
});




十一、jQuery 参考手册 - 核心
1、jQuery()
说明:接受一个字符串,其中包含用于匹配元素集合的 CSS 选择器。
示例:找出所有属于 div 元素的子元素的 p 元素,然后设置其边框属性
$("div > p").css("border", "1px solid gray");
(1)、语法1
// 接受一个字符串,其中包含用于匹配元素集合的 CSS 选择器:
jQuery(selector, [context]);
a>设置选择器环境: jQuery(selector, [context]);
详说:默认情况下,选择器从文档根部对 DOM 进行搜索。不过,可以为 $() 设置可选的 context 参数。在内部,选择器环境是通过 .find() 方法实现的,因此 $("span", this) 等价于 $(this).find("span")。jQuery 的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。默认情况下, 如果没有指定 context 参数,$() 将在当前的 HTML document 中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。在 jQuery 1.3.2 以后,其返回的元素顺序等同于在 context 中出现的先后顺序。
b>使用 DOM 元素: jQuery(element);
详说:该函数允许我们通过使用以其他方式找到的 DOM 元素来创建 jQuery 对象。该功能通常的用法是,对已经通过 this 关键字传递到 callback 函数的元素调用 jQuery 的方法:$("div.foo").click(function(){$(this).slideUp();});此例会在元素被点击时使用滑动动画对其进行隐藏。由于处理程序接受的 this 关键词中的被点击项目是纯的 DOM 元素,因此在对其调用 jQuery 的方法之前,必须用 jQuery 对象包装该元素。这个函数也可以接收 XML 文档和 Window 对象(虽然它们不是 DOM 元素)作为有效的参数。当 XML 数据从 Ajax 调用中返回后,我们可以使用 $() 函数通过 jQuery 对象包装该数据。一旦完成,我们就可以使用 .find() 和其他 DOM 遍历方法来取回 XML 结构中单个元素。
c>克隆 jQuery 对象: jQuery(jQuery object);
详说:当以参数的形式向 $() 函数传递 jQuery 对象后,会创建一个该对象的副本。与初始对象一样,新的 jQuery 对象引用相同的 DOM 元素。
d>返回空的集合: jQuery();
详说:对于 jQuery 1.4,调用无参数的 jQuery() 方法会返回空的 jQuery 集合。在之前版本的 jQuery 中,这样会返回包含 document 节点的集合。
(2)、语法2
// 使用原始 HTML 的字符串来创建 DOM 元素
Query(html,[ownerDocument]);
a>创建新的元素: jQuery(html,[ownerDocument]);
详说:当然这个字符串可以包含斜杠 (比如一个图像地址),还有反斜杠。当你创建单个元素时,请使用闭合标签或 XHTML 格式。例如,创建一个 span ,可以用 $("<span/>") 或 $("<span></span>") ,但不推荐 $("<span>")。在 jQuery 中,这个语法等同于 $(document.createElement("span"))。如果以参数的形式将字符串传递给 $(),jQuery 会检查字符串是否是 HTML (比如,字符串某些位置存在标签)。如果不是,则把字符串解释为选择器表达式,请见上面的讲解。但如果字符串是 HTML 片段,则 jQuery 试图创建由该 HTML 片段描述的 DOM 元素。然后会创建并返回一个引用这些 DOM 元素的 jQuery 对象:$("<p id="test">My <em>new</em> text</p>").appendTo("body");如果 HTML 片段比不含属性的简单标签更复杂,如同上面例子中的 HTML,那么元素实际的创建过程是由浏览器的 innerHTML 机制完成的。具体地讲,jQuery 会创建新的 <div> 元素,然后为传入的 HTML 片段设置元素的 innerHTML 属性。当参数只是简单的标签,比如$("<img />") 或 $("<a></a>"),jQuery 会通过内生的 JavaScript createElement() 函数来创建元素。
b>设置属性和事件: jQuery(html,props);
详说:对于 jQuery 1.4,我们可以向第二个参数传递一个属性映射。该参数接受能够传递给 .attr() 方法的属性的超集。此外,可以传递任意的事件类型,并可以调用下面的 jQuery 方法:val, css, html, text, data, width, height, or offset.注意,Internet Explorer 不允许你创建 input 元素并改变其类型;您必须使用例如 "<input type="checkbox" />" 来规定类型。
实例:创建 <input> 元素,同时设定 type 属性、属性值、事件
$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");


(3)、语法3
// 绑定一个在 DOM 文档载入完成后执行的函数
jQuery( callback );
详说:该函数的作用如同 $(document).ready() 一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的其他 $() 操作符都包装到其中来。尽管从技术上来说,这个函数是可链接的,但真正以这种方式链接的情况并不多。
示例:当DOM加载完成后,执行其中的函数
$(function(){
  // 文档就绪
});


2、jQuery.noConflict()
说明:运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库。解决冲突;
实例:使用 noConflict() 方法为 jQuery 变量规定新的名称
var jq=$.noConflict();
(1)、定义和用法
noConflict() 方法让渡变量 $ 的 jQuery 控制权。该方法释放 jQuery 对 $ 变量的控制。该方法也可用于为 jQuery 变量规定新的自定义名称。提示:在其他 JavaScript 库为其函数使用 $ 时,该方法很有用。
(2)、语法
jQuery.noConflict(removeAll); // removeAll布尔值。指示是否允许彻底将 jQuery 变量还原。
解说:许多 JavaScript 库使用 $ 作为函数或变量名,jQuery 也一样。在 jQuery 中,$ 仅仅是 jQuery 的别名,因此即使不使用 $ 也能保证所有功能性。假如我们需要使用 jQuery 之外的另一 JavaScript 库,我们可以通过调用 $.noConflict() 向该库返回控制权,如
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // 使用另一个库的 $ 的代码
</script>
->可以与 .ready() 方法结合起来使用,来为 jQuery 对象起别名,这项技术非常有效:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // 使用 jQuery $ 的代码
  });
  // 使用其他库的 $ 的代码
</script>
(3)、实例
// 例子1_将 $ 引用的对象映射回原始的对象
jQuery.noConflict();
jQuery("div p").hide(); // 使用 jQuery
$("content").style.display = "none"; // 使用其他库的 $()
// 例子2_恢复使用别名 $,然后创建并执行一个函数,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用。在这个函数中,原来的 $ 对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效:
jQuery.noConflict();
(function($) { 
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);
... // 其他用 $ 作为别名的库的代码
// 例子3_可以将 jQuery.noConflict() 与简写的 ready 结合,使代码更紧凑:
jQuery.noConflict()(function(){
    // 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码
// 例子4_创建一个新的别名用以在接下来的库中使用 jQuery 对象:
var j = jQuery.noConflict();
j("div p").hide(); // 基于 jQuery 的代码
$("content").style.display = "none"; // 基于其他库的 $() 代码
// 例子5_完全将 jQuery 移到一个新的命名空间
var dom = {};
dom.query = jQuery.noConflict(true);
结果:
dom.query("div p").hide(); // 新 jQuery 的代码
$("content").style.display = "none"; // 另一个库 $() 的代码
jQuery("div > p").hide(); // 另一个版本 jQuery 的代码




十二、jQuery 参考手册 - 属性
1、context
说明:在版本 1.10 中被弃用。包含传递给 jQuery() 的原始上下文。context 属性含有被传递到 jQuery 的原始上下文,可能是 DOM 节点上下文,如果未传递节点,则是 document 上下文。
2、jquery
说明:包含 jQuery 版本号。
语法:$().jquery;
3、jQuery.fx.interval
说明:改变以毫秒计的动画速率。
实例:以较少的帧数来运行 <div> 元素的动画
$("#toggle").on("click",function(){
  $("div").toggle(5000);
});
$("#interval").on("click",function(){
  jQuery.fx.interval = 500; // 以500毫秒为间隔;
});
jQuery.fx.interval 属性用于改变以毫秒计的动画运行速率。可操作该属性来调整动画运行的每秒帧数。默认值是 13 毫秒。该属性常用于修改动画运行的每秒帧数。降低这个值能够使动画在更快的浏览器中运行得更流畅,但这么做也行会影响性能。
提示:由于 jQuery 使用一个全局的间隔时间,为了使该属性生效,动画应该不在运行或者首先停止所有动画。
注释:该属性在支持 requestAnimationFrame 属性的浏览器中无效,比如 Google Chrome 11。
语法:jQuery.fx.interval = milliseconds;


4、jQuery.fx.off
说明:全局禁用/启用所有动画。
解说:jQuery.fx.off 属性用于对所有动画进行全局禁用或启用。默认值是 false,它允许动画正常运行。当设置为 true 时,将禁用所有动画方法,这样会把元素设置为其最后的状态,而不是显示效果。
提示:如需简化代码,可以使用 $.fx.off 来代替 jQuery.fx.off。
语法:jQuery.fx.off = true|false;


5、jQuery.support
说明:表示不同浏览器特性或漏洞的属性集合(用于 jQuery 内部使用)。
实例:测试浏览器是否能创建 XMLHttpRequest 对象
$(document).ready(function(){
  $("p").html("This browser can create XMLHttpRequest object: " + jQuery.support.ajax);
});
语法:jQuery.support.propvalue;
propvalue值:ajax、boxModel、changeBubbles、checkClone、checkOn、cors、cssFloat、hrefNormalized、htmlSerialize、leadingWhitespace、noCloneChecked、noCloneEvent、opacity、optDisabled、optSelected、scriptEval()、style、submitBubbles、tbody;


6、length
说明:包含 jQuery 对象中的元素数目。
0 0
原创粉丝点击