JQuery core

knight_black_bob

浏览: 822796 次
性别:
来自: 北京

最近访客更多访客>>

bian1024

lli

cqh520llr

hxgdragon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

jquery 前端

jquery core

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

第1章初识jQuery
第2章 jQuery 基础选择器
 第3章 jQuery过滤性选择器
 第4章 jQuery表单选择器
 第5章 jQuery 操作DOM元素

attr() clone() replaceWith()和replaceAll() wrap()和wrapInner() each() remove()
第6章 jQuery 事件与应用

ready() bind() hover() toggle() unbind() one() trigger() focus live() show()和hide()
第7章 jQuery 动画特效

show()和hide() toggle() slideUp()和slideDown() slideToggle() fadeIn()和fadeOut() fadeTo() animate() stop() delay()
第8章 jQuery 实现Ajax应用

load() getJSON() getScript() get() serialize() ajax() ajaxSetup() ajaxStart()和ajaxStop()
第9章 jQuery 常用插件

    表单验证插件——validate
    表单插件——form
   图片灯箱插件——lightBox
   图片放大镜插件——jqzoom
   cookie插件——cookie
    搜索插件——autocomplete
    右键菜单插件——contextmenu
    自定义对象级插件——lifocuscolor插件
    自定义类级别插件—— twoaddresult
第10章 jQuery UI型插件

      拖曳插件——draggable
     放置插件——droppable
     拖曳排序插件——sortable
      面板折叠插件——accordion
      选项卡插件——tabs
      对话框插件——dialog
     菜单工具插件——menu
     微调按钮插件——spinner
     工具提示插件——tooltip

第11章 jQuery 工具类函数

$.browser $.support.boxModel $.isEmptyObject $.isPlainObject $.contains $.trim $. param $.extend()

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

---------------------------------------------------------------------------------------------------------------------------------

第1章初识jQuery

---------------------------------------------------------------------------------------------------------------------------------
第2章 jQuery 基础选择器
$("parent > child")
child参数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系。
$("prev + next")
其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。
$("prev ~ siblings")
其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。

---------------------------------------------------------------------------------------------------------------------------------
第3章 jQuery过滤性选择器
$("li:first") $("li:last") $("li:eq(2)") $("li:contains('aaa')") $("li>label") $("input:hidden") $("li:visible") $("li[attribute=value]")
$("li[attribute!=value]") $("li[attribute*=value]") $("li:first-child") $("li:last-child") $("div:has(span)")

---------------------------------------------------------------------------------------------------------------------------------
第4章 jQuery表单选择器
$("form :input") $("form :text") $("form :password") $("form :radio") $("form :checkbox") $("form input:submit") $("form :image") $("form :button")
$("form :checked") $("form :selected")

---------------------------------------------------------------------------------------------------------------------------------
第5章 jQuery 操作DOM元素
+ attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值
使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。
通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。
使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名
append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。
$(content).appendTo(selector) 参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。
使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容，调用格式分别为： $(selector).before(content)和$(selector).after(content) 其中参数content表示插入的内容，该内容可以是元素或HTML字符串。

+ 调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，它的调用格式为：
$(selector).clone()
其中参数selector可以是一个元素或HTML内容。
例如，使用clone()方法复制页面中的一个<span>元素，并将复制后的元素追加到页面的后面

+ replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：
$(selector).replaceWith(content)和$(content).replaceAll(selector)
参数selector为被替换的元素，content为替换的内容。
例如，调用replaceWith()方法将页面中<span>元素替换成一段HTML字符串

+ wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)
参数selector为被包裹的元素，wrapper参数为包裹元素的格式。
例如，调用wrap()方法，将<span>用<div>元素包裹起来，

+ 使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：
$(selector).each(function(index))
参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。
例如，遍历页面中的<span>元素，当元素的序列号为2时，添加名为“focus”的样式

+ remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而

empty()方法则只删除所选元素的子元素。
例如，调用remove()方法删除<span>元素中类别名为“red”的

---------------------------------------------------------------------------------------------------------------------------------
第6章 jQuery 事件与应用
+ ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外，下列写法是相等的：
$(document).ready(function(){})等价于$(function(){});
例如，当触发页面的ready()事件时，在<div>元素中显示一句话

+ bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：
$(selector).bind(event,[data] function)
参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。
例如，绑定按钮的单击事件，单击按钮时，该按钮变为不可用

+ hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：
$(selector).hover(over，out);
over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数

+ toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：
$(selector).toggle(fun1(),fun2(),funN(),...)
其中，fun1，fun2就是多个函数的名称
例如，使用toggle()方法，当每次点击<div>元素时，显示不同内容
toggle()····同时，它还可以实现元素的隐藏与显示的切换····

+ unbind()方法可以移除元素已绑定的事件，它的调用格式如下：
$(selector).unbind(event,fun)
其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。
例如，点击按钮时，使用unbind()方法移除<div>元素中已绑定的“dblclick”事件

one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，它的调用格式如下：
$(selector).one(event,[data],fun)
参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
例如，使用one方法绑定<div>元素的单击事件，在事件执行的函数中，累计执行的次数，并将该次数显示在页面中

+ trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，总之，该事件必须能执行，它的调用格式为：
$(selector).trigger(event)
其中event参数为需要手动触发的事件名称。
例如，当页面加载时，手动触发文本输入框的“select”事件，使文本框的默认值处于全部被选中的状态
$("div").bind("change-color", function () {
$(this).addClass("color");
});
$("div").trigger("change-color");

+ focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。
例如，在触发文本框的“focus”事件时，<div>元素显示提示内容

+ 当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触change事件。
例如，当在页面选择下拉列表框中的选项时，将在<div>元素中显示所选择的选项内容

+ 与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件，格式如下：
$(selector).live(event,[data],fun)
参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
例如，使用live()方法绑定，页面中按钮元素的单击事件，而这个按钮是通过追加的方式添加至页面的

+ show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为：
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])
参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
例如，在页面中，通过点击“显示”和“隐藏”两个按钮来控制图片元素的显示或隐藏状态

---------------------------------------------------------------------------------------------------------------------------------
第7章 jQuery 动画特效
+ show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为：
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])
参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
例如，在页面中，通过点击“显示”和“隐藏”两个按钮来控制图片元素的显示或隐藏状态

+ 第一节我们学过实现元素的显示与隐藏需要使用hide()与show()，那么有没有更简便的方法来实现同样的动画效果呢？
调用toggle()方法就可以很容易做到，即如果元素处于显示状态，调用该方法则隐藏该元素，反之，则显示该元素，它的调用格式是：
$(selector).toggle(speed,[callback])
其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。
例如，调用toggle()方法以动画的效果显示和隐藏图片元素
$(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $spn.toggle(3000,function(){
                     $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
                    })
                });
            });

+ 可以使用slideUp()和slideDown()方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素，它们的调用方法分别为：
$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])
其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。
要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。
例如，调用slideUp()和slideDown()方法实现页面中元素的向上和向下的滑动效果
$(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                          $("ul").slideUp(3000,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                          $("ul").slideDown(3000,function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });

+ 使用slideToggle()方法可以切换slideUp()和slideDown()，即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为：
$(selector).slideToggle(speed,[callback])
其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称
   $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                     $spn.slideToggle(3000,function() {
               $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");
                    })
                })
            });

+ fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素，它们的调用格式分别为：
$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])
其中参数speed为淡入淡出的速度，callback参数为完成后执行的回调函数名。
例如，分别在页面中以淡入淡出的动画效果显示图片元素
$(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").fadeIn(30,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").fadeOut(30,function() {
                            $("#hidval").val(0);
                        })
                    }
                })
            });

+ 使用fadeTo()方法设置淡入淡出效果的不透明度
调用fadeTo()方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值，该方法的调用格式为：
$(selector).fadeTo(speed,opacity,[callback])
其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。
例如，分别调用fadeTo()方法，设置三个图片元素的不透明度值，

+ 调用animate()方法可以创建自定义动画效果，它的调用格式为：
$(selector).animate({params},speed,[callback])
其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。
例如，调用animate()方法以由小到大的动画效果显示图片
$(function () {
               $("span").animate({
                    width: "80px",
                    height: "80px"
                },
                3000, function () {

                });
            });

+ 调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。
例如，调用animate()方法先将图片向右移动90px，然后，再将图片宽度与高度分别增加30px
$(function () {
                 $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                });
            });

+ stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为：
$(selector).stop([clearQueue],[goToEnd])
其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。
例如，在页面中，当图片元素正在执行动画效果时，点击“停止”按钮，中止正在执行的动画效果
$(function () {
                $("span").animate({
                    left: "+=200px"
                }, 3000, function () {
                });
                $("#btnStop").bind("click", function () {
                   $("span").stop();
                });
            });

+ delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：
$(selector).delay(duration)
其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。
例如，当页面中图片动画正在执行时，点击“延时”按钮调用delay()方法推迟2000毫秒后继续执行
$(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=60px',
                        width: '+=60px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                    $("span").delay(2000);
                    $("#tip").html("正在延时!");
                });
            });
delay函数不会终止当前动画执行的一个阶段，比如说例子中的左边距+100px，这个过程是不会被中断的

---------------------------------------------------------------------------------------------------------------------------------
第8章 jQuery 实现Ajax应用
+ 使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：
load(url,[data],[callback])
参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
例如，点击“加载”按钮时，向服务器请求加载一个指定页面的内容，加载成功后，将数据内容显示在<div>元素中，并将加载按钮变为不可用。
$(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $("ul")
                    .html("<img src='Images/Loading.gif' alt=''/>")
                  .load("data/fruit_part.html li",function(){
                        $this.attr("disabled", "true");
                    });
                })
            });

+ 使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数
$(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                     $.getJSON("data/sport.json",function(data){
                        $this.attr("disabled", "true");
                        $.each(data, function (index, sport) {
                            if(index==3)
                            $("ul").append("<li>" + sport["name"] + "</li>");
                        });

                    });
                })
            });

+ 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
例如，点击“加载”按钮，调用getScript()加载并执行服务器中指定名称的JavaScript格式的文件，并在页面中显示加载后的数据内容
$(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
             $.getScript(" /data/sport_f.js",function(){
                        $this.attr("disabled", "true");
                    });
                })
            });

+ 使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：
$.get(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
例如，当点击“加载”按钮时，调用get()方法向服务器中的一个.php文件以GET方式请求数据，并将返回的数据内容显示在页面中
$(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                 $.get("/data/info_f.php",function(data){
                        $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                    }, "json");
                })
            });

+ 与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：
$.post(url,[data],[callback])
参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。
例如，在输入框中录入一个数字，点击“检测”按钮，调用post()方法向服务器以POST方式发送请求，检测输入值的奇偶性，并显示在页面中
$("#btnCheck").bind("click", function () {
   $.post("/data/check_f.php",{num: $("#txtNumber").val()},
    function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
    });
})

+ 使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：
$(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
例如，在表单中添加多个元素，点击“序列化”按钮后，调用serialize()方法，将表单元素序列化后的标准URL编码文本字符串显示在页面中
$("#btnAction").bind("click", function () {
$("#litest").html($("form").serialize());
})

==>Text1=aaa&Select1=0&Checkbox1=on

+ 使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：
jQuery.ajax([settings])或$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。
例如，点击页面中的“加载”按钮，调用ajax()方法向服务器请求加载一个txt文件，并将返回的文件中的内容显示在页面
$("#btnCheck").bind("click", function () {
    $.ajax({
url:"/data/check.php",
data: { num: $("#txtNumber").val() },
type:"post",
success: function (data) {
     $("ul").append("<li>你输入的<b> "
     + $("#txtNumber").val() + " </b>是<b> "
     + data + " </b></li>");
}
    });
})

+ 使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。
例如，先调用ajaxSetup()方法设置全局的Ajax选项值，再点击两个按钮，分别使用ajax()方法请求不同的服务器数据，并将数据内容显示在页面
$(function () {
                $.ajaxSetup({
                 type:"text",
                 success:function(data){
                        $("ul").append("<li>你输入的<b> "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                    }
                });
                $("#btnShow_1").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: " data/check.php"
                    });
                })
                $("#btnShow_2").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: " data/check_f.php"
                    });
                })
            });

+ 使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。
例如，在调用ajax()方法请求服务器数据前，使用动画显示正在加载中，当请求成功后，该动画自动隐藏
$(function () {
                $("#divload").ajaxStart(function(){
                    $(this).html("正在请求数据...");
                });
                $("#divload").ajaxStop(function(){
                    $(this).html("数据请求完成！");
                });
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.ajax({
                        url: "data/info_f.php",
                        dataType: "json",
                        success: function (data) {
                            $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>对我说：" + data.say + "</li>");
                        }
                    });
                })
            });

---------------------------------------------------------------------------------------------------------------------------------
第9章 jQuery 常用插件

+ 表单验证插件——validate
<script type="text/javascript" src="/jquery.validate.js"></script>
<script type="text/javascript" src="/jquery.validate.messages_cn.js"></script>
该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：
$(form).validate({options})
其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。
例如，当点击表单中的“提交”按钮时，调用validate插件验证用户名输入是否符合规则，并将异常信息显示在页面中
$("#frmV").validate(
{
      email:{
required:true,
email:true
}
      },
      errorPlacement: function (error, element) {
   error.appendTo(".tip");
      }
}
);

+ 表单插件——form
<script type="text/javascript" src="jquery.form.js">
通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：
$(form). ajaxForm ({options})
其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。
例如，在页面中点击“提交”按钮，调用form插件的
ajaxForm()方法向服务器发送录入的用户名和密码数据，服务器接收后返回并显示在页面中
$(function () {
                var options = {
                    url: "/form_f.php",
                    target: ".tip"
                }
                $("#frmV").ajaxForm(options);
            });

+ 图片灯箱插件——lightBox
<script type="text/javascript" src=" /jquery.notesforlightbox.js"></script>
该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：
$(linkimage).lightBox({options})
其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
例如，以列表的方式在页面中展示全部的图片，当用户单击其中某张图片时，通过引入的图片插件，采用“灯箱”的方式显示所选的图片
$(function () {
               $("li a").lightBox({
                    overlayBgColor: "#666", //图片浏览时的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 600 //图片切换时的速度
                })
            });

+ 图片放大镜插件——jqzoom
<script type="text/javascript" src=" jquery.jqzoom.js"></script>
在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：
$(linkimage).jqzoom({options})
其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
例如，在页面中，添加一个被<a>元素包含的图片元素，当在图片元素中移动鼠标时，在图片的右边，将显示放大后的所选区域效果
$(function () {
              $("#jqzoom").jqzoom({ //绑定图片放大插件jqzoom
                    zoomWidth: 100, //小图片所选区域的宽
                    zoomHeight: 100, //小图片所选区域的高
                    zoomType: 'reverse' //设置放大镜的类型
                });
            });

+ cookie插件——cookie
<script src=" jquery.cookie.js" type="text/javascript"></script>
使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：
保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)
其中参数key为保存cookie对象的名称，value为名称对应的cookie值。
例如，当点击“设置”按钮时，如果是“否保存用户名”的复选框为选中状态时，则使用cookie对象保存用户名，否则，删除保存的cookie用户名，
$(function () {
                if ($.cookie("email")) {
                    $("#email").val($.cookie("email"));
                }
                $("#btnSet").bind("click", function () {
                    if ($("#chksave").is(":checked")) {
                       $.cookie("email", $("#email").val(), {
                            path: "/", expires: 7
                        })
                    }
                    else {
                        $.cookie("email", null, {
                            path: "/"
                        })
                    }
                });
            });

+ 搜索插件——autocomplete
<script src=" jquery.autocomplete.js" type="text/javascript"></script>
搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：
$(textbox).autocomplete(urlData,[options]);
其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象。
例如，当用户在文本框输入内容时，调用搜索插件的autocomplete()方法返回与输入内容相匹配的字符串数据，显示在文本框下，提示选择
$(function () {
                var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
              $("#txtSearch").autocomplete(arrUserName,{
                    minChars: 0, //双击空白文本框时显示全部提示数据
                    formatItem: function (data, i, total) {
                        return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
                    },
                    formatMatch: function (data, i, total) {
                        return data[0];
                    },
                    formatResult: function (data) {
                        return data[0];
                    }
                }).result(SearchCallback);
                function SearchCallback(event, data, formatted) {
                    $(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));
                }
            });

