knight_black_bob 阅读(247) 评论(0)

jquery 入门学习 

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


第1章 初识jQuery
第2章 jQuery 基础选择器
第3章 jQuery过滤性选择器
第4章 jQuery表单选择器
第5章 jQuery 操作DOM元素
第6章 jQuery 事件与应用
第7章 jQuery 动画特效
第8章 jQuery 实现Ajax应用
第9章 jQuery 常用插件
第10章 jQuery UI型插件
第11章 jQuery 工具类函数


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

 

 

 

 

---------------------------------------------------------------------------------------------------------------------------------
第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);
            });

 

 

 

 

 --------------未完 待续-------------------------------------------------------------------------------------------------------