jQuery 学习笔记

jQuery 学习笔记

 

一、jQuery概述

    宗旨: Write Less, Do More.
    基础知识：
        1.符号$代替document.getElementById()函数
        2.使用Css+Xpath来查询页面元素
        3.适当的混用jQuery、Dom和JavaScript能够提升程序的执行效率。
            如：Offset、Append、Before是jQuery的瓶颈
        4.函数$()是$("document").ready的简写，功能与JavaScript的Window.OnLoad=function(){}相同。
            如：<Script type="text/javascript">
                    $(    function(){
                            $("div").after("");
                        }
                    )
                </script>
        5.jQuery变量定义需要附加前缀$,以与javascript变量区分开
            如：var $div = $("div")

二、比较流行的javascript技术框架

1.Dojo http://dojotoolkit.org 强大的面向对象的JavaScript框架
    2.YUI http://developer.yahoo.com/yui　是yahoo user interface的简称
    3.jQuery http://jquery.com 
    4.Mootools http://mootools.net 简洁、高效面向对象的JavaScript框架
    5.Prototype http://www.prototypejs.org 易于使用、面向对象的JavaScript框架。封装并简化和扩展了一些在Web开发中常用到的JavaScript方法及Ajax处理过程
    6.Script.aculo.us http://Script.aculo.us 　    易于使用，支持多浏览器且用于增强Prototype的JavaScript框架
    7.ExtJS http://www.extjs.com　是一个跨浏览器，用于开发RIA应用的JavaScript框架

三、jQuery应用

1.连写
        对于发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
    2.库导入
        <Script src="jquery.js" type="text/javascript"></Script>
    3.使用
        如：在页面载入后弹出一个对话框
        <Script type="text/javascript">
            $(    function(){
                    alert("Hello world!");
                }
            )
        </Script>
        
    4.jQuery对象与Dom对象是不同的。所以jQuery对象的属性方法不能被Dom对象直接调用，反之亦然。
        jQuery是一组相同Dom对象的数组。将jQuery对象转换为Dom对象，可以：
        1>使用数组下标
            $(    function(){
                    var $li = $("li");
                    var li = $li[0];
                    alert(li.innerHtml);
                }
            )
            
        2>使用jQuery对象的Get()方法,传递一个索引值
            $(    function(){
                    var $li = $("li");
                    var li = $li.get(0);
                    alert(li.innerHtml);
                }
            )
            
        将一个Dom对象转为jQuery对象:
        1>直接使用$()函数
            $(    function(){
                    var li = document.getElementById("li");
                    var $li = $( li[0] );
                    alert($li.html());
                }
            )
        
        2>直接把Dom数组传递给$()
            $(    function(){
                    var li = document.getElementById("li");
                    var $li = $( li );
                    alert($li.html());
                }
            )
        注：jQuery是一个类数组，而不数组类型的数据。
        
    5.jQuery.ready与window.Load比较
        1>Load在网页中所有元素加载完才会执行。可能会出现的情况是网页已显示出来，但一部分音频文件未加载完，所以Load事件这里也不执行。
            ready事件在Dom绘制完毕后执行。这时即使有未加载完的音频也会执行。
            ready先于Load执行。只有在网页没有外部文件需要加载的情况下近乎同时执行。
        2>Load只会影响最后一次的事件处理过程
            如：Window.onLoad = function (){
                    alert("1");
                }
                
                Window.onLoad = function (){
                    alert("2");
                }
                
            只有"2"的处理过程被执行
            而，jQuery的ready可被多次执行
                $(    function(){
                        alert("1");
                    }
                )
                
                $(    function(){
                        alert("2");
                    }
                )                
            这样有利于复杂的初始化操作。

四、jQuery核心