+ 右键菜单插件——contextmenu
<script src=" jquery.contextmenu.js" type="text/javascript"></script>
右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下：
$(selector).contextMenu(menuId,{options});
Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。
例如，选中页面<textarea>元素，点击右键，弹出插件绑定的快捷菜单，点击菜单中的各个选项，便在页面中显示操作的对应名称
$(function () {
             $("#divtest").contextMenu("sysMenu",
                  { bindings:
                     {
                         'Li3': function (Item) {
                             $(".tip").show().html("您点击了“保存”项");
                         },
                         'Li4': function (Item) {
                             $(".tip").show().html("您点击了“退出”项");
                         }
                     }
                  });
            });

+ 自定义对象级插件——lifocuscolor插件
<script src=" jquery.lifocuscolor.js" type="text/javascript"></script>
自定义的lifocuscolor插件可以在<ul>元素中，鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色，即定义<li>元素选中时的背景色，调用格式为：
$(Id).focusColor(color)
其中，参数Id表示<ul>元素的Id号，color表示<li>元素选中时的背景色。
例如，在页面中，调用自定义的lifocuscolor插件，自定义<li>元素选中时的背景色
$(function () {
$("#u1").focusColor("#ccc"); //调用自定义的插件
})

+ 自定义类级别插件—— twoaddresult
<script src=" jquery.twoaddresult.js" type="text/javascript"></script>
通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为：
$.addNum(p1,p2) 和 $.subNum(p1,p2)
上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值。
例如，在页面的两个文本框中输入任意数值，点击“计算”按钮调用自定义插件中$.addNum()方法，计算两数值的和并将结果显示在另一文本框中
$(function () {
                $("#btnCount").bind("click", function () {
                    $("#Text3").val(
                       $.subNum($("#Text1").val(),$("#Text2").val());
           );
                });
            });

---------------------------------------------------------------------------------------------------------------------------------
第10章 jQuery UI型插件
<script src=" /jquery-ui-1.9.2.min.js" type="text/javascript"></script>
+ 拖曳插件——draggable
拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：
$(selector). draggable({options})
options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。
例如，在页面中的<div>元素中添加两个子类<div>，通过与拖曳插件绑定，这两个子类<div>元素只能在外层的父<div>元素中任意拖曳
$(function () {
            $("#x").draggable({containment:"parent",axis:"x"});
            $("#y").draggable({containment:"parent",axis:"y"});
                });

+ 放置插件——droppable
除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：
$(selector).droppable({options})
selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。
例如，在页面中，通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中，同时改变“购物车”的背景色和数量值
$(function () {
                $(".drag").draggable();
                $(".cart").droppable({
                    drop: function () {
                             $(this).addClass('focus').find('#tip').html('有产品了');
                    }
                })
            });

+ 拖曳排序插件——sortable
拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：
$(selector).sortable({options});
selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，
例如，在页面中，通过加载sortable插件将<ul>元素中的各个<li>表项实现拖曳排序的功能
$(function () {
                $("ul").sortable({
                    delay:2,
                    opacity:0.5

})
});

+ 面板折叠插件——accordion
面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下：
$(selector).accordion({options});
其中，参数selector为整个面板元素，options参数为方法对应的配置对象。
例如，通过accordion插件展示几个相同区域面板的折叠效果
$(function () {
$("#accordion").accordion();
});

+ 选项卡插件——tabs
使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容，它的调用格式如下：
$(selector).tabs({options});
selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。
例如，在页面中，添加选项卡的标题和内容元素，并绑定tabs插件，当点击标题时，以选项卡的方式切内容
   $(function () {
               $("#tabs").tabs({
                    //设置各选项卡在切换时的动画效果
                    fx: { opacity: "toggle", height: "toggle" },
                    event: "mousemove" //通过移动鼠标事件切换选项卡
                })
            });

