标签： 我的笔记

JQuery中的动画

显隐 show、hide

$("div").hide(); //隐藏所有DIV元素，相当于sytle=”display:none”
$("div").show(); //显示所有DIV元素

加特效 duang

$("div").hide(1000);//一秒内隐藏

slow() 600毫秒， normal() 400毫秒， fast() 200毫秒

透明度 fadeIn、fadeOut

$("div").fadeOut(); //变透明，直至消失（支持速度参数）
$("div").fadeIn(); //变清晰

收缩 slideUp、slideDown

$("div").slideUp(); //向上收缩，直至消失（支持速度参数）
$("div").slideDown(); //向下

自定义动画animate

$(elem).animate(params, speed, callback);

• params：样式属性及值的映射 {property1:"value", property2:"value"}
• speed: 速度参数
• callback: 动画完成后执行函数，可选

即：用speed毫秒将elem的样式改为params的值。

$("#myDiv").animate({left:"500px"}, 2000); //两秒内将元素的left属性改为500px
$("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加、累减
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上，多重动画，同时执行

多个animate可以形成动作队列。

停止动画

$("#myDiv").stop([cleanQuene] [,gotoEnd]); 

判断元素是否在执行动画

$("#myDiv").is(":animate"); 

其它动画

$("#myDiv").toggle(); //显示与隐藏元素
$("#myDiv").slideToggle(); //展开与收缩元素
$("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%

jQuery操作表单、表格

表单应用

单行文本框

$(":input").focus(function() { // 获得焦点时
    $(this).addClass("focus");
    if ($(this).val() == this.defaultValue) {
        $(this).val("");
    }
}).blur(function() {  // 失去焦点时
    $(this).removeClass("focus");
    if ($(this).val() == '') {
        $(this).val(this.defaultValue);
    }
});

多行文本框

1、放大、缩小多行文本框的高度

var $txt = $(“#textArea”);
$(“.bigger”).click(function(){
    if( $txt.height() < 500) 
        $txt.height( $txt.height() + 50 );
});

复选框 （实现全选、全不选、反选）

//全选
$(“#btnCheckedAll”).click(function(){ 
    $(“[name=items]:checkbox”).attr(“checked”, true);
});
//全不选
$(“#btnCheckedNone”).click(function(){ 
    $(“[name=items]:checkbox”).attr(“checked”, false);
});
//反选
$(“#btnCheckedRev”).click(function(){ 
    $(“[name=items]:checkbox”).each(function(){
        $(this).attr(“checked”, !$(this).attr(“checked”));
        //this.checked = !this.checked; //这里用js更简单
    }
});
//输出值
$("#btnCheckedRev").click(function(){
    var str="你选中的是：\r\n";
    $('[name=items]:checkbox:checked').each(function(){
        str+=$(this).val()+"\r\n";
    })
    alert(str);
});

下拉框

将一个下拉列表的选中项搬至另一个下拉列表

//将选中选项搬过去
$(“#btnAdd”).click(function(){ 
    $(“#mySelect1 option:selected”).appendTo(“#mySelect2″);
});
//将全部选项搬过去
$(“#btnAddAll”).click(function(){ 
    $(“#mySelect1 option”).appendTo(“#mySelect2″);
});
//双击项搬过去
$(“#mySelect1″).dblclick(function()[ 
    $("#mySelect1 option:selected").appendTo("#mySelect2");
}

表单验证

<form>
    <div>
        <label>用户名：</label>
        <input type="text" id="txtUid" value="" />
    </div>
</form>

//往每个class有required样式的input元素后面添加*号
$("form :input.required").each(function(){ 
    $(this).parent().append( $("<span class='star'>*</span>") );
});

//失去焦点时验证域
$("form :input.required").blur(function(){ 
    if( this.value == "" ){
        $(this).parent().append( $("<span class='error'>必填字段</span>") );
    }
    else{
        $(this).parent().append( $("<span class='success'>验证正确</span>") );
        $(this).parent().find(".error").remove();
    }
}).keyup(function(){ //用户每点一个键触发
    $(this).triggerHandler("blur");
}).focus(function(){ //控制有焦点时触发
    $(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
    $("form :input.required").trigger("blur"); 
    //让所有需要验证的域失去焦点
    var errNum = $("form .error").length;
    if( errNum ){
        alert("有验证字段失败，请重新填写");
        return false;
    }
});

表格应用

$("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式
$("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式

$("tr:contains('王五')").addClass("highlightTr"); //查找包含”王五”的行，添加highlightTr样式

$("tr").click(function(){
    $(this).addClass("selectedTr") //给当前行添加选中样式
    .siblings().removeClass("selectedTr") //反选移除选中样式
    .end() //结束，返回$(this)，否则则是反选的行
    .find(':radio").attr("checked",true); //在当前行查找单选框，选中它
});

jQuery与Ajax

加载数据：$(selector).load()

$(selector).load( url [,data] [,callback] )方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数

1、 载入HTML文档
$(“#myDiv”).load(“hello.html”); //向myDiv元素加载hello.html的内容

2、 筛选载入的HTML文档 
$(“#myDiv”).load(“hello.html .myClass”); //筛选，只加载hello.html中myClass样式的内容

3、 传递方式 
load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST方式。 

$(“#myDiv”).load(“hello.html”, function(){
    //...
} );//无参数是GET
$(“#myDiv”).load(“hello.html”, {id:’123′, name:’dier’}, function(){
    //...
} ); //有参数是POST 

4、 回调参数
$(“#myDiv”).load(“hello.html”, function(responseText, textStatus, XMLHttpRequest){ 
    //responseText : 请求返回的内容
    //textStatus : 请求状态 success error notmodified timeout
    //XMLHttpRequest : Ajax对象
});

请求数据：$.get()，$.post()

$.get( url [,data] [,callback] [,type])
$.post( url [,data] [,callback] [,type])

url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数
type：指定服务器返回内容的格式 xml html script json text _default

$.get( “test.aspx”, {id:”123″, name:”dier”}, function(data,textStatus){ 
    //回调函数只有当状态是success才触发
    //data : 请求返回的内容
    //textStatus : 请求状态 success error notmodified timeout

    //1、当data是HTML时，直接加载
    $(“#myDiv”).html(data);

    //2、当data是XML时，可筛选 <user id=”123″ name=”dier” age=”27″ />
    var age = $(data).find(“user”).attr(“age”);

    //3、当data是JSON时，可直接点出属性来 {id:”123″, name:”dier”, age:”27″}
    var age = data.age;
});

脚本载入：$.getScript()

$.getScript(url [,callback])方法

//1、动态加载JS脚本
$.getScript(“test.js”);
    
//2、动态加载JS脚本，并使用回调函数
$.getScript(“test.js”, function(){ 
    //do something..
});

getScript()函数可以远程载入js脚本并且执行。（JSONP）。

请求JSON数据：$.getJSON()

$.getJSON(url [,callback])方法

它是设置了JSON参数的 ajax()函数的一个简化版本。也是可以跨域使用的。

$(function(){ 

    //1、动态加载JS脚本
    $.getJSON(“test.js”);

    2、动态加载JS脚本，并使用回调函数
    $.getJSON(“test.js”, function(data){ 
        //do something..
        $.each( data, function(index, item){
            //遍历，相当于foreach
            //index : 索引
            //item : 当前项内容
            //return false; 退出循环
        });
    });
});

请求数据：$.ajax(options)方法

最复杂的请求数据方法ajax。

url : 请求的地址
type : 请求的方式 GET POST 默认为GET
timeout : 请求超时时间(单位：毫秒）
data : 请求时发送的参数（String,Object）
dataType : 预期返回的数据类型 xml html script json jsonp text
bdforeSend : 发送请求前触发事件，如果return false则取消发送 function(XmlHttpRequest){}
complete : 请求完成后触发事件，不管成功与否 function(XmlHttpRequest, textStatus){}
success : 请求完成并且成功时触发事件 function(data, textStatus){}
error : 请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}
global : 是否为全局请求，默认为true，可使用AjaxStart、AjaxStop控制各种事件

$.ajax({
    url : “test.aspx”,
    type : “POST”,
    timeout : “3000″,
    data : {id:”123″, name:”dier”},
    dataType : “HTML”,
    success : function(data,textStatus){
        $(“#myDiv”).html( data );
    }
    error : function(XmlHttpRequest, textStatus, errThrown){
        $(“#myDiv”).html( “请求失败：” + errThrown );
    }
});

序列化元素

序列化字符串 serialize()

//将form1整个表单中的所有域序列化成提交的参数，支持自动编码
//比如：`name=abc&age=18`
$.get( “test.aspx”, $(“#form1″).serialize(), function(data,textStatus){
    //。。。
});

序列化数组 serializeArray()

//将所有checkbox和radio选中的内容序列化
//比如：`mycheck=1&mycheck=4&myradio=1`
var arr = $(“:checkbox, :radio”).serializeArray();

对象序列化 param()

var obj = {id:”123″, name:”dier”, age:”27″};
var kv = $.param(obj); //id=123&name=dier&age=27

JQuery中的全局Ajax事件

ajaxStart(callback) //请求开始时触发
ajaxStop(callback) //请求结束时触发
ajaxComplete(callback) //请求完成时触发
ajaxSuccess(callback) //请求成功时触发
ajaxError(callback) //请求失败时触发
ajaxSend(callback) //请求发送前触发

$(“#loading”).ajaxStart(function(){
    //当有AJAX请求时显示，完成时隐藏
    $(this).show();
}.ajaxStop(function(){
    $(this).hide();
});

jQuery插件