学步园

学习并掌握jQuery，从熟悉jQuery核心开始。
一、核心函数
1、jQuery(expression,[context])

这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。
jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。默认情况下, 如果没有指定context参数，$()将在当前的 HTML 文档中查找 DOM 元素；如果指定了context 参数，如一个DOM 元素集或 jQuery 对象，那就会在这个context 中查找。
返回值 jQuery
参数
expression (String) : 用来查找的字符串
context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。
示例：

$(document).ready(function() {

    $("div>p").css("display", "block"); //显示
    $("div>p").css("color", "blue"); //颜色为绿色

    alert($("div>p").html()); //找到所有div元素的子元素p,并显示p元素的innerHTML

    var chks = $("input:checkbox", document.forms[0]); //在文档的第一个表单中，查找所有的多选按钮(即:type为checkbox的input元素)
    alert(chks.length);
    for (var i = 0; i < chks.length; i++) {
        alert(chks[i].checked);
    }
})

文档片段:

    <form id="form1" runat="server">
    <p>one</p> <div><p style="display:none">two</p></div> <p>three</p>
    <br />
    <div>
    <input type="text" />&nbsp;&nbsp;<input id="chkTest" type="checkbox" checked="checked" />&nbsp;&nbsp;<input id="btnTest" type="button" value="button" /></div>
    </form>

2、jQuery(html,[ownerDocument])
根据提供的原始HTML标记字符串，动态创建由 jQuery 对象包装的DOM元素。
可以传递一个手写的HTML字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在创建input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。
当创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个span，可以用 $("<span/>") 或 $("<span></span>") ，但不推荐 $("<span>")。在jQuery 中，这个语法等同于$(document.createElement("span")) 。
返回值 jQuery
参数

html (String) : 用于动态创建DOM元素的HTML标记字符串
ownerDocument (Document) : 可选，创建DOM元素所在的文档
示例：

$(document).ready(function() {

    $("<div><p>This is a jQuery test.</p></div>").appendTo("body");

    //创建一个input元素
    if (!$.browser.msie) {
        $("<input>").attr("type", "checkbox").appendTo("body"); // 在 IE 中无效:
    }
    else {
        // 所有浏览器中有效
        $("<input type='checkbox'>").appendTo("body");
    }
})

3、jQuery(elements)
将一个或多个DOM元素转化为jQuery对象。
这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。
返回值 jQuery
参数

elements (Element, Array<Element>) : 用于封装成jQuery对象的DOM元素
示例：

$(document).ready(function() {

    $(document.body).css("background", "cef"); //设置页面背景色
    $(document.forms[0].elements).hide(); //隐藏一个表单中的所有元素
})

 4、jQuery(callback)
$(document).ready()的简写。
允许绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在DOM 加载完成时执行的$()操作符都包装到其中来。可以在一个页面中使用任意多个$(document).ready事件。
返回值 jQuery
参数

callback (Function) : 当DOM加载完成后要执行的函数
示例：

$(function() {
    alert("文档加载就绪");
    // 文档加载就绪
}); 

注意：
使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
jQuery 代码:
jQuery(function($) {
// 可以在这里继续使用$作为别名...
});
二、对象访问
1、each(callback)
以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
返回值 jQuery
参数
callback (Function) : 对于每个匹配的元素所要执行的函数
示例：

$("img").each(function(i) {
this.src = "images/test" + (i + 1).toString() + ".jpg"; // 结果: <img src="images/test1.jpg" />
});

 如果你想得到 jQuery对象，可以使用 $(this) 函数。
jQuery 代码:
$("img").each(function(){
  $(this).toggleClass("example");
});
下面再实现一个使用 'return' 来提前跳出 each() 循环：

$("button").click(function() {
    $("div").each(function(index, domEle) {
        // domEle == this 
        $(domEle).css("backgroundColor", "yellow");
        if ($(this).is("#stop")) {
            $("span").text("Stopped at div index #" + index);
            return false; //使用 'return'来提前跳出each()循环
        }
    });
});

文档片段：

<button>改变背景色</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div id="stop">在这里停止</div> 
<div></div>

<div></div>
<div></div>

 3、size()和length
jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的length属性一致。
返回值 Number
参数    没有参数
示例：

$(function() {
    var len = $("img").size(); //计算文档中所有图片数量
    alert(len);
    alert($("img").length == len); //与jQuery对象的length属性一致
})

 4、selector
