標(biāo)簽： 我的筆記

JQuery中的動畫

顯隱 show择镇、hide

$("div").hide(); //隱藏所有DIV元素溃蔫，相當(dāng)于sytle=”display:none”
$("div").show(); //顯示所有DIV元素

加特效 duang

$("div").hide(1000);//一秒內(nèi)隱藏

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

透明度 fadeIn扔罪、fadeOut

$("div").fadeOut(); //變透明搁嗓，直至消失（支持速度參數(shù)）
$("div").fadeIn(); //變清晰

收縮 slideUp贬丛、slideDown

$("div").slideUp(); //向上收縮扇救，直至消失（支持速度參數(shù)）
$("div").slideDown(); //向下

自定義動畫animate

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

• params：樣式屬性及值的映射 {property1:"value", property2:"value"}
• speed: 速度參數(shù)
• callback: 動畫完成后執(zhí)行函數(shù)志珍，可選

即：用speed毫秒將elem的樣式改為params的值橙垢。

$("#myDiv").animate({left:"500px"}, 2000); //兩秒內(nèi)將元素的left屬性改為500px
$("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加伦糯、累減
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上柜某，多重動畫，同時執(zhí)行

多個animate可以形成動作隊列敛纲。

停止動畫

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

判斷元素是否在執(zhí)行動畫

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

其它動畫

$("#myDiv").toggle(); //顯示與隱藏元素
$("#myDiv").slideToggle(); //展開與收縮元素
$("#myDiv").fadeTo(1000, 0.2); //一秒內(nèi)將元素透明度調(diào)整到20%

jQuery操作表單喂击、表格

表單應(yīng)用

單行文本框

$(":input").focus(function() { // 獲得焦點(diǎn)時
    $(this).addClass("focus");
    if ($(this).val() == this.defaultValue) {
        $(this).val("");
    }
}).blur(function() {  // 失去焦點(diǎn)時
    $(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 );
});

復(fù)選框 （實現(xiàn)全選翰绊、全不選、反選）

//全選
$(“#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>") );
});

