// 鋒利的JQuery 學(xué)習(xí)筆記
// dier
// 2009-10-17 至 2009-11-22


//------------------------- 第一章 認(rèn)識(shí)JQuery -------------------------


·頁(yè)面加載事件（可以寫多個(gè)ready()）
$(document).ready(function(){
? ? alert("hello world");
})


·鏈?zhǔn)讲僮?#xff1a;JQuery允許你在一句代碼中操做任何與其相關(guān)聯(lián)的元素，包括其子元素、父元素等
//選擇名稱為myDiv的元素，為其自身添加css1的樣式，然后再選擇其所有子元素a，為其移除css2樣式
$("#myDiv").addClass("css1").children("a").removeClass("css2");


·JQuery中獲得一個(gè)對(duì)象的所有子元素內(nèi)容
$("#myDiv").html()


·JQuery中的變量 與 DOM中的變量
var $myVar = "";
var myVar = "";


·DOM對(duì)象 轉(zhuǎn)換成 JQuery對(duì)象
var obj = documnet.getElementById("myDiv");
var $obj = $(obj);


·JQuery對(duì)象 轉(zhuǎn)換成 DOM對(duì)象
var $obj = $("#myDiv");
var obj = $obj.get(0); ?//或者var obj = $obj[0];


·釋放JQuery對(duì)$符號(hào)的控制權(quán)
JQuery.noConflict();




//---------------------------- 第二章 JQuery選擇器 -------------------------------


·JQuery完善的處理機(jī)制
document.getElementById("test").style.color = "red"; //如果test不存在，則頁(yè)面出現(xiàn)異常
$("#test").css("color","red"); //哪怕頁(yè)面沒有名稱為test的元素，也不會(huì)報(bào)錯(cuò)。它是一個(gè)JQuery對(duì)象


·判斷頁(yè)面是否選擇的對(duì)象
if( $(".class").length > 0 ){
? ? // todo something
}


·基本選擇器
$("#myDiv") ? ?//根據(jù)給定的ID選擇匹配的元素，返回：單個(gè)元素
$(".myClass") //根據(jù)給定的樣式名稱選擇匹配的元素，返回：集合元素
$("div") //根據(jù)給定的元素名稱選擇匹配的元素，返回：集合元素
$("#myDiv,div.myClass,span") //根據(jù)給定的規(guī)則選擇匹配的元素，返回：集合元素
$("*") //選擇頁(yè)面所有元素，返回：集合元素


·層次選擇器
$("div span") //選擇所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素
$("div>span") //選擇所有DIV元素下的SPAN子元素（僅子元素），返回：集合元素
$(".myClass+div") //選擇樣式名稱為myClass的下一個(gè)DIV元素，返回：集合元素
$(".myClass+div") //等價(jià)于 $(".myClass").next("div");
$(".myClass~div") //選擇樣式名稱為myClass之后的所有DIV元素，返回：集合元素
$(".myClass~div") //等價(jià)于 $(".myClass").nextAll();
$(".myClass").siblings("div") //選擇樣式名稱為myClass的元素的所有同輩DIV元素（無(wú)論前后），返回集合元素


·過濾選擇器（index從0開始）
$("div:first") //選擇所有DIV元素下的第一個(gè)DIV元素，返回：單個(gè)元素
$("div:last") //選擇所有DIV元素下的最后一個(gè)DIV元素，返回：單個(gè)元素
$("div:not(.myClass)") //選擇所有樣式不包括myClass的DIV元素，返回：集合元素
$("div:even") //選擇所有索引是偶數(shù)的DIV元素，返回：集合元素
$("div:odd") //選擇所有索引是奇數(shù)的DIV元素，返回：集合元素
$("div:eq(index)") //選擇所有索引等于index的DIV元素，返回：集合元素
$("div:gt(index)") //選擇所有索引大于index的DIV元素，返回：集合元素
$("div:lt(index)") //選擇所有索引小于index的DIV元素，返回：集合元素
$(":header") //選擇所有標(biāo)題元素（h1,h2,h3），返回：集合元素
$("div:animated") //選擇所有正在執(zhí)行去畫的DIV元素，返回：集合元素


·子元素過濾選擇器（index從1開始）
$(":nth-child(index/even/odd)") //選擇每個(gè)父元素下的第index/偶數(shù)/奇數(shù)個(gè)子元素，返回：集合元素
$(":first-child") //選擇每個(gè)父元素下的第一個(gè)子元素，返回：集合元素
$(":last-child") //選擇每個(gè)父元素下的最后一個(gè)子元素，返回：集合元素
$("ul li:only-child") //在UL元素中選擇只有一個(gè)LI元素的子元素，返回：集合元素


·內(nèi)容過濾選擇器
$(":contains(text)") //選擇所有內(nèi)容包含text的元素，返回：集合元素
$("div:empty") //選擇所有內(nèi)容為空的DIV元素，返回：集合元素
$("div:has(span)") //選擇所有含有SPAN子元素的DIV元素，返回：集合元素
$("div:parent") //選擇所有含有子元素的DIV元素，返回：集合元素


·可見性選擇器
$(":hidden") //選擇所有不可見的元素（type="hidden" style="display:none" style="visibility:none"），返回：集合元素
$(":visible") //選擇所有可見的元素，返回：集合元素


·屬性過濾選擇器
$("[id]") //選擇所有含有id屬性的元素，返回：集合元素
$("[class=myClass]") //選擇所有class屬性值是myClass的元素，返回：集合元素
$("[class!=myClass]") //選擇所有class屬性值不是myClass的元素，返回：集合元素
$("[alt^=begin]") //選擇所有alt屬性值以begin開始的元素，返回：集合元素
$("[alt^=end]") //選擇所有alt屬性值以end結(jié)束的元素，返回：集合元素
$("[alt*=some]") //選擇所有alt屬性值含有some的元素，返回：集合元素
$("div[id][class=myClass]") //選擇所有含有id屬性的并且class屬性值是myClass的元素，返回：集合元素


·表單對(duì)象屬性選擇器
$("#myForm:enabled") //選擇ID屬性為myForm的表單的所有可用元素，返回：集合元素
$("#myForm:disabled") //選擇ID屬性為myForm的表單的所有不可用元素，返回：集合元素
$("#myForm:checked") //選擇ID屬性為myForm的表單的所有所有被選中的元素，返回：集合元素
$("#myForm:selected") //選擇ID屬性為myForm的表單的所有所有被選中的元素，返回：集合元素


·表單選擇器
$(":input") //選擇所有<input> <select> <button> <textarea>元素，返回：集合元素
$(":text") //選擇所有單行文本框元素，返回：集合元素
$(":password") //選擇所有密碼框元素，返回：集合元素
$(":radio") //選擇所有單選框元素，返回：集合元素
$(":checkbox") //選擇所有復(fù)選框元素，返回：集合元素
$(":submit") //選擇所有提交按鈕元素，返回：集合元素
$(":image") //選擇所有圖片按鈕元素，返回：集合元素
$(":reset") //選擇所有重置按鈕元素，返回：集合元素
$(":button") //選擇所有按鈕元素，返回：集合元素
$(":file") //選擇所有上傳域元素，返回：集合元素
$(":hidden") //選擇所有不可見域元素，返回：集合元素
$(":text") //選擇所有單選文本框元素，返回：集合元素




//---------------------------- 第三章 JQuery中的DOM操作 -------------------------------


·查找元素節(jié)點(diǎn)
var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>
alert(str); //結(jié)果：123


·查找屬性節(jié)點(diǎn)
var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>
alert(str); //結(jié)果：hello


·創(chuàng)建元素節(jié)點(diǎn)
var $li1 = $("<span></span>"); //傳入元素標(biāo)記，自動(dòng)包裝并創(chuàng)建第一個(gè)li元素對(duì)象
var $li2 = $("<span></span>"); //第二個(gè),創(chuàng)建時(shí)需要遵循XHTML規(guī)則（閉合、小寫）
$("#myDiv").append($li1); //往id為myDiv的元素中添加一個(gè)元素
$("#myDiv").append($li2); //結(jié)果：<div id="myDiv"><span></span><span></span></div>


$("#myDIv").append($li1).append($li2); //客串：傳說中的鏈?zhǔn)綄懛?#xff0c;省一行代碼 ^_^


·創(chuàng)建文本節(jié)點(diǎn)
var $li1 = $("<span>first</span>");
var $li2 = $("<span>second</span>");
$("#myDIv").append($li1).append($li2);
//結(jié)果：<div id="myDiv"><span>first</span><span>second</span></div>


·創(chuàng)建屬性節(jié)點(diǎn)
var $li1 = $("<span title="111">first</span>");
var $li2 = $("<span title="222">second</span>");
$("#myDIv").append($li1).append($li2);?
//結(jié)果：<div id="myDiv"><span title="111">first</span><span title="222">second</span></div>


·插入節(jié)點(diǎn)
$("#myDiv").append("<span></span>"); //往id為myDiv的元素插入span元素
$("<span></span>").appendTo("#myDiv"); //倒過來(lái)，將span元素插入到id為myDiv的元素


$("#myDiv").prepend("<span></span>"); //往id為myDiv的元素內(nèi)最前面插入span元素
$("<span></span>").prependTo("#myDiv"); //倒過來(lái)，將span元素插入到id為myDiv的元素內(nèi)的最前面


$("#myDiv").after("<span></span>"); //往id為myDiv的元素后面插入span元素（同級(jí)，不是子元素）
$("<span></span>").insertAfter("#myDiv"); //倒過來(lái)，將span元素插入到id為myDiv的元素后面（同級(jí)，不是子元素）


$("#myDiv").before("<span></span>"); //往id為myDiv的元素前面插入span元素（同級(jí)，不是子元素）
$("<span></span>").insertBefore("#myDiv"); //倒過來(lái)，將span元素插入到id為myDiv的元素前面（同級(jí)，不是子元素）


·刪除節(jié)點(diǎn)
$("#myDiv").remove(); //將id為myDiv的元素移除


·清空節(jié)點(diǎn)
$("#myDiv").remove("span"); //將id為myDiv的元素內(nèi)的所有span元素移除


·復(fù)制節(jié)點(diǎn)
$("#myDiv span").click( function(){ //點(diǎn)擊id為myDiv的元素內(nèi)的span元素，觸發(fā)click事件
? ? $(this).clone().appendTo("#myDiv"); //將span元素克隆，然后再添加到id為myDiv的元素內(nèi)
? ? $(this).clone(true).appendTo("#myDiv"); //如果clone傳入true參數(shù)，表示同時(shí)復(fù)制事件
})


·替換節(jié)點(diǎn)
$("p").replaceWith("<strong>您好</strong>"); //將所有p元素替換成后者 <p>您好</p> --> <strong>您好</strong>
$("<strong>您好</strong>").replaceAll("p"); //倒過來(lái)寫，同上


·包裹節(jié)點(diǎn)
$("strong").wrap("<b></b>"); //用b元素把所有strong元素單獨(dú)包裹起來(lái) <b><strong>您好</strong></b><b><strong>您好</strong></b>
$("strong").wrapAll("<b></b>"); //用b元素把所有strong元素全部包裹起來(lái) <b><strong>您好</strong><strong>您好</strong></b>
$("strong").wrapInner("<b></b>"); //把b元素包裹在strong元素內(nèi) <strong><b>您好</b></strong>