1.构造函数
    jQuery把所有的操作都封装到jQuery()函数中,形成了唯一的入口。其参数为
        1>jQuery(expression,context)
            expression可以是ID,Dom元素名,CSS表达式或Xpath表达式。jQuery将根据此值匹配文档中的元素，然后把找到的元素封装到jQuery对象并返回。
            如： $(div#wrap>p:first).addClass("red");  //CSS表达式
            context 上下文.指定在文档DOM中的哪个节点开始进行查询。默认为document
            
        2>jQuery(html)
            html表示一个html结构字符串。
            如：$("ul").append($("<li>new item</li>"));
        
        3>jQuery(element)
            element是一个Dom对象
            如：$(document).ready( function(){
                                        ...;
                                    }
                                );
                        
        4>jQuery(fn)
            fn表示一个处理函数。
            如：$(    function(){
                        ...;
                    }
                );
            
    2.链式语法,即一些函数的返回值仍为jQuery对象本身。
        如：$("input[type='button']").eq(0).click(    function(){
                                                        alert('Button clicked.');
                                                
                                                }
                                                ).end();
        end()函数取消当前的jQuery对象,返回前面的jQuery对象。(jQuery是类数组，或集合)
        
        注：1>在同一个jQuery对象上执行不超过3个方法，可以写在同一行。
            2>如果在同一个jQuery上执行很多操作，则应该分行。
            3>代码缩进
            
    3.jQuery选择器
    支持ID、tagName、CSS1~3表达式及Xpath表达式。见：http://docs.jquery.com/Selectors。自定义的过滤方法
    jQuery支持　选择　和　过滤
        1.过滤
            * 表示从全部"*"元素中筛选
            如：$(":[title]") 等同于 $("*:[title]")
            
        2.选择功能没有默认范围。
            $(    function(){
                $("input[type='button']").click(    function(){
                                                        var i = 0;
                                                        //下面的匹配所有的输入框
                                                        $("input[type='text']").each(    function(){
                                                                                            i += parseInt( $(this).val() );
                                                                                        }
                                                                                    )
                                                    }
                                                );
            示例中：为按钮添加了一个事件。$(this)表示当前选择的文本框，或当前jQuery对象。
            
    4.jQuery扩展

五、jQuery操作

1.操作内家
        1>属性
            attribute、class、style等，jQuery扩展属性，缓存数据、expando的自定义属性
            
        2>元素
            元素的创建、添加、被加、移动、复制、删除
            
        3>内容
            html()
            
        4>样式
            height、width、innerHeight...
            
        5>事件
            AddEvent、removeEnent、domready等
            
        6>通信
            Ajax
        7>

六、jQuery原型

JavaScript中的原型对象(以下为示例，有错误。)
    JavaScript通过为所有函数绑定一个prototype属性用来指向一个原型对象。此原型对象可以定义类继承、属性和方法
        <Script >
            var jQuery = function(){
                            jQuery.prototype = {//扩展的原型对象
                                
                                }
                        }
        </script>
        更安全的作法是，定义一个属性
        <Script >
            var jQuery.fn = jQuery.prototype = {//扩展的原型对象
                                
                                }
        </script>        
        这里的jQuery.fn相当于jQuery.prototpye的别名。那么
            var $ = jQuery = function(){}
            
        给jQuery添加两个成员
        var $ = jQuery = function (){
                            jQuery.fn = jQuery.prototype = {
                                                    jquery: "1.2.3",    //原型属性
                                                    size:    function(){    //原型方法
                                                                return this.length;
                                                            }
                                        }
                        }
        调用方法：
        正常调用方法为：
            var my$ = new $();//实例化
            alert( my$.jquery );
            alert( my$.size() );
            
        但jQuery却如下：
            $().jquery;
            $().size();
            即，jQuery没有使用new运算符将jQuery类实例化。实际在浏览器使用这段代码会报错。没有实例化，那么
                var $ = jQuery = function(){
                                    return new jQuery();
                                }
            然而，仍然会报错，堆栈溢出。说明有死循环。那么：
            使用一个工厂方法来创建一个实例，并把它放到prototype原型对象中，然后在构造函数中返回这个调用。
                var $ = jQuery = function() {
                                    return jQuery.fn.init();
                                }
                jQuery.fn = jQuery.prototype = {
                                    init: function(){
                                                return this;
                                            },
                                    jquery:"1.2.4",
                                    size: function(){
                                                return this.length;
                                            }
                            }
            以上示例还是有错误，它并没有实例化jQuery，那么要如何做？

七、jQuery的函数,都有两个功能，取值与赋值

1.html()
        若参数不为空，则先清空匹配元素的内容，然后调用append()插入内容。
        若为空，则返回第一个匹配的元素的hmtl源码
    2.extend() 用于扩展

八、名字空间

在JavaScript中
        var jQuery = function(){};
        jQuery = function(){};
    都是合法的。但第一句表示声明一个变量,而第二句表示定义Window对象的一个属性。它相当于Window.jQuery = function(){};
    若需要隔离代码，即你的代码不希望被别的代码随意访问，且不愿意暴露内部实现，这时需要使用匿名函数(闭包).
    如：
        (    function (){
                function f1(){
                    return "This is f1.";
                }
            }
        )();
        
    noConfilit()方法，实现禁止jQuery使用$与jQuery变量，而用临时变量_$ 与 _jQuery 代替

九、61 ~ 64 页Init()构造器函数中6种处理情况!!!!

1.

十、选择器

由于jQuery返回的是一个类数组，所以判断jQuery是否为空的方法应该为
        if ( $("xxx").length > 0 )
        {
            ...
        }

1.简单选择器

1>选择指定ID的元素,使用 # + Id 的字符串表示

JavaScript:    document.getElementById(ID)
            jQuery:        $("#ID")
            在效率上jQuery要比JavaScript慢，所以,可以通过将JavaScript的原生方法传递给$的方式进行混用
            例：
                <批量操作一例：>
                通过ID来获取Dom对象并存入数组
                var arr = [];
                var $ = document.getElementById;//临时把JavaScript的原生方法传递给$
                for (var i = 0;i < 1000; i++)
                {
                    var item = $("#span" + i);
                    arr.push(item);
                }
                $ = jQuery;//恢复$的默认值
                
            jQuery转义操作
            选择器中有特殊字符，需要转义。原因：jQuery使用正则表达式进行字符串匹配
            如：. : [ ] 
            转义方法为使用　\\
            则：\\.    \\:    \\[    \\]

2>选择指定类型的元素

JavaScript: document.getElementByTagName(Tag)
            jQuery:        $("Tag")
            在效率上依然慢于JavaScript,可采用混用的方式解决。

3>选择指定"类"的元素,使用 . + 类名 的字符串表示

JavaScript中没有类选择的方法，但可以扩展(在Dom3版本中已有此方法)
                document.getElementByClassName = function(className) {
                                                    var el = [];
                                                    _el = document.getElementByTagName('*');//获取所有元素
                                                    for (var i = 0 ;i < _el.length; i++)
                                                    {
                                                        if (_el[i].className == className )
                                                            el[el.length] = _el[i];
                                                    }
                                                    return el;
                                                }
            
            
            jQuery:    $(".className")
            如:    $(".red") 与 document.getElementByClassName("red")功能相同

4>选择所有元素及优化,使用 *

$("body *) 表示选择body下的所有元素
            例：
            $(    function()
                {
                    var all = document.getElementByTagName("*");
                    $(all).css("color","red");
                }
            与
            $("body *).css("color","red"); 结果相同,效率也相同

5>多选,使用 , 分隔不同的选择器表达式

$("h2,#wrap,span.red,[title='text'].css("color","red");

2.关系选择器.文档节点之间的包含与并列关系

1>层级选择器

<1>$("ancestor descendant")    在给定的"ancestor"选择器下匹配所有的"descendant"选择器
            <2>$("parent > child")        在给定的"父"选择器下匹配所有的"child"选择器
            <3>$("prev + Next")         匹配所有紧跟在"prev"选择器后的所有"Next"选择器
            <4>$("prev ~ Siblings")     匹配"prev"选择器这后的所有"siblings"的选择器
            示例：
                $("div").css("border","solid 1px red");    //文档中所有的div
                $("div>div").css(....);                    //文档中所有的div的子div,若div(第二个表达式)没有子div，则跳过
                $("div div").css(....);                    //文档中所有的div下的div，即使div(第二个表达式)没有子div。
                $("div div div").css(....);                //文档中第三层的div,这个div必须能向上有两层。
                $("div + p").css(....);                    //文档中紧跟在div后面的p
                $("div:eq(1) ~ p").css(....);            //文档如div同级相邻的p

2>子元素选择器

<1>:nth-child        匹配父元素下的第N个子(或奇偶)元素。索引从１开始
            <2>:first-child        匹配第一个子元素。:first只匹配一个元素;:first-child为每个父元素匹配一个子元素
            <3>:last-child        匹配最后一个元素。:last与:last-child区别同上。
            <4>:only-child        若某元素是父元素的唯一元素，则会被匹配。否则不会被匹配
            示例：
                :nth-child(even);    匹配偶数位元素
                :nth-child(odd);    匹配奇数位元素
                :nth-child(2);        匹配第2个元素
                :nth-child(3n);        匹配第3个元素及后面间隔3的所有元素
                :nth-child(3n+1);    匹配第1个元素及后面间隔3的所有元素
                :nth-child(3n+2);    匹配第2个元素及后面间隔3的所有元素
                
                $("ul li:first-child").css(...);
                $("ul li:last-child").css(...);
                $("ul li:nth-child(1)").css(...);
                $("ul li:nth-child(2n)").css(...);

3.过滤选择器

1>定位过滤器

<1>:first        匹配找到的第一个元素，只一个。
            <2>:last        匹配找到的最后一个元素，只一个。
            <3>:not            取反，如：:not(div a)
            <4>:even        匹配索引值为偶数的元素。从0开始
            <5>:odd                        奇数
            <6>:eq            匹配一个给定索引值的元素，从0开始。如：$("tr:eq(1)") 匹配第二行表格
            <7>:gt            匹配所有大于给定的索引值的元素，从0开始。$("tr:gt(1)") 匹配第三行及以后行
            <8>:lt                    小于
            <9>:header        匹配如 h1, h2 ,h3 之类的标题元素
            <10>:animated    匹配所有正在执行动画效果的元素

2>内容过滤器。根据匹配元素所包含的子元素或文本内容进行过滤。

<1>:contains     匹配包含给一文本的元素,如：$("div:contains('图片')")
            <2>:empty        匹配不含子元素或空文本的元素。
            <3>:has            匹配含有指定选择器元素的上xxx级元素。如：$("div:has(p)");　匹配含有选择器p的div元素
            <4>:parent        匹配有子元素或非空文本内容的元素
            示例：
                $("li:empty").text("空内容");//匹配空的li元素，并将其值设为"空内容"。
                $("div ul:parent").css(....);//匹配div下有子元素或非空文本的ul ??
                $("h2:contains('标题')").css(....);//匹配含有"标题"的h2元素
                $("p:has(span)").css(....);//匹配含有span元素的p元素

3>可见过滤器。根据元素的可见或隐藏进行匹配。通过判断CSS属性的offsetWidth或offsetHeight，只要不为0则visible为真。

<1>:hidden         匹配所有不可见元素,或type为hidden的元素
            <2>:visible        匹配所有可见元素
            示例：
                $("p:odd").hide();//隐藏奇数位的p元素。
                $("p:hidden").show();//将奇数位的p元素显示出来

4.属性选择器。把元素的属性及其值作为过滤条件。使用 [ ]作为定界符。

1>[attribute]            匹配指定属性的元素。如：$("div[id]");匹配具有id属性的div
        2>[attribute=value]        匹配指定属性及属性值的元素。 $("div[name='text']"); 若value中含有"]"，那需要使用引号以避免冲突
        3>[attribute=!value]    匹配属性值不为(或含有)value的元素。与 :not([attribute=value])功能相同。若匹配含有某属性，但值不为value的元素，则[att]:not([att=value])。
        4>[attribute^=value]    匹配属性值以value开始的元素。如：$("input[name^='text']");匹配name以text开始的input
        5>[attribute$=value]    .................结束.......
        6>[attribute*=value]    ..........包含value.........如：$("input[name*='test']");匹配name中含有text的input
        7>[selecctor1][selecctor2][selecctorN]    复合属性选择器，匹配满足多个条件的元素。如：$("input[name*='text'][id]");匹配name含有text，且具有id属性的input

5.表单选择器

1>简单表单域选择器

<1>:input         匹配所有的input、textarea、select、button元素
            <2>:text         匹配所有的文本框
            <3>:password    匹配所有的密码框
            <4>:radio        匹配所有的单选框
            <5>:checkbox    匹配所有的复选框
            <6>:submit        匹配所有的提交按钮
            <7>:image        匹配所有的图像域
            <8>:reset        匹配所有的重置按钮
            <9>:button        匹配所有的按钮
            <10>:file        匹配所有的文本域
            <11>:hidden        匹配所有的不可见元素，或type为hidden的元素。
            示例：
            <form id="testForm" action="" method="get">
                <input name="" type="text" value="文本框"><br/>
                <input name="" type="password" value="密码框"><br/>
                <input name="" type="file" value="文件">
            </form>
            
            $("#testForm :text").val("这里是修改的内容");     //修改表单Id为testForm的文本框的内容为"这里是修改的内容"
            $("#testForm :file).val("f:\tmp\122.txt");        //修改表单Id为testForm的文件浏览框的文件名为"f:\tmp\122.txt"

2>表单属性选择器

<1>:enabled    匹配所有可用元素
            <2>:disabled    ........不......
            <3>:checked    匹配所有选中的元素(复选框，单选框，但不包含sselect中的option)
            <4>:selected    匹配所有选中的option元素
            示例：
            <form id="test">
                <input type="text" disabled="disabled" value="文本框"><br/>
                <input type="checkbox" checked="checked" value="复选框"><br/>
                <select name="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3" selected="selected">3</option>
                </select>
            </form>
            
            $("#test :disabled").val("不可用");            //修改文本内容
            $("#test :checked").removeAttr("checked");        //去掉选中
            $("#test :selected").removeAttr("selected");    //去掉第三项选中

3>表单取值与赋值使用 val()，否则无法正确读取值。

var psw = encodeURIComponent($("#IdPsw").val());

十一、DOM操作

1.添加节点，效率上不相上下，使用firefox，jQuery要快于JavaScript

1>JavaScript
            $(    function()
                {
                    var t1 = new Date();
                    var body = document.getElementsByTagName("body")[0];
                    for(var i =0; i < 5000 ;i++)
                    {
                        var span = document.createElement("span");
                        span.setAttribute("class","red");
                        body.appendChild(span);    
                    }
                    var t2 = new Date();
                    $("#result").html("添加5000个span用时:" + (t2-t1));
                }
            )

2>jQuery
            $(    function()
                {
                    var t1 = new Date();
                    for (var i = 0;i<5000;i++)
                    {
                        var $span = $("<span/>");
                        $span.attr("class","red");
                        $("body").append($span);    
                        /*
                            注：在效率上使用
                            $("body").append("<span class='red' />");
                            要快,大约2到3倍
                        */
                    }
                    var t2 = new Date();
                    $("#result").html("添加5000个span用时:" + (t2-t1));
                }
            )

2.添加文本节点

var $h1 = $("<h1>标题，这个是</h1>");
        $("body").add($h1);

3.添加属性

$span.attr("class","red");
        或
        var $span = $("<span class='red'/>");

4.添加元素

1>append    在末尾追加。添加后成为最后一个
        2>appendTo
        3>prepend    在开始追加。添加后成为第一个
        4>prependTo
        
        5>after            在每个匹配元素后插入。如　：$("div").after("<p>一段文本</p>");
        6>before        ..............前....
        7>insertAfter    如：$("<p>一段文本</p>").insertAfter("div");
        8>insertBefore

5.删除元素

1>remove()　如：$("p").remove();
        2>empty()

6.复制元素

1>clone() 如；var $div = $("div").clone();若使用clone(true)则同时会复制目标元素的事件

7.元素替换

1>replaceWith() 如：$("p").replaceWith("<div>替换</div>");
        2>replaceAll()

8.包裹(加壳)元素

1>A.wrap(B)        用元素Ｂ包裹元素Ａ。如：$("p").wrap("<span class='wrap' />");在p元素外加一层span，这里每一个p都会有一个span
        2>wrapAll()        用元素Ｂ包裹全部元素Ａ。如：$("p").wrapAll("<span class='wrap' />");则在新增元素span下有(连续)若干原有的p元素
        3>wrapInner()     元素B将包裹在每个元素Ａ里。与1>刚好相反。

9.属性操作

1>attr()    
            <1>设置属性        如：$("img").attr( { src:"1.jpg" , alt:"测试图像");  $("p").attr("title","文本");
            <2>获取属性        如：$("p").attr("title"); 若没有此属性则返回 undefined.
            <3>删除属性    removeAttr()    如：$("p").removeAttr("title");

10.类样式

1>追加样式 addClass()。        如：$("p").addClass("style1");
        2>删除样式 removeClass()。　如：$("p").removeClass("style1");
        3>切换样式 toggleClass(styleName ,[选项])。如果第二个参数不存在，如果目标元素中的样式不存在，则追加，如果存在，则删除样式。如：$("p").toggleClass("hidden",n++ % 3== 0);//每三次切换一次样式
        4>样式判断 hasClass()。　    如 $("p").hasClass("style1"); 返回true或false

11.操作Html、文本与值

1>读写Html，html()。此方法是对Dom的innerHtml的封装
        如：var $html = $("p").html();
            $("p").html($html);
        2>读写文本，text()。用法同上。
        3>读写表单值，val()。用法同上。
        示例：
            <form>
                <select id="s1">
                    <option value="1" selected="selected">单选1</option>
                    <option value="2" >单选2</option>
                </select>
                <select id="s2" multiple="multiple">
                    <option value="1" selected="selected">单选1</option>
                    <option value="2" >单选2</option>
                    <option value="3" >单选3</option>
                </select>
                <input type="checkbox" value="6">复选框</input>
                <input type="radio" value="8">单选框</input>
            </form>
            
            $("#s1").val("单选2"); 
            $("s2").val(["多选2","多选3"]); 
            $("input").val(["6","8"]);
            
    12.读写样式,css() 第169页

13.偏移位置

1>绝对偏移位置 offset()方法返回元素在当前窗口的相对位置。返回值为一个对象，包含top与left属性。仅对可见元素有效。
        2>相对偏移位置 position()方法。用法同上。
        注：
            相对偏移位置是元素相对于距离最近的父级定位元素左上角的距离。
            <1>定位元素，就是被定义了　相对(),绝对(),固定()定位的元素，即设置了CSS的position为absolute,fixed或relative。
            <2>最近的父级定位元素是指元素的父级的position被定义为<1>中的值。若父级中没有定义position的三个属性值，那么父级要再向上追溯，直到body

14.元素的高和宽

1>width()
        2>height()
        3>innerHeight()    //返回元素的内部高
        4>innerWidth()    //..............宽
        
        5>outerHeight() //返回元素的总高
        6>outerWidth()    //............宽

15.元素遍历
        1>children()    //子元素。如：$("body").children().eq(2).children()[0];
        2>next()        //相邻的下一个(同级)
        3>prev()        //......上.........
        4>parent()        //父元素

十二、事件

    1.注册与注销

addEventListener()、removeEventListener()及arguments.callee
        事件层级向上冒泡直到document,
        attachEvent()、detachEvent()
        事件冒泡的中上，2级事件模型使用stopPropageagtion(),而Ie中使用Event的ancelBubble属性。

2.jQuery事件模型

1>特征如下：

<1>统一了事件处理中的各种方法
            <2>允许在每个元素上为每个事件建立多个处理程序
            <3>采用2级事件模型中标准的事件类型名称
            <4>统一了Event对象的传递方法，并对Event对象的常用属性和方法进行规范
            <5>为事件管理和操作提供统一的方法

2>事件绑定

<1>bind(type,[data],fn)
                type:     事件类型
                data:    可选,做为event.data属性值传递给事件处理对象的数据对象
                fn:        事件处理函数
                示例：
                    $("p").bind("click",function()
                                        {
                                            alert($(this).text());//这里$(this)取当前对象
                                        }
                                )
                    或
                    $("p").bing(    "click",
                                    {a:"A:,b:"B"},
                                    function(event)
                                    {
                                        $(this).text(event.data.a + event.data.b);//传递数据
                                        /*如果想取消事件类型的默认行为且阻止事件冒泡则可以
                                        return false;
                                        或
                                        event.preventDefault();
                                        若使用
                                        event.stopPropagation();则只阻止一个事件冒泡。*/
                                    }
                                )

<2>特定类型事件绑定处理程序
                1)blur()
                2)focus()
                3)mousedown()
                4)resize()
                5)change()
                6)keydown()
                7)mousemove()
                8)scroll()
                9)click()
                10)keypress()
                11)mouseout()
                12)select()
                13)dblclick()
                14)keyup()
                15)mouseover()
                16)submit)
                17)error()
                18)load()
                19)mouseup()
                20)unload()

<3>一次性绑定 one()。绑定的事件在执行一次后就失效。用法与bind相同
                如：$("p").one("click",function(){....});

<4>注销事件,unbind()方法。能够从每一个匹配元素中删除绑定的事件。如果没有指定参数，则删除所有绑定的事件。
                $("p").unbind();
                或
                $("p").unbind("mouseover");
                
                多绑定的删除
                $("p").mouseover(f);
                $("p").mouseover(e);
                function f()
                {.....}
                function e()
                {.....}
                $("p").unbind("mouseover",e);//删除绑定的事件 e

<5>jQuery的事件模型中Event对象的属性
                1)type                     事件类型,返回事件名称
                2)target                事件发生的节点,获取激活事件的对象
                3)relatedTarget            相关节点。事件激活时的前一个节点
                4)altKey                是否按下alt键。是为true
                5)ctrlKey               
                6)shiftKey              
                7)metaKey                是否按下meta键
                8)which                    在mousedown,mouseup,click时哪个键改变了状态。1=左,2=中,3=右
                9)which                 在keydown,keypress时键盘的数字编码
                10)pageX                光标相对于页面原点的水平坐标
                11)pageY                ....................垂直....
                12)screenX                ..........屏幕......水平....
                13)screenY                ....................垂直....
                14)data                    传递的数据
                15)preventDefault()        取消可能引起任何语义操作的事件
                16)stopPropagation()    防止事件沿着Dom数据向上传播

<6>jQuery事件的触发

1)trigger(type ,[data]),会触发浏览器默认行为，可以使用return false或 15) 16)方法进行阻止。
                    type:    事件类型，以字符串表示
                    data:    传递的数据。与bind相同。
                    如：
                        $("p").click(    function(){.... return false;} );//return false阻止事件冒泡的传播
                        $("p").mouseover(    function()
                                            {
                                                $(this).trigger("click");//在鼠标移动时触发click事件
                                            }
                                        );

2)triggerHandler(type,[data])　与trigger相似。不同之处有：
                    (1)不会触发浏览器默认行为。
                    (2)只触发jQuery对象集合同第一个元素的事件处理过程。即jQuery对象集合中除第一个之外的其它元素的事件不会被触发。
                    (3)返回值为事件处理函数的返回值，则不是jQuery对象。若开始的jQuery对象集合为空，则返回 undefined。

3)其它触发方法
                    (1)blur()　    失去焦点
                    (2)change()
                    (3)click()
                    (4)dblclick()
                    (5)error()
                    (6)focus()
                    (7)keydown()
                    (8)keyup()
                    (9)keypress()
                    (10)select()
                    (11)submit()
                    示例：
                        $("p").click();

<7>jQuery事件切换

1)toggle()
                    可以为click事件类型绑定多个事件处理函数，并确保每次单击后顺序依次调用不同的函数。这与直接为click事件绑定两个函数功能不同。
                    $("input").toggle(    function()
                                        {this.value="第一次单击";},//注：这里使用的是this
                                        function()
                                        {this.value="第二次单击";},
                                        function()
                                        {this.value="第三次单击";}
                                    )
                    若同时给click绑定其它的事件，则也会被同时执行。
                    问：this 与　$(this) 在什么时候使用？如何区分？

2)hover(fnMouseOver,fnMouseOut)。模拟鼠标悬停事件。可用此函数取代MouseOver与MouseOut函数
                    fnMouseOver    鼠标移动到元素上要触发的函数
                    fnMouseOut    鼠标移出元素要触发的函数
                    $("input").hover(
                                        function()
                                        {...鼠标移过...},
                                        function()
                                        {...鼠标移出...}
                                    )

<8>事件委派

1)live(type,fn)

能够给所有当前以及未来匹配的元素绑定一个事件处理函数。
                    示例：当前页面的p元素以及以后新增加的p元素都会有一个click方法。
                    $("p").live("click",    function()
                                            {....;}
                                )
                    live()只支持绑定一个事件处理函数。且事件冒泡行为与传统方式不同。如果内外元素都用live事件绑定，则可以使用return false阻止。或外部为普通绑定，内部为live绑定，则不能通过return false来阻止。

2)die(type)
                    删除live()的绑定事件。
                    $("p").die("click");
                    若不带参数，则删除所有的事件绑定
                    $("p").die();
                    若指定第二个参数，则删除指定的事件处理函数
                    $("p").die("click",e);

<9>jQuery事件命名空间(catalog?分类)
                使用 .XXX 的形式表示
                示例：
                    $("div").bind("click.a", function(){});
                    $("div").bind("dblclick.a", function(){});
                    $("div").bind("mouseover.a", function(){});
                    $("div").bind("mouseout.a", function(){});
                    $("div").bind("keydown.b", function(){});
                若删除同一分类的事件，则
                    $("p").unbind(".a");
                此时 keydown.b　是不会删除的。
                另外，使用trigger()时附加了感叹号 ! ，则表示不触发有分类的事件。
                如：
                    $("div").bind("click",function(){});
                    $("div").bind("click.a",function(){});
                    
                    $("div").trigger("click!");//将不会触发click.a的事件处理函数

<10>jQuery多事件绑定

1)分开写绑定过程
                    $("div").bind("click",function(){});
                    $("div").bind("click.a",function(){});
                    
                2)连写绑定过程
                    $("div").bind( "click",function(){} ).bind("click.a",function(){});
                    
                3)多事件对应同一事件处理函数
                    $("div").bind("mouseover mouseout", function(event){...} );//同时绑定mouseover与mouseout到同一处理过程。
                
            <11>jQuery自定义事件
                如：事件名称：    delay
                    处理函数:    function(){}
                $("input").bind("delay",function(event) 
                                        {
                                            setTimeout(    function()
                                                        {...},
                                                        1000
                                                    );
                                        }
                                )
                                
        3>ready事件，初始化
            可用于每一个jQuery对象。jQuery允许在文档中无限次使用ready事件，但不能同时使用JavaScript的load事件。若使用了load事件，那么ready事件将不会被触发。
            ready事件在Dom完全就绪时就可以被触发。此时文档元素全部可以被访问，即浏览器下载完源码并解析html后。但是，一些资源可能没有被下载，如：图像。这时无法访问图像的属性，如width,height。
            那么可以使用jQuery的load方法。此方法与JavaScript的load方法功能相同。
            $(window).load(    function(){} );

4>使用JavaScript自定义addLoadEvent()方法，模拟window.OnLoad()
            function addLoadEvent(fn)
            {
                var oldOnLoad = window.onload;//保存句柄
                if ( typeof window.onload != 'function')
                {
                    window.onload = fn;
                }
                else
                {
                    window.onload = function()
                                    {
                                        oldOnLoad();
                                        fn();
                                    }
                }
            }
            使用方法：
                addLoadEvent(function(){...});
                addLoadEvent(function(){....});

十三、元素的显示、隐藏及动画

1.hide()    隐藏元素
        $("div").hide();
        
    2.show()    显示元素
        $("div").show();
        
    3.toggle() 可以切换元素显示与隐藏
        $("div").toggle();
    
    4.slideDown() 滑动显示,将隐藏的元素滑动显示出来。
        $("div").slideDown();
        
    5.slideUp() 滑动隐藏。
        $("div").slideUp();
        
    6.slideToggle() 滑动隐藏与显示切换
        $("div").slideToggle();
        
    7.fadeIn() 渐显。只用于隐藏的元素。
        $("div").fadeIn(2000);
        
    8.fadeOut() 渐隐。由"显示"状态改变透明度直接"隐藏"。只用到显示的元素。
        $("div").fadeOut(2000);
        
    9.fadeTo() 改变透明度。
        $("div").fadeTo(2000,0.4);
        
    10.fadeToggle 切换
        $("div").fadeToggle(2000);
        
    11.animate() 动画显示,参数中的属性必须是驼峰命名法。
        $("img").animate( {
                            width:"100%",
                            height:"100%",
                          },
                          1000
                        ); 
        
    12.stop() 停止动画
        $("img").stop();
        
    13.off 属性，跳过动画显示的过程，直接到最终效果。
        jQuery.fx.off = true;
        或
        $.fx.off = true;

