jQuery

读书笔记

---

jQuery动画特效

1.调用show()和hide()方法显示和隐藏元素

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

2.动画效果的hide()和show()

Exam:以动画的方式显示或隐藏页面中的图片，同时，当显示或隐藏完成时，对应的按钮状态将变为不可用.
$(function(){
    $("#btnshow").bind("click",function(){
        $("img").show(3000,function(){
            $("#btnshow").attr("disabled",true);
            $("#btnhide").attr("disabled",false);
        });
    });
    $("#btnhide").bind("click",function(){
        $("img").hide(5000,function(){
            $("#btnshow").attr("disabled",true);
            $("#btnhide").attr("disabled",fasle);
        });
    });
});

3.调用toggle()方法实现动画切换效果

调用toggle()方法就可以很容易做到，即如果元素处于显示状态，调用该方法则隐藏该元素，反之，则显示该元素，它的调用格式是：
$(selector).toggle(speed,[callback])
其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。
Exam:调用toggle()方法以动画的效果显示和隐藏图片元素
$(function(){
    $("#btn").bind("click",function(){
        var $this = $(this);
        $("img").toggle(5000,function(){
            $this.val()=="隐藏"?$this.val("显示"):$this.val("隐藏");
        });
    });
});

4.使用slideUp()和slideDown()方法的滑动效果

使用slideUp()和slideDown()方法的滑动效果，可以使用slideUp()和slideDown()方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素，它们的调用方法分别为：
$(selector).slideUp(speed,[callback])
$(selector).slideDown(speed,[callback])
其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。滑动与淡入淡出的区别：滑动改变元素的高度，淡入淡出改变元素的透明度。
Exam：调用slideUp()和slideDown()方法实现页面中元素的向上和向下的滑动效果。
$(function(){
    $div = $("showPic");
    $("#btn").bind("click",function(){
        var $this = $(this);
        if($this.val() == "向上滑"){
            $div.slideUp(3000,function(){
                $this.val("向下滑");
            });
        }else{
            $div.slideDown(4000,function(){
                $this.val("向下滑");
            });
        }
    });
});

5.使用slideToggle()方法实现图片“变脸”效果

使用slideToggle()方法可以切换slideUp()和slideDown()，即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为：
$(selector).slideToggle(speed,[callback])
Exam:使用slideToggle()方法实现图片的变脸。
$(function(){
    var div1 = $("div1");
    var div2 = $("div2");
    div1.bind("click",function(){
        div1.slideToggle("slow",function(){
            div2.slideToggle("fast");
        });
    });

    div2.bind("click",function(){
        div2.slideToggle("slow",function(){
            div1.slideToggle("fast");
        });
    });
});

6.使用fadeIn()与fadeOut()方法实现淡入淡出效果

fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素，它们的调用格式分别为：
$(selector).fadeIn(speed,[callback])
$(selector).fadeOut(speed,[callback])
其中参数speed为淡入淡出的速度，callback参数为完成后执行的回调函数名。
Exam:
$(function(){
    var div1 = $("div1");
    var div2 = $("div2");
    div1.bind("click",function(){
        div1.fadeOut("slow",function(){
            div2.fadeIn("slow");
        });
    });
    div2.bind("click",function(){
        div2.fadeOut("slow",function(){
            div1.fadeIn("slow");
        });
    });
});

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

8.调用animate()方法制作简单的动画效果

调用animate()方法可以创建自定义动画效果，它的调用格式为：
$(selector).animate({params},speed,[callback])
其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。
Exam:
$(function(){
    $("img").animate({
                width: "300px",
                height: "450px"
            },"slow",function(){
                $("#tip").html("放大完成！");
        }
    );
});

9.调用animate()方法制作移动位置的动画

调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。
Exam:
 $(function(){
    $("img").animate({
                width: "300px",
                height: "450px"
            },"slow",function(){
                $("#tip").html("放大完成！");
        }
    );
});

10.调用stop()方法停止当前所有动画效果

stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为：
$(selector).stop([clearQueue],[goToEnd])
其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false.
Exam:
$(function(){
    $("img").animate({
        left: "+=500px"
    },"slow",function(){
        $(this).animate({
            width: '+=100px',
            height: '+=100px'
        },"slow",function(){
          $("#tip").html("动画完成！");
        });
    });

    $("button").bind("click",function(){
        $("img").stop();
        $("#tip").html("停止了动画");
    });
});

11.调用delay()方法延时执行动画效果

delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：
$(selector).delay(duration)
其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。
$("button").bind("click",function(){
    $("img").delay(3000);
    $("#tip").html("正在延迟!");
});

jQuery实现Ajax应用

1.load()异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：load(url,[data],[callback])参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

2.getJSON()异步加载json数据

使用getJSON()方法异步加载JSON格式数据，使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：
    jQuery.getJSON(url,[data],[callback])
    $.getJSON(url,[data],[callback])
其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
$(function(){
    var id = 1;
    var status = 1;
    $("#jiazai").bind("click",function(){
        $.getJSON("http://localhost/myE/jQuery/server.php?id=1&status=1",function(json){
            $.each(json,function(index,l){
                $("#show").append("<li>"+l.name+"</li>");
                $("#jiazai").attr("disabled",true);
            });
        });
    });
});
//server.php
<?php
header("Content-type:text/html;charset=utf8");

if($_GET['id']==1 && $_GET['status']==1) {
$json = array(
    array('id' => 2, 'name' => 'ajax'),
    array('id' => 3, 'name' => 'jemi'),
    array('id' => 4, 'name' => 'lanrain'),
);

echo json_encode($json);
}else{
    echo json_encode(array('name'=>'参数非法！'));
}

3.使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：
jQuery.getScript(url,[callback])
$.getScript(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

4.使用get()方法以GET方式从服务器获取数据

使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：
$.get(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
Exam:(注意后面的第三个参数规定了你用何种格式进行数据的传输)
$(function(){
    $("#jiazai").bind("click",function(){
        var $this=$(this);
        $.get("http://localhost/myE/jQuery/serverGet.php",function(json){
            $this.attr("disabled",true);
            $.each(json,function(index,one){
                $("ul").append("<li>我是"+one.name+"<br>他们经常对我说："+one.word+"</li>");
            });
        },'json');
    });
});

5.使用post()方法以POST方式从服务器发送数据

与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：
$.post(url,[data],[callback])
参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。
$(function(){
    $("#checkBtn").bind("click",function(){
        $.post("http://localhost/myE/jQuery/serverPost.php",{num:$("#num").val()},function(data){
            $("ul").append("<li>你输入的<b>"+$("#num").val()+"</b>是<b>"+data+"</b></li>");
        });
    });
});
//serverPost.php
<?php
    $num = $_POST['num'];
    if($num%2==0){
        echo "是偶数";
    }else{
        echo "是奇数";
    }
?>

6.使用serialize()方法序列化表单元素值

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

7.使用ajax()方法加载服务器数据

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：
    jQuery.ajax([settings])
    $.ajax([settings])
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。
$.ajax(
    url: myurl,
    data: {num:$("#number").val()},
    type: "post",
    success:function(){},
    error:function(){}
);

8.使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

jQuery常用插件

1.表单验证插件validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：
$(form).validate({options})
其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。Exam:
$(function(){
    $("#form1").validate(
        {
            /*自定义规则*/
            rules:{
                email:{
                    required:true,
                    email:true
                }
            }
            /*错误提示位置*/
            errorPlacement:function(error,element){
                error.appendTo(".tip");
            }
        }
    );
});

2.表单插件form

通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：
    $(form). ajaxForm ({options})
    其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。
    Exam：
    $(function(){
        var options={
            url:"http://www.imooc.com/data/form_f.php",
            target: ".tip"
        };
        $("#form1").ajaxForm(options);
    });

3.图片灯箱插件lightBox