//失去焦點(diǎn)時驗證域
$("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(){ //用戶每點(diǎn)一個鍵觸發(fā)
    $(this).triggerHandler("blur");
}).focus(function(){ //控制有焦點(diǎn)時觸發(fā)
    $(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
    $("form :input.required").trigger("blur"); 
    //讓所有需要驗證的域失去焦點(diǎn)
    var errNum = $("form .error").length;
    if( errNum ){
        alert("有驗證字段失敗旁壮，請重新填寫");
        return false;
    }
});

表格應(yīng)用

$("tr:odd").addClass("oddTr"); //給奇數(shù)行添加oddTr樣式
$("tr:even").addClass("evenTr"); //給偶數(shù)行添加evenTr樣式

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

$("tr").click(function(){
    $(this).addClass("selectedTr") //給當(dāng)前行添加選中樣式
    .siblings().removeClass("selectedTr") //反選移除選中樣式
    .end() //結(jié)束，返回$(this)抡谐，否則則是反選的行
    .find(':radio").attr("checked",true); //在當(dāng)前行查找單選框裁奇，選中它
});

jQuery與Ajax

加載數(shù)據(jù)：$(selector).load()

$(selector).load( url [,data] [,callback] )方法
url：要請求的頁面的地址
data：要發(fā)送的相關(guān)參數(shù)
callback：回調(diào)函數(shù)

1、 載入HTML文檔
$(“#myDiv”).load(“hello.html”); //向myDiv元素加載hello.html的內(nèi)容

2麦撵、 篩選載入的HTML文檔 
$(“#myDiv”).load(“hello.html .myClass”); //篩選框喳，只加載hello.html中myClass樣式的內(nèi)容

3课幕、 傳遞方式 
load()方法的傳遞方式根據(jù)參數(shù)data來自動指定。如果沒有參數(shù)傳遞五垮，則采用GET方式傳遞乍惊；反之，則自動轉(zhuǎn)換為POST方式放仗。 

$(“#myDiv”).load(“hello.html”, function(){
    //...
} );//無參數(shù)是GET
$(“#myDiv”).load(“hello.html”, {id:’123′, name:’dier’}, function(){
    //...
} ); //有參數(shù)是POST 

4润绎、 回調(diào)參數(shù)
$(“#myDiv”).load(“hello.html”, function(responseText, textStatus, XMLHttpRequest){ 
    //responseText : 請求返回的內(nèi)容
    //textStatus : 請求狀態(tài) success error notmodified timeout
    //XMLHttpRequest : Ajax對象
});

請求數(shù)據(jù)：$.get()，$.post()

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

url：要請求的頁面的地址
data：要發(fā)送的相關(guān)參數(shù)
callback：回調(diào)函數(shù)
type：指定服務(wù)器返回內(nèi)容的格式 xml html script json text _default

$.get( “test.aspx”, {id:”123″, name:”dier”}, function(data,textStatus){ 
    //回調(diào)函數(shù)只有當(dāng)狀態(tài)是success才觸發(fā)
    //data : 請求返回的內(nèi)容
    //textStatus : 請求狀態(tài) success error notmodified timeout

    //1诞挨、當(dāng)data是HTML時莉撇，直接加載
    $(“#myDiv”).html(data);

    //2、當(dāng)data是XML時惶傻，可篩選 <user id=”123″ name=”dier” age=”27″ />
    var age = $(data).find(“user”).attr(“age”);

    //3棍郎、當(dāng)data是JSON時，可直接點(diǎn)出屬性來 {id:”123″, name:”dier”, age:”27″}
    var age = data.age;
});

腳本載入：$.getScript()

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

//1银室、動態(tài)加載JS腳本
$.getScript(“test.js”);
    
//2涂佃、動態(tài)加載JS腳本，并使用回調(diào)函數(shù)
$.getScript(“test.js”, function(){ 
    //do something..
});

getScript()函數(shù)可以遠(yuǎn)程載入js腳本并且執(zhí)行蜈敢。（JSONP）辜荠。

請求JSON數(shù)據(jù)：$.getJSON()

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

它是設(shè)置了JSON參數(shù)的 ajax()函數(shù)的一個簡化版本。也是可以跨域使用的抓狭。

$(function(){ 

    //1伯病、動態(tài)加載JS腳本
    $.getJSON(“test.js”);

    2、動態(tài)加載JS腳本否过，并使用回調(diào)函數(shù)
    $.getJSON(“test.js”, function(data){ 
        //do something..
        $.each( data, function(index, item){
            //遍歷午笛，相當(dāng)于foreach
            //index : 索引
            //item : 當(dāng)前項內(nèi)容
            //return false; 退出循環(huán)
        });
    });
});

請求數(shù)據(jù)：$.ajax(options)方法

最復(fù)雜的請求數(shù)據(jù)方法ajax。

url : 請求的地址
type : 請求的方式 GET POST 默認(rèn)為GET
timeout : 請求超時時間(單位：毫秒）
data : 請求時發(fā)送的參數(shù)（String,Object）
dataType : 預(yù)期返回的數(shù)據(jù)類型 xml html script json jsonp text
bdforeSend : 發(fā)送請求前觸發(fā)事件苗桂，如果return false則取消發(fā)送 function(XmlHttpRequest){}
complete : 請求完成后觸發(fā)事件季研，不管成功與否 function(XmlHttpRequest, textStatus){}
success : 請求完成并且成功時觸發(fā)事件 function(data, textStatus){}
error : 請求完成并且失敗時觸發(fā)事件 function(XmlHttpRequest, textStatus, errorThrown){}
global : 是否為全局請求，默認(rèn)為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整個表單中的所有域序列化成提交的參數(shù)持偏，支持自動編碼
//比如：`name=abc&age=18`
$.get( “test.aspx”, $(“#form1″).serialize(), function(data,textStatus){
    //驼卖。。鸿秆。
});

序列化數(shù)組 serializeArray()

//將所有checkbox和radio選中的內(nèi)容序列化
//比如：`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) //請求開始時觸發(fā)
ajaxStop(callback) //請求結(jié)束時觸發(fā)
ajaxComplete(callback) //請求完成時觸發(fā)
ajaxSuccess(callback) //請求成功時觸發(fā)
ajaxError(callback) //請求失敗時觸發(fā)
ajaxSend(callback) //請求發(fā)送前觸發(fā)

$(“#loading”).ajaxStart(function(){
    //當(dāng)有AJAX請求時顯示酌畜，完成時隱藏
    $(this).show();
}.ajaxStop(function(){
    $(this).hide();
});

jQuery插件