十四、Ajax

    1.get(url[,data] [,callBack] [,dataType])方法
        url            请求的url地址
        data        一个对象结构的键/值对列表
        callback    请求成功后的回调函数
        datatype    返回的数据格式，如：xml、html、script、json、text、_default
        
        示例：
            1>字符串组装
                $(    function()
                    {
                        $("#ValideId").click( function()
                                                {
                                                    var name = encodeURIComponent($("#Vid :text").val());
                                                    var psw = encodeURIComponent($("#IdPsw").val());
                                                    $("#IdA").html(name);
                                                    $("#IdB").html(psw);
                                                    $.get("test2.asp?name=" + name + "&psw=" + psw, function(data)
                                                                                                        {
                                                                                                            $("#ValideIdResult").html(data);
                                                                                                        }
                                                         )
                                                    
                                                }
                                            )
                    }
                )
            2>传递对象结构
                $(    function()
                    {
                        $("#ValideId").click( function()
                                                {
                                                    var _name = encodeURIComponent($("#Vid :text").val());
                                                    var _psw = encodeURIComponent($("#IdPsw").val());
                                                    $("#IdA").html(_name);
                                                    $("#IdB").html(_psw);
                                                    $.get("test2.asp",
                                                            {
                                                                name : _name,
                                                                psw  : _psw
                                                            },
                                                            function(data)
                                                            {
                                                                $("#ValideIdResult").html(data);
                                                            }
                                                         )
                                                    
                                                }
                                            )
                    }
                )
                
    2.getJSON() 与 getScript()
        getJSON请求 json　数据
        getScript请求 Script　文件。
    
    3.post() 用法与get()相同
    
    4.ajax()
        1>ajax()只有一个参数，表示列表结构的对象。
        如：
            ajax({
                    type : "GET",
                    url  : "test.js",
                    dataType    : "script"
                    }
                );
        2>参数列表：
            <1>async            是否异步.默认true
            <2>beforeSend    发送请求前的函数
            <3>cache            是否设置缓存，默认True
            <4>complete        请求完成后的回调函数
            <5>....见 280页
        
        3>ajax状态
            <1>ajaxStart()        请求时响应
            <2>ajaxSend()        发送前响应
            <3>ajaxComplete()    完成请求时响应
            <4>ajaxSuccess()    请求成功时响应
            <5>ajaxStop()        请求结束时响应
            <6>ajaxError()        请求发生错误时响应
            例：
                $("div").ajaxStart( function()
                                    {
                                        alert("Ajax请求开始。");
                                    }
                                  )    
            事件中的默认参数
            <1>event    事件类型
            <2>request    请求信息
            <3>settings    设置的选项信息
            <4>ajaxError的四个参数 event、XMLHttpRequest、ajaxOption、thrownError。前三个与前面相同，最后一个表示抛出的错误。
            
        4>load()方法。能把加载的网页文件附加到指定的标签中。
        例：
            $(    function()
                {
                    $("#btnLoad").click(    function()
                                            {
                                                $("#loadInner").load("testInner.html");
                                            }
                                        )    
                }
            )
        可以使用ajax来代替。因为load()是ajax来实现的。
            $(    function()
                {
                    $("#btnLoad2").click(    function()
                                            {
                                                var htmlSrc = $.ajax( {
                                                                    url    : "testInner.html",
                                                                    async : false
                                                                    }
                                                                ).responseText;
                                                $("#loadInner").html(htmlSrc);
                                            }
                                        )    
                }
            )
        
    5.ajaxSetup() 预设选项
        与ajax()的参数选项相同，并实现全局共享。
        如：
        $.ajaxSetup(
                        {
                            url      : "test6.asp",
                            global     : false,
                            type      : "POST:,
                            dataType : "text"
                        }
                   )
                        
        $("input").eq(0).click(    function()
                                {
                                    $.ajax(    
                                            {
                                                data : "name=zhu"
                                            }
                                           );
                                }
                              )
                              
    6.对字符串参数的处理
        1>serialize()    能将form中的元素按　元素id=元素值&元素id=元素值...的形式组成字符串。
            例：$("#serialize").html($("form").serialize());
            
        2>serializeArray()　与1>相似的 json格式的JSON对象。此方法不能作用于form，而只能作用于表单中的域。
            例：var jsonArr = $("input,select,:radio").serializeArray(); //解出这个对象数组
                var str = "";
                var $json = $(jsonArr);//转换
                for(var i=0;i< $json.length ;i++)
                {
                    str += $json[i]["name"] + " : " + $json[i]["value"] + "<br/>";    
                }
                $("#serialize").html(str);

十五、jQuery插件扩展

    1.jQuery.extend() 能够创建全局函数或选择器
        示例：
            $.extend(
                        {
                            min : function(a,b)
                                    {
                                        return a<b?a:b;
                                    },
                            max : function(a,b)
                                    {
                                        return a>b?a:b;
                                    }
                        }
                    )
                    
            调用
                $.min(1,2);
                $.max(1,2);
                P311页