+ 对话框插件——dialog
对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：
$(selector).dialog({options});
selector参数为显示弹出对话框的元素，通常为<div>，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
例如，当点击“提交”按钮时，如果文本框中的内容为空，则通过dialog插件弹出提示框，提示输入内容不能为空
$(function () {
                $("#btnDelete").bind("click", function () { //询问按钮事件
                    if ($("#spnName").html() != null) { //如果对象不为空
                        sys_Confirm("您真的要删除该条记录吗？");
                        return false;
                    }
                });
            });
            function sys_Confirm(content) { //弹出询问信息窗口
              $('#dialog-modal').dialog({
                    height: 140,
                    modal: true,
                    title: '系统提示',
                    hide: 'slide',
                    buttons: {
                        '确定': function () {
                            $("#spnName").remove();
                            $(this).dialog("close");
                         },
                        '取消': function () {
                            $(this).dialog("close");
                        }
                    },
                    open: function (event, ui) {
                        $(this).html("");
                        $(this).append("<p>" + content + "</p>");
                    }
                });
            }

+ 菜单工具插件——menu
菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：
$(selector).menu({options});
selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。
例如，在页面中，通过<ul>元素内联的方式构建一个三层结构的导航菜单，并将最外层<ul>元素通过menu()方法绑定插件，实现导航菜单的功能
$(function () {
$("#menu").menu( );
});

+ 微调按钮插件——spinner
微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：
$(selector).spinner({options});
selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。
例如，将页面中的三个输入文本框都与微调插件相绑定，当改变三个文本框值时，对应的<div>元素的背景色也将随之发生变化
$(function () {
                //定义变量
                var intR = 0, intG = 0, intB = 0, strColor;
              $("input") .spinner({
                    //初始化插件
                    max: 255,
                    min: 0,
                    //设置微调按钮递增/递减事件
                    spin: function (event, ui) {
                        if (ui.value == 8)
                            spnPrev.style.backgroundColor = "red";
                        else
                            spnPrev.style.backgroundColor = "green";
                    },
                    //设置微调按钮值改变事件
                    change: function (event, ui) {
                        var intTmp = $(this).spinner("value");
                        if (intTmp < 0) $(this).spinner("value", 0);
                        if (intTmp > 10) $(this).spinner("value", 10);
                        if (intTmp == 8)
                            spnPrev.style.backgroundColor = "red";
                        else
                            spnPrev.style.backgroundColor = "green";
                    }
                });
            });

+ 工具提示插件——tooltip
工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下：
$(selector).tooltip({options});
其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。
例如，将三个<a>元素与工具提示插件相绑定，当把鼠标移动在<a>元素内容时，以动画效果弹出对应的提示图片，移出时，图片自动隐藏
$(function () {
                $("input").tooltip({
                    show: {
                        effect: "slideDown",
                        delay: 350
                    },
                    hide: {
                        effect: "explode",
                        delay: 350
                    },
                    position: {
                        my: "left top",
                        at: "left bottom"
                    }
                });
            });

---------------------------------------------------------------------------------------------------------------------------------
第11章 jQuery 工具类函数

+ 获取浏览器的名称与版本信息
在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，还可以通过$.browser.version方式获取浏览器版本信息。
例如，调用$.browser对象，获取浏览器名称并显示在页面中
$(function () {
                var strTmp = "您的浏览器名称是：";
                if ($.browser.chrome) { //谷歌浏览器
                    strTmp += "Chrome";
                }
                if ($.browser.mozilla) { //火狐相关浏览器
                    strTmp += "Mozilla FireFox";
                }
                strTmp += "<br /><br /> 版本号是：" //获取版本号
                 strTmp += $.browser.version;
                $(".content").html(strTmp);
            });

+ 检测浏览器是否属于W3C盒子模型
浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型则包含，而在jQuery 中，可以通过$.support.boxModel对象返回的值，检测浏览器是否属于标准的w3c盒子模型。
例如，根据页面的特征，并通过$.support.boxModel属性的返回值，显示当前浏览器是否属于标准的w3c盒子模型
$(function () {
                var strTmp = "您打开的页面是：";
                if ($.support.boxModel) { //是W3C盒子模型
                    strTmp += "W3C盒子模型";
                }
                else { //是IE盒子模型
                    strTmp += "IE盒子模型";
                }
                $(".content").html(strTmp);
            });

+ 检测对象是否为空
在jQuery中，可以调用名为$.isEmptyObject的工具函数，检测一个对象的内容是否为空，如果为空，则该函数返回true，否则，返回false值，调用格式如下：
$.isEmptyObject(obj);
其中，参数obj表示需要检测的对象名称。
例如，通过$.isEmptyObject()函数，检测某个指定的对象是否为空
$(function () {
                var obj = { "姓名": "土豪一族" };
                var strTmp = "您定义了一个：";
                if ($.isEmptyObject(obj)) { //检测是否为空
                    strTmp += "空对象";
                }
                else {
                    strTmp += "非空对象";
                }
                $(".content").html(strTmp);
            });