jQuery 1.3新增。返回传给jQuery()的原始选择器。
换句话说，就是返回你用什么选择器来找到这个元素的。可以与context一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
返回值 String
参数    没有参数
示例：

$(function() {
    //确定查询的选择器 
    $("ul")
  .append("<li>" + $("ul").selector + "</li>")
  .append("<li>" + $("ul li").selector + "</li>")
  .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");

})

5、context
jQuery 1.3新增。返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
可以与selector一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
返回值 HTMLElement
示例

$(function() {
    //检测使用的文档内容
    $("ul")
    .append("<li>" + $("ul").context + "</li>")
  .append("<li>" + $("ul").context.nodeName + "</li>")
  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");

})

6、get()
取得所有匹配的 DOM 元素集合。
这是取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上是元素数组）。如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。
返回值 Array<Element>
参数    没有参数
示例：

$(function() {
$("img").get().reverse(); //选择文档中所有图像作为元素数组，并用数组内建的reverse方法将数组反转
})

 文档片段：

    <form id="form1" runat="server" >
    <img src="images/test1.jpg"/><br /> <img src="images/test2.jpg"/>
    </form>

 7、get(index)
取得其中一个匹配的元素。 index表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
返回值 Element
参数   
index (Number) :取得第 index 个位置上的元素
示例：

$(function() {
    var imgSrc = $("img").get(0).src; //取图片对应路径
    alert(imgSrc);
})

8、index(subject)
搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。
如果找到了匹配的元素，从1开始返回；如果没有找到匹配的元素，返回-1。
返回值 Number
参数   
subject (Element) : 要搜索的对象
示例：

$(function() {
    //返回对应ID值的元素的索引值
    alert($("div").index($('#f'))); // -1
    alert($("div").index($('#foobar'))); // 1
    alert($("div").index($('#fo'))); // 2
    alert($("div").index($('#foo'))); // 3
})

文档片段：

<div id="foobar">
<div id="fo"></div>
<div id="foo"></div>
</div>

三、数据缓存
1、data(name)
返回元素上储存的相应名字的数据，可以用data(name, value)来设定。
如果jQuery集合指向多个元素，那将只返回第一个元素的对应数据。
这个函数可以用于在一个元素上存取数据而避免了循环引用的风险。jQuery.data是1.2.3版的新功能。可以在很多地方使用这个函数，另外jQuery UI里经常使用这个函数。
返回值 Any
参数   
name (String) :存储的数据名
示例：

$(function() {
    //在一个div上存取数据
    $("div").data("blah"); // undefined
    alert($("div").data("blah"));
    $("div").data("blah", "hello world"); // blah设置为hello world

    $("div").data("blah"); // hello
    $("div").data("blah", 123); // 设置为123

    $("div").data("blah"); // 123
    alert($("div").data("blah"));
    $("div").removeData("blah"); //移除blah
    $("div").data("blah"); // undefined 

    //在一个div上存取名/值对数据 
    $("div").data("test", { first: 456, last: "jeff wong!" });
    alert($("div").data("test").first); //456;
    alert($("div").data("test").last); //jeff wong 
})

2、removeData(name)
在元素上移除存放的数据
与$(...).data(name, value)函数作用相反
返回值 jQuery
参数   
name (String) :存储的数据名
示例：

$(function() {
    $("div").data("test", { first: 456, last: "jeff wong!" });
    alert($("div").data("test").first); //456;
    alert($("div").data("test").last); //jeff wong
    $("div").removeData("test"); //移除test
    alert($("div").data("test")); //undefined;
})

3、queue([name])
返回指向第一个匹配元素的队列(将是一个函数数组)
返回值 Array<Function>
参数   
name (String) :队列名，默认为fx
示例：

//通过设定队列数组来删除动画队列
$("#btnShow").click(function() {
    var n = $("div").queue("fx");
    $("span").text("Queue length is: " + n.length);
});
function runIt() {
    $("div").show("slow");
    $("div").animate({ left: '+=200' }, 2000);
    $("div").slideToggle(1000);
    $("div").slideToggle("fast");
    $("div").animate({ left: '-=200' }, 1500);
    $("div").hide("slow");
    $("div").show(1200);
    $("div").slideUp("normal", runIt);
}
runIt();

文档片段：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        div
        {
            margin: 3px;
            width: