jQuery

语法

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
比如：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

DOM元素全部加载完成之后，图片等其他信息加载之前调用
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});

window.onload()与$(document).ready(function(){})的区别
执行时间上的区别：
    window.onload必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。
    而$(document).ready(function(){})是DOM结构加载完毕后就会执行。
编写个数不同：
    window.onload不能同时写多个，如果有多个window.onload，则只有最后一个会执行，它会把前面的都覆盖掉。
    $(document).ready(function(){})则不同，它可以编写多个，并且每一个都会执行。
简写方法：
    window.onload没有简写的方法。
    $(document).ready(function(){})可以简写为$(function(){})。
执行次数：
    window.onload只执行一次，若执行第二次，第一次江北覆盖，
    $(document).ready(function(){})可执行执行多次，第N次都不会被都不会被上次覆盖。

选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器：
    在页面中选取所有 <p> 元素：$("p");
#id 选择器：
    $("#test");
.class 选择器：
    $(".test")；
例子：
    $("*") 选取所有元素
    $(this)	选取当前 HTML 元素
    $("p.intro") 选取 class 为 intro 的 <p> 元素
    $("p:first") 选取第一个 <p> 元素
    $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
    $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
    $("[href]") 选取带有 href 属性的元素
    $("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
    $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
    $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
    $("tr:even") 选取偶数位置的 <tr> 元素
    $("tr:odd") 选取奇数位置的 <tr> 元素

事件

    鼠标事件：
        click 点击事件被触发时
        dblclick 当双击元素时
        mouseenter 当鼠标指针穿过元素时
        mouseleave 当鼠标指针离开元素时
        mousedown 当鼠标指针移动到元素上方时
        mouseup 在元素上松开鼠标按钮时
        hover 用于模拟光标悬停事件
    键盘事件：
        keypress 键被按下时
        keydown 键按下的过程时
        keyup 键被松开时
    表单事件：
        submit 提交表单时
        change 元素的值改变时发
        focus 获得焦点时
        blur 失去焦点时
    文档/窗口事件：
        load 当指定的元素已加载时（在 jQuery 版本 1.8 中已废弃）
        resize 当调整浏览器窗口大小时
        scroll 当用户滚动指定的元素时
        unload 当用户离开页面时
            unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除。
            Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果。

效果

hide() 和 show() 方法来隐藏和显示 HTML 元素
语法:
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
    第二个参数是一个字符串，表示过渡使用哪种缓动函数（jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。
toggle() 方法
显示被隐藏的元素，并隐藏已显示的元素。
语法:
    $(selector).toggle(speed,callback);
    可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
                                
Fading 方法
    实现元素的淡入淡出效果,jQuery 拥有下面四种 fade 方法：
    fadeIn()
    fadeOut()
    fadeToggle()
    fadeTo()
fadeIn() 方法
    用于淡入已隐藏的元素。
    语法:
    $(selector).fadeIn(speed,callback);
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
    可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeOut() 方法
    用于淡出可见元素。
    语法:
    $(selector).fadeOut(speed,callback);
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeToggle() 方法
    可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
    如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
    语法:
    $(selector).fadeToggle(speed,callback);
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeTo() 方法
    允许渐变为给定的不透明度（值介于 0 与 1 之间）。
    语法:
    $(selector).fadeTo(speed,opacity,callback);
    必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
    可选的 callback 参数是该函数完成后所执行的函数名称。
                                
slideDown() 方法
    用于向下滑动元素。
    语法:
    $(selector).slideDown(speed,callback);
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是滑动完成后所执行的函数名称。
slideUp() 方法
    用于向上滑动元素。
    语法:
    $(selector).slideUp(speed,callback);
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是滑动完成后所执行的函数名称。
slideToggle() 方法
    可以在 slideDown() 与 slideUp() 方法之间进行切换。
    如果元素向下滑动，则 slideToggle() 可向上滑动它们。
    如果元素向上滑动，则 slideToggle() 可向下滑动它们。
    语法:
    $(selector).slideToggle(speed,callback);
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是滑动完成后所执行的函数名称。
                                
animate() 方法
    用于创建自定义动画。
    语法：
    $(selector).animate({params},speed,callback);
    必需的 params 参数定义形成动画的 CSS 属性。
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是动画完成后所执行的函数名称。
    默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
    如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
animate() - 操作多个属性
    生成动画的过程中可同时使用多个属性：
    用 animate() 方法来操作所有 CSS 属性,需要记住一件重要的事情：当使用 animate() 时，
    必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，
    使用 marginRight 而不是 margin-right，等等。
animate() - 使用相对值
    可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
animate() - 使用预定义的值
    可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
animate() - 使用队列功能
    默认地，jQuery 提供针对动画的队列功能。
    这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。
    然后逐一运行这些 animate 调用。
                                
stop() 方法
    用于停止动画或效果，在它们完成之前。
    stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
    语法:
    $(selector).stop(stopAll,goToEnd);
    可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
    因此，默认地，stop() 会清除在被选元素上指定的当前动画。
Callback 方法
    Callback 函数在当前动画 100% 完成之后执行。
    jQuery 动画的问题
    许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
    例子：$("p").hide("slow")
    speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
    使用 callback 实例
        //在隐藏效果完全实现后回调函数
        $("button").click(function(){
            $("p").hide("slow",function(){
                alert("段落现在被隐藏了");
            });
        });
    没有 callback(回调)
        //没有回调函数，警告框会在隐藏效果完成前弹出
        $("button").click(function(){
        $("p").hide(1000);
        alert("段落现在被隐藏了");
        });

链(Chaining)
    通过 jQuery，可以把动作/方法链接在一起。
    Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
    方法链接
        一般都是一次写一条 jQuery 语句（一条接着另一条）。
        不过，有一种名为链接（chaining）的技术，允许在相同的元素上运行多条 jQuery 命令，一条接着另一条。
        // 把 css()、slideUp() 和 slideDown() 链接在一起
        // "p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动
        $("#p1").css("color","red")
            .slideUp(2000)
            .slideDown(2000);

HTML

获得内容 text()、html() 以及 val()
    text() 设置或返回所选元素的文本内容
    html() 设置或返回所选元素的内容（包括 HTML 标记）
    val() 设置或返回表单字段的值
设置内容 text()、html() 以及 val()
text()、html() 以及 val() 的回调函数
    回调函数有两个参数：
        被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回希望使用的字符串。

获取属性 attr()
    用于获取属性值。
设置属性 attr()
    允许同时设置多个属性(需加{})。
attr() 的回调函数
    回调函数有两个参数：
        被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回希望使用的字符串。
                                
添加新的 HTML 内容
    append() 在被选元素的结尾插入内容
    prepend() 在被选元素的开头插入内容
    after() 在被选元素之后插入内容
    before() 在被选元素之前插入内容
    append() 和 prepend() 方法能够通过参数接收无限数量的新元素。
        $("body").append(txt1,txt2,txt3);
    after() 和 before() 方法能够通过参数接收无限数量的新元素。
删除元素
    remove() 删除被选元素（及其子元素）
    empty() 从被选元素中删除子元素
    过滤被删除的元素
        remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
        该参数可以是任何 jQuery 选择器的语法。
        //删除 class="test" 的所有 <p> 元素
        $("p").remove(".test");

获取并设置 CSS 类
    addClass() 向被选元素添加一个或多个类(可以在 addClass() 方法中规定多个类)
    removeClass() 从被选元素删除一个或多个类
    toggleClass() 对被选元素进行添加/删除类的切换操作
    css() 设置或返回样式属性
        设置或返回被选元素的一个或多个样式属性。
        返回 CSS 属性：
            返回指定的 CSS 属性的值：css("propertyname");
            //将返回首个匹配元素的 background-color 值
            $("p").css("background-color");
        设置 CSS 属性：
            设置指定的 CSS 属性：css("propertyname","value");
            //将为所有匹配元素设置 background-color 值
            $("p").css("background-color","yellow");
        设置多个 CSS 属性
            设置多个 CSS 属性:css({"propertyname":"value","propertyname":"value",...});
            //将为所有匹配元素设置 background-color 和 font-size
            $("p").css({"background-color":"yellow","font-size":"200%"});

尺寸
    width()
    height()
    innerWidth()
    innerHeight()
    outerWidth()
    outerHeight()
    width() 和 height() 方法
        width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
        height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
    innerWidth() 和 innerHeight() 方法
        innerWidth() 方法返回元素的宽度（包括内边距）。
        innerHeight() 方法返回元素的高度（包括内边距）。
    outerWidth() 和 outerHeight() 方法
        outerWidth() 方法返回元素的宽度（包括内边距和边框）。
        outerHeight() 方法返回元素的高度（包括内边距和边框）。

遍历

祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

向上遍历 DOM 树
    parent()
        返回被选元素的直接父元素。
        该方法只会向上一级对 DOM 树进行遍历。
    parents()
        返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
        也可以使用可选参数来过滤对祖先元素的搜索:
        //返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
        $("span").parents("ul");
    parentsUntil()
        返回介于两个给定元素之间的所有祖先元素。
        //返回介于 <span> 与 <div> 元素之间的所有祖先元素
        $("span").parentsUntil("div");

向下遍历 DOM 树
    children()
        返回被选元素的所有直接子元素。
        该方法只会向下一级对 DOM 树进行遍历。
        可以使用可选参数来过滤对子元素的搜索
        //例子返回类名为 "test" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
        $("div").children("p.test");
    find()
        返回被选元素的后代元素，一路向下直到最后一个后代。
        //返回属于 <div> 后代的所有 <span> 元素
        $("div").find("span");
        //返回 <div> 的所有后代
        $("div").find("*");

水平遍历 DOM 树
    siblings()
        返回被选元素的所有同胞元素。
        也可以使用可选参数来过滤对同胞元素的搜索：
        //返回属于 <h2> 的同胞元素的所有 <p> 元素
        $("h2").siblings("p");
    next()
        返回被选元素的下一个同胞元素。
        该方法只返回一个元素。
    nextAll()
        返回被选元素的所有跟随的同胞元素。
    nextUntil()
        返回介于两个给定参数之间的所有跟随的同胞元素。
        //返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
        $("h2").nextUntil("h6");
    prev()
    prevAll()
    prevUntil()
        prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反;
        它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

过滤
    缩小搜索元素的范围
        三个最基本的过滤方法是：
            first()
                返回被选元素的首个元素。
                //选取首个 <div> 元素内部的第一个 <p> 元素
                $("div p").first();
            last()
                返回被选元素的最后一个元素。
                //选择最后一个 <div> 元素中的最后一个 <p> 元素
                $("div p").last();
            eq()
                返回被选元素中带有指定索引号的元素。
                索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
                //选取第二个 <p> 元素（索引号 1）
            它们允许基于其在一组元素中的位置来选择一个特定的元素。
        其他过滤方法：
            filter()
                允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
                //返回带有类名 "url" 的所有 <p> 元素
                $("p").filter(".url");
            not()
                返回不匹配标准的所有元素。
                提示：not() 方法与 filter() 相反。
                //返回不带有类名 "url" 的所有 <p> 元素
                $("p").not(".url");
            允许选取匹配或不匹配某项指定标准的元素。

AJAX

load() 方法
    $(selector).load(URL,data,callback);
    必需的 URL 参数规定您希望加载的 URL。(可以把 jQuery 选择器添加到 URL 参数)
    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 参数是 load() 方法完成后所执行的函数名称。
    可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
        responseTxt 包含调用成功时的结果内容
        statusTXT 包含调用的状态
        xhr 包含 XMLHttpRequest 对象
 
 get() 和 post() 方法
    用于通过 HTTP GET 或 POST 请求从服务器请求数据。

 $.get() 方法
    $.get() 方法通过 HTTP GET 请求从服务器上请求数据。
    语法：
    $.get(URL,callback);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 callback 参数是请求成功后所执行的函数名。
    $.get() 的第一个参数是我们希望请求的 URL（"demo_test.php"）。
    第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

 $.post() 方法
    $.post() 方法通过 HTTP POST 请求向服务器提交数据。
    语法:
    $.post(URL,data,callback);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 data 参数规定连同请求发送的数据。
    可选的 callback 参数是请求成功后所执行的函数名。

noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。