+ 检测对象是否为原始对象
调用名为$.isPlainObject的工具函数，能检测对象是否为通过{}或new Object()关键字创建的原始对象，如果是，返回true，否则，返回false值，调用格式为：
$.isPlainObject (obj);
其中，参数obj表示需要检测的对象名称。
例如，通过$.isPlainObject()函数，检测某个指定的对象是否为原始，并将结果显示在页面中
$(function () {
                var obj = "null";
                var strTmp = "您定义了一个：";
                if ($.isPlainObject (obj)) { //检测是否为原始对象
                    strTmp += "原始对象";
                }
                else {
                    strTmp += "非原始对象";
                }
                $(".content").html(strTmp);
            });

+ 检测两个节点的包含关系
调用名为$.contains的工具函数，能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值，调用格式为：
$.contains (container, contained);
参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含。
例如，通过$.contains()函数，检测两个节点对象间是否存在包含关系，并将检测的结果显示在页面中

$(function () {
                var node_a = document.body.firstChild;
                var node_b = document.body;
                var strTmp = "对象node_a";
                if ($.contains (node_a, node_b)) { //检测是否包含节点
                    strTmp += " 包含 ";
                }
                else {
                    strTmp += " 不包含 ";
                }
                strTmp += "对象node_b";
                $(".content").html(strTmp);
            });

+ 字符串操作函数
调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为：
$.trim (str);
参数str表示需要删除左右两边空格符的字符串。
例如，通过$.trim()函数，除掉一个两边均有空格符的字符串，并将其执行前后的字符长度都显示在页面中
$(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "内容：";
                    var strOld = $("#txtName").val();
                    var strNew =$.trim (strOld);
                    strTmp += strOld;
                    strTmp += "<br/><br>除掉空格符前的长度："
                    strTmp += strOld.length;
                    strTmp += "<br/><br>除掉空格符后的长度："
                    strTmp += strNew.length;
                    $(".tip").show().append(strTmp);
                });
            });

+ URL操作函数
调用名为$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：
$. param (obj);
参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串。
例如，通过$.param()函数，对指定的对象进行序列化编码，使其成为可执行传值的URL地址，并将该地址显示在页面中
$(function () {
                //基本信息对象
                var objInfo = new Object();
                objInfo.name = "白富美";
                objInfo.sex = 1;
                //序列化对象
                var objNewInfo =$. param (objInfo);
                //显示序列化后的对象
                var strTmp = "<b>对象白富美序列化后</b>：<br/><br/>";
                strTmp += objNewInfo;
                //显示在页面中
                $(".tip").show().append(strTmp);
            });

+ 使用$.extend()扩展工具函数
调用名为$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，调用格式为：
$. extend ({options});
参数options表示自定义插件的函数内容。
例如，调用$.extend()函数，自定义一个用于返回两个数中最大值的插件，并在页面中将插件返回的最大值显示在页面中
(function ($) {
                $. extend ({
                    "MinNum": function (p1, p2) {
                        return (p1 > p2) ? p2 : p1;
                    }
                });
            })(jQuery);
            $(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "17与18中最小的数是：";
                    strTmp +=$.MinNum (17, 18);
                    //显示在页面中
                    $(".tip").show().append(strTmp);
                });
            });

+ 使用$.extend()扩展Object对象
除使用$.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者，调用格式为：
$. extend (obj1,obj2,…objN);
参数obj1至objN表示需要合并的各个原有对象。
例如，调用$.extend()函数对两个已有的对象进行合并，并将合并后的新对象元素内容显示在页面中
$(function () {
                var objInfo = { name: "" };
                var objMess = { name: "白富美,", title: "欢迎与我联系！" };
                var objNewInfo =$. extend (objInfo,objMess);
                var strTmp = "<b>对象白富美合并后</b>：<br/><br/>";
                strTmp += objNewInfo.name + objInfo.title;
                //显示在页面中
                $(".tip").show().append(strTmp);
            });