·屬性操作
var txt = $("#myDiv").arrt("title"); //獲取id為myDiv的元素的title屬性
$("#myDiv").attr("title","我是標(biāo)題內(nèi)容"); //設(shè)置id為myDiv的元素的title屬性的值
$("#myDiv").attr({"title":"我是標(biāo)題內(nèi)容", "alt":"我還是標(biāo)題"); //一次性設(shè)置多個(gè)屬性的值
$("#myDiv").removeArrt("alt"); //移除id為myDiv的元素的title屬性


·樣式操作
var txt = $("#myDiv").arrt("class"); //獲取id為myDiv的元素的樣式
$("#myDiv").attr("class","myClass"); //設(shè)置id為myDiv的元素的樣式
$("#myDiv").addClass("other"); //在id為myDiv的元素中追加樣式
$("#myDiv").removeClass("other"); //在id為myDiv的元素中移除other樣式
$("#myDiv").removeClass("myClass other"); //在id為myDiv的元素中移除myClass和other多個(gè)樣式
$("#myDiv").removeClass(); //在id為myDiv的元素中移除所有樣式
$("#myDiv").toggleClass("other"); //切換樣式，在有other樣式和沒other樣式之間切換
$("#myDiv").hasClass("other"); //判斷是否有other樣式


·設(shè)置和獲取HTML、文本和值
alert( $("#myDiv").html() ); //獲取id為myDiv的元素的HTML代碼（相當(dāng)于innerHTML）
$("#myDiv").html("<span>hello</span>"); //設(shè)置id為myDiv的元素的HTML代碼


alert( $("#myDiv").text() ); //獲取id為myDiv的元素的HTML代碼（相當(dāng)于innerText）
$("#myDiv").text("hello"); //設(shè)置id為myDiv的元素的HTML代碼


alert( $("#myInput").val() ); //獲取id為myDiv的元素的value值（支持文本框、下拉框、單選框、復(fù)選框等）
$("#myInput").val("hello"); //設(shè)置id為myDiv的元素的value值（下拉框、單選框、復(fù)選框帶有選中效果）


·遍歷節(jié)點(diǎn)
var $cList = $("#myDiv").children(); //獲取id為myDiv的元素的子元素（只考慮子元素，不考慮后代元素）
var $sNext = $("#myDiv").next(); //獲取id為myDiv的元素的下一個(gè)同輩元素
var $sPrev = $("#myDiv").prev(); //獲取id為myDiv的元素的上一個(gè)同輩元素
var $sSibl = $("#myDiv").siblings(); //獲取id為myDiv的元素的所有同輩元素
var $pClos = $("#myDiv").closest("span"); //獲取id為myDiv的元素本身開始，最接近的span元素（向上查找）


·CSS-DOM操作
$("#myDiv").css("color"); //獲取id為myDiv的元素的color樣式的值
$("#myDiv").css("color", "blue"); //設(shè)置id為myDiv的元素的color樣式的值
$("#myDiv").css({"color":"blue", "fontSize":"12px"}); //設(shè)置id為myDiv的元素的color樣式的值（多個(gè)）


$("#myDiv").css("opacity", "0.5"); //設(shè)置id為myDiv的元素的透明度（兼容瀏覽器）


$("#myDiv").css("height"); //獲取id為myDiv的元素的高度（單位：px，兼容瀏覽器）
$("#myDiv").height(); //同上（實(shí)際高度）


$("#myDiv").css("width"); //獲取id為myDiv的元素的寬度（單位：px，兼容瀏覽器）
$("#myDiv").width(); //同上（實(shí)際寬度）


var offset = $("#myDiv").offset(); //獲取id為myDiv的元素在當(dāng)前窗口的相對(duì)偏移量
alert( offset.top + "|" + offset.left );


var offset = $("#myDiv").position(); //獲取id為myDiv的元素相對(duì)于最近一個(gè)position設(shè)置為relative或absolute的父元素的相對(duì)偏移量
alert( offset.top + "|" + offset.left );


$("#txtArea").scrollTop(); //獲取id為txtArea的元素滾動(dòng)條距離頂端的距離
$("#txtArea").scrollLeft(); //獲取id為txtArea的元素滾動(dòng)條距離左側(cè)的距離
$("#txtArea").scrollTop(100); //設(shè)置id為txtArea的元素滾動(dòng)條距離頂端的距離
$("#txtArea").scrollLeft(100); //設(shè)置id為txtArea的元素滾動(dòng)條距離左側(cè)的距離




//---------------------------- 第四章 JQuery中的事件和動(dòng)畫 -------------------------------


·加載DOM
$(window).load() 等價(jià)于 window.onload 事件


$(document).ready() 相當(dāng)于window.onload事件，但有些區(qū)別：
? (1)執(zhí)行時(shí)機(jī)：
? window.onload 是在網(wǎng)頁(yè)中所有元素（包括元素的所有關(guān)聯(lián)文件）完全加載后才執(zhí)行
? $(document).ready() 是在DOM完全就緒時(shí)就可以被調(diào)用，此時(shí)，并不意味著這些元素關(guān)系的文件都已經(jīng)下載完畢
??
? (2)多次使用：可以在同一個(gè)頁(yè)面注冊(cè)多個(gè)$(document).ready()事件
? (3)簡(jiǎn)寫方式：可以縮寫成 $(function(){ }) ?或 ?$().ready()
??
·事件綁定
當(dāng)文檔裝載完成后，可以通過bind()方法，為特定的元素進(jìn)行事件的綁定，可重復(fù)多次使用
? bind( type, [data, ] fn );
? type：指事件的類型:?
? ? blur（失去焦點(diǎn)）、focus（獲得焦點(diǎn)）
? ? load（加載完成）、unload（銷毀完成）
? ? resize（調(diào)整元素大小）、scroll（滾動(dòng)元素）
? ? click（單擊元素事件）、dbclick（雙擊元素事件）
? ? mousedown（按下鼠標(biāo)）、mouseup（松開鼠標(biāo)）
? ? mousemove（鼠標(biāo)移過）、mouseover（鼠標(biāo)移入）、mouseout（鼠標(biāo)移出）
? ? mouseenter（鼠標(biāo)進(jìn)入）、mouseleave（鼠標(biāo)離開）
? ? change（值改變）、select（下拉框索引改變）、submit（提交按鈕）
? ? keydown（鍵盤按下）、keyup（鍵盤松開）、keypress（鍵盤單擊）
? ? error（異常）
? data：指事件傳遞的屬性值，event.data 額外傳遞給對(duì)象事件的值
? fn：指綁定的處理函數(shù)，在此函數(shù)體內(nèi)，$(this)指攜帶相應(yīng)行為的DOM元素


·合并事件
hover(enter,leave)：鼠標(biāo)移入執(zhí)行enter、移出事件執(zhí)行l(wèi)eave
$("#myDiv").hover( function(){
? ? $(this).css("border", "1px solid black");0
}, function(){
? ? $(this).css("border", "none");
});


toggle(fn1,fn2,...fnN)：鼠標(biāo)每點(diǎn)擊一次，執(zhí)行一個(gè)函數(shù)，直到最后一個(gè)后重復(fù)
$("#myDiv").toggle( function(){
? ? $(this).css("border", "1px solid black");0
}, function(){
? ? $(this).css("border", "none");
});


·事件冒泡
下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分別將三種元素都注冊(cè)click事件。
那么，click事件會(huì)按照DOM的層次結(jié)構(gòu)，像水泡一樣不斷向上直到頂端，所以稱之為事件冒泡。
<body><div><span>我是SPAN我怕誰(shuí)</span></div></body>
$("span").bind("click", function(){ alert('span click'); });
$("div").bind("click", function(){ alert('div click'); });
$("body").bind("click", function(){ alert('body click'); });


·阻止冒泡
解決這個(gè)問題的辦法是：在SPAN執(zhí)行完click事件后，停止事件冒泡。
$("span").bind("click", function(event){
? ? alert('span click');
? ? event.stopPropagation(); //停止冒泡
});


·阻止默認(rèn)行為
提交按鈕在提交前做相應(yīng)的邏輯判斷，當(dāng)不滿足時(shí)
$("#btnSubmit").bind("click", function(event){
? ? event.preventDefault(); //阻止默認(rèn)行為 相當(dāng)于return false;
});


·事件對(duì)象的屬性
$("#myDiv").bind("click", function(event){ });
event.type() //返回：click
event.target() //獲取當(dāng)前元素
event.relatedTarget() //引發(fā)事件的元素
event.pageX()/event.pageY() //獲取鼠標(biāo)相對(duì)于頁(yè)面的X和Y坐標(biāo)
event.which() //在單擊事件中獲取到對(duì)應(yīng)的按鍵 鼠標(biāo)左中右分別是123
event.metaKey() //獲取操作中的相關(guān)功能鍵（ctrl/alt/shift）


·移除事件
$("#myDiv").bind("click", fn1 = function(){
? ? alert("function1");
}).bind("click", fn2 = function(){
? ? alert("function2");
}).bind("click", fn3 = function(){
? ? alert("function3");
});
$("#myDiv").unbind(); //移除id為myDiv的元素的所有事件
$("#myDiv").unbind("click"); //移除id為myDiv的元素的所有click事件
$("#myDiv").unbind("click",fn1); //移除id為myDiv的元素的名稱為fn1的click事件


·一次性事件：綁定的事件執(zhí)行一次后自動(dòng)移除
$("#myDiv").one("click", [data], function(){
? ? alert("function1");
});


·觸發(fā)事件
$("#btn").trigger("click", [data]); //代碼方式觸發(fā)click事件
$("#btn").click(); //另一種簡(jiǎn)寫方式


·事件命名空間
$("#myDiv").bind("click.hello", function(){
? ? alert("function1");
});
$("#myDiv").bind("click", function(){
? ? alert("function1");
})
$("div").unbind("click"); //兩個(gè)事件都被移除
$("div").unbind(".hello"); //只移除第一個(gè)
$("div").unbind("click!"); //只移除第二個(gè)（注意感嘆號(hào)，指沒有名字空間的）


·JQuery中的動(dòng)畫
$("div").hide(); //隱藏所有DIV元素，相當(dāng)于sytle="display:none"
$("div").show(); //顯示所有DIV元素


$("div").hide(1000); //一秒內(nèi)隱藏所有DIV元素，其它參數(shù)還有：slow(600) normal(400) fast(200)
$("div").show(1000); //一秒內(nèi)顯示所有DIV元素


$("div").fadeOut(); //降低元素的不透明度，直至消失（支持速度參數(shù)，不會(huì)改變寬高）
$("div").fadeIn(); //升高元素的不透明度，直至顯示


$("div").slideUp(); //由下至上收縮元素，直至消失（支持速度參數(shù)）
$("div").slideDown(); //由上至下展開元素，直至顯示


·自定義動(dòng)畫animate
$(elem).animate(params, speed, callback);
params：樣式屬性及值的映射 {protected:"value", protected:"value"}
speed: 速度參數(shù)
callback: 動(dòng)畫完成后執(zhí)行函數(shù)，可選


$("#myDiv").animate({left:"500px"}, 2000); //兩秒內(nèi)ID為myDiv的元素移至左邊距500px的位置
$("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加、累減
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上，多重動(dòng)畫，同時(shí)執(zhí)行


$("#myDiv").animate({opacity:"0.5"}, 1000) //先變成50%透明
? ? ? ? ? ?.animate({top:"500px"}, 500) //移至離頂端500px
? ? ? ? ? ?.animate({left:"500px"}, 500) //移至離左邊500px
? ? ? ? ? ?.fadeOut(1000); //顯示出來(lái) （四個(gè)動(dòng)作為隊(duì)列，一步步執(zhí)行）


$("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止動(dòng)畫，參數(shù)為boolean


$("#myDiv").is(":animate") //判斷元素是否在執(zhí)行動(dòng)畫


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




//-------------------- 第五章 JQuery對(duì)表單、表格的操作及更多應(yīng)用 ------------------------


·單選文本框應(yīng)用（獲得焦點(diǎn)時(shí)，加了個(gè)特殊的樣式，失去焦點(diǎn)時(shí)還原，兼容所有瀏覽器）
$(":input").focus(function(){ this.addClass("inputFocus"); })
? ? ? ? ? ?.blur(function(){ this.removeClass("inputFocus"); });


·多行文本框的應(yīng)用（放大、縮小多行文本框的高度，限制最大500px，兼容所有瀏覽器）
var $txt = $("#textArea");
$(".bigger").click(function(){
? ? if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
? ? //if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );
});
$(".smaller").click(function(){
? ? if( $txt.height() > 100) $txt.height( $txt.height() - 50 );
? ? //if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );
});


·復(fù)選框的應(yīng)用（實(shí)現(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;
? ? }
});


·下拉框的應(yīng)用（將一個(gè)下拉列表的選中項(xiàng)搬至另一個(gè)下拉列表）
$("#btnAdd").click(function(){ //將選中選項(xiàng)搬過去
? ? $("#mySelect1 option:selected").appendTo("#mySelect2");
});
$("#btnAddAll").click(function(){ //將全部選項(xiàng)搬過去
? ? $("#mySelect1 option").appendTo("#mySelect2");
});
$("#mySelect1").dblclick(function()[ //雙擊項(xiàng)搬過去
? ? $("#mySelect1 option:selected").appendTo("#mySelect2");
}


·表單驗(yàn)證
<form>
? ? <div>
? ? ? ? <label>用戶名：</label>
? ? ? ? <input type="text" id="txtUid" class="required" value="" />
? ? </div>
</form>
$("form :input.required").each(function(){ //往每個(gè)class有required樣式的input元素后面添加*號(hào)
? ? $(this).parent().append( $("<span class='star'>*</span>") );
});
$("form :input.required").blur(function(){ //失去焦點(diǎn)時(shí)驗(yàn)證域
? ? if( this.value == "" ){
? ? ? ? $(this).parent().append( $("<span class='error'>必填字段</span>") );
? ? }
? ? else{
? ? ? ? $(this).parent().append( $("<span class='success'>驗(yàn)證正確</span>") );
? ? ? ? $(this).parent().find(".error").remove();
? ? }
}).keyup(function(){ //用戶每點(diǎn)一個(gè)鍵觸發(fā)
? ? $(this).triggerHandler("blur");
}).focus(function(){ //控制有焦點(diǎn)時(shí)觸發(fā)
? ? $(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
? ? $("form :input.required").trigger("blur"); //讓所有需要驗(yàn)證的域失去焦點(diǎn)
? ? var errNum = $("form .error").length;
? ? if( errNum ){
? ? ? ? alert("有驗(yàn)證字段失敗，請(qǐng)重新填寫");
? ? ? ? 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的應(yīng)用 ------------------------


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


$("#myDiv").load("hello.html"); //向myDiv元素加載hello.html的內(nèi)容
$("#myDiv").load("hello.html .myClass"); //篩選，只加載hello.html中myClass樣式的內(nèi)容


$("#myDiv").load("hello.html", function(){} ); //沒參數(shù)的，使用GET方式
$("#myDiv").load("hello.html", {id:'123', name:'dier'}, function(){} ); //有參數(shù)的，使用POST方式


$("#myDiv").load("hello.html", function(responseText, textStatus, XMLHttpRequest){ //回調(diào)函數(shù)
? ? //responseText : 請(qǐng)求返回的內(nèi)容
? ? //textStatus : 請(qǐng)求狀態(tài) success error notmodified timeout
? ? //XMLHttpRequest : Ajax對(duì)象
});


·$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])方法
url：要請(qǐng)求的頁(yè)面的地址
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 : 請(qǐng)求返回的內(nèi)容
? ? //textStatus : 請(qǐng)求狀態(tài) success error notmodified timeout
? ??
? ? //當(dāng)data是HTML時(shí)，直接加載
? ? $("#myDiv").html(data);
? ??
? ? //當(dāng)data是XML時(shí)，可篩選 <user id="123" name="dier" age="27" />
? ? var age = $(data).find("user").attr("age");
? ??
? ? //當(dāng)data是JSON時(shí)，可直接點(diǎn)出屬性來(lái) {id:"123", name:"dier", age:"27"}
? ? var age = data.age;
});


·getScript(url [,callback])方法
$(function(){ //動(dòng)態(tài)加載JS腳本
? ? $.getScript("test.js");
? ??
? ? $.getScript("test.js", function(){ //回調(diào)函數(shù)
? ? ? ? //do something..
? ? });
});


·getJSON(url [,callback])方法
$(function(){ //動(dòng)態(tài)加載JS腳本
? ? $.getJSON("test.js");
? ??
? ? $.getJSON("test.js", function(data){ //回調(diào)函數(shù)
? ? ? ? //do something..
? ? ? ? //data : 返回的數(shù)據(jù)
? ? ? ? $.each( data, function(index, item){ //遍歷，相當(dāng)于foreach
? ? ? ? ? ? //index : 索引
? ? ? ? ? ? //item : 當(dāng)前項(xiàng)內(nèi)容
? ? ? ? ? ? //return false; 退出循環(huán)
? ? ? ? });
? ? });
});


·ajax(options)方法
url : 請(qǐng)求的地址
type : 請(qǐng)求的方式 GET POST 默認(rèn)為GET
timeout : 請(qǐng)求超時(shí)時(shí)間(單位：毫秒）
data : 請(qǐng)求時(shí)發(fā)送的參數(shù)（String,Object）
dataType : 預(yù)期返回的數(shù)據(jù)類型 xml html script json jsonp text
bdforeSend : 發(fā)送請(qǐng)求前觸發(fā)事件，如果return false則取消發(fā)送 function(XmlHttpRequest){}
complete : 請(qǐng)求完成后觸發(fā)事件，不管成功與否 function(XmlHttpRequest, textStatus){}
success : 請(qǐng)求完成并且成功時(shí)觸發(fā)事件 function(data, textStatus){}
error : 請(qǐng)求完成并且失敗時(shí)觸發(fā)事件 function(XmlHttpRequest, textStatus, errorThrown){}
global : 是否為全局請(qǐng)求，默認(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( "請(qǐng)求失敗：" + errThrown );
? ? }
});


·序列化字符串 serialize()
$.get( "test.aspx", $("#form1").serialize(), function(data,textStatus){
? ? //將form1整個(gè)表單中的所有域序列化成提交的參數(shù)，支持自動(dòng)編碼
});


·序列化數(shù)組 serializeArray()
var arr = $(":checkbox, :radio").serializeArray();


·對(duì)象序列化 param()
var obj = {id:"123", name:"dier", age:"27"};
var kv = $.param(obj); //id=123&name=dier&age=27


·JQuery中的全局Ajax事件
ajaxStart(callback) //請(qǐng)求開始時(shí)觸發(fā)
ajaxStop(callback) //請(qǐng)求結(jié)束時(shí)觸發(fā)
ajaxComplete(callback) //請(qǐng)求完成時(shí)觸發(fā)
ajaxSuccess(callback) //請(qǐng)求成功時(shí)觸發(fā)
ajaxError(callback) //請(qǐng)求失敗時(shí)觸發(fā)
ajaxSend(callback) //請(qǐng)求發(fā)送前觸發(fā)


$("#loading").ajaxStart(function(){ //當(dāng)有AJAX請(qǐng)求時(shí)顯示，完成時(shí)隱藏
? ? ? ? $(this).show();
? ? }.ajaxStop(function(){
? ? ? ? $(this).hide();
? ? }
);


//第七章是插件的使用及編寫 第八章則是一個(gè)實(shí)例 此處忽略

總結(jié)

以上是生活随笔為你收集整理的锋利的JQuery 学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。