鋒利的jQuery學習總結

　　通過對《鋒利的jQuery》（第二版）一書的學習，發現此書講解通俗易懂，是學習jQuery的一本很好的指導書，特作如下總結。此書主要講解了jQuery的常用操作，包括認識jQuery，jQuery選擇器，jQuery中的DOM操作，jQuery中的事件和動畫，jQuery對表單、表格的操作及更多應用，jQuery與Ajax的應用等。

第一章 認識jQuery

jQuery強調的理念是寫得少，做得多（write less，do more），其具有鏈式操作方式、隱式迭代、行為層和結構層的分離等諸多優點。
獲取jQuery的最新版本：http://jquery.com/

1、默認情況下jQuery用$作為自身的快捷方式，並且以下兩種形式等價：

$(document).ready(function(){
    //代碼
}); 
相當於
$(function(){
    //代碼
});

2、jQuery對象和DOM對象的相互轉換

（1）、jQuery對象轉換成DOM對象

jQuery提供了兩種方法將一個jQuery對象轉換成DOM對象，即[index]和get(index)。

var $ck = $("#ck");//jQuery對象
var ck= $ck[0];//或者var ck= $ck.get(0);
alert(ck.checked);//檢測這個checkbox是否被選中

（2）、DOM對象轉換成jQuery對象

只需要使用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。

var ck= document.getElementById("ck");//DOM對象
var $ck = $(ck);

第二章 jQuery選擇器

//普通js判斷獲得元素是否存在
if(document.getElementById("mytt")){
    //do something
}

//juery判斷獲得元素是否存在
if($("#mytt").length > 0){  
    //do something   
}

//如果mytt元素不存在，則頁面出現異常
document.getElementById("mytt").style.color = "red";

//即使頁面沒有名稱為mytt的元素，也不會報錯，它是一個jQuery對象
$("#mytt").css("color","red");

常用選擇器

1、基本選擇器：

//注意：基本選擇器中有id選擇器，但是沒有name選擇器
$("#mytt") //根據給定的id選擇匹配的元素，此處是選取id為mytt的元素，返回：單個元素
$(".myttClass") //根據給定的樣式名稱選擇匹配的元素，此處是選取所有class為myttClass的元素，返回：集合元素
$("p") //根據給定的元素名稱選擇匹配的元素，此處是選取所有的<p>元素，返回：集合元素
$("#mytt,.myttClass,p") //根據給定的規則選擇匹配的元素，此處是選取id為mytt的元素、class為myttClass的元素和<p>元素，返回：集合元素
$("*") //選擇頁面所有元素，返回：集合元素

2、層次選擇器：

$("div span") //選擇所有<div>元素下的所有<span>元素（即所有后代元素，包括兒子和孫子等層的），返回：集合元素
$("div>span") //選擇所有<div>元素下的<span>子元素（僅子元素），返回：集合元素
$(".myttClass+div") //選擇class樣式名稱為myttClass的下一個<div>元素（即緊接在myttClass元素后的同輩元素），等價於$(".myttClass").next("div")，返回：集合元素
$(".myttClass~div") //選擇樣式名稱為myttClass之后的所有<div>元素（myttClass元素之后的同輩元素），等價於 $(".myttClass").nextAll("div")，返回：集合元素
//注意：$(".myttClass").siblings("div") //選擇樣式名稱為myttClass的元素的所有同輩<div>元素（無論前后），返回集合元素

3、過濾選擇器

（1）、基本過濾選擇器

//注意：索引index從0開始
$("div:first") //選擇所有<div>元素中的第一個<div>元素，返回：單個元素
$("div:last") //選擇所有<div>元素中的最后一個<div>元素，返回：單個元素
$("div:not(.myttClass)") //選擇所有樣式不包括myttClass的<div>元素，返回：集合元素
$("div:even") //選擇所有索引是偶數的<div>元素，返回：集合元素
$("div:odd") //選擇所有索引是奇數的<div>元素，返回：集合元素
$("div:eq(index)") //選擇索引等於index的<div>元素，eq為equals的縮寫，返回：單個元素
$("div:gt(index)") //選擇所有索引大於index的<div>元素，gt為great than的縮寫，返回：集合元素
$("div:lt(index)") //選擇所有索引小於index的<div>元素，lt為less than的縮寫，返回：集合元素
$(":header") //選擇所有標題元素（如h1,h2,h3等），返回：集合元素
$("div:animated") //選擇所有正在執行動畫的<div>元素，返回：集合元素
$(":focus") //選擇當前獲取焦點的元素，返回：集合元素

（2）、內容過濾選擇器

$("div:contains('我')") //選擇所有文本內容包含"我"的<div>元素，返回：集合元素
$("div:empty") //選擇所有不包含子元素或者文本的<div>空元素，返回：集合元素
$("div:has(p)") //選擇所有含有匹配子元素<p>的<div>元素，返回：集合元素
$("div:parent") //選擇所有含有子元素或者文本的<div>元素，返回：集合元素

（3）、可見性選擇器

$(":hidden") //選擇所有不可見的元素（如：<input type="hidden"/>、<div style="display:none;">和<div style="visibility:none">等元素），返回：集合元素
$(":visible") //選擇所有可見的元素，返回：集合元素

（4）、屬性過濾選擇器

$("[id]") //選擇所有含有id屬性的元素，返回：集合元素
$("[class=myttClass]") //選擇所有class屬性值是myttClass的元素，返回：集合元素
$("[class!=myClass]") //選擇所有class屬性值不是myClass的元素，注意：沒有title屬性的元素也會被選取，返回：集合元素
$("[title^=tt]") //選擇所有title屬性值以tt開始的元素，返回：集合元素
$("[title$=tt]") //選擇所有title屬性值以tt結束的元素，返回：集合元素
$("[title*=tt]") //選擇所有title屬性值含有tt的元素，返回：集合元素
$('[title|="tt"]') //選擇所有title屬性值等於tt或以tt為前綴（該字符串后跟一個連字符'-'）的元素，返回：集合元素
$('[title~="tt"]') //選擇所有title屬性值用空格分割的值中包含字符tt的元素，返回：集合元素
$("div[id][class=myttClass]") //選擇所有含有id屬性的並且class屬性值是myttClass的元素，返回：集合元素

（5）、子元素過濾選擇器

//index從1開始
$(":nth-child(index/even/odd)") //選擇每個父元素下的第index/偶數/奇數個子元素，返回：集合元素
$(":first-child") //選擇每個父元素下的第一個子元素，返回：集合元素
$(":last-child") //選擇每個父元素下的最后一個子元素，返回：集合元素
$("ul li:only-child") //在<ul>元素中選擇只有一個<li>元素的子元素，返回：集合元素

（6）、表單對象屬性選擇器

$("#myttForm:enabled") //選擇id屬性為myttForm表單內的所有可用元素，返回：集合元素
$("#myttForm:disabled") //選擇id屬性為myttForm表單內的所有不可用元素，返回：集合元素
$("input:checked") //選擇所有被選中的<input>元素（單選框、復選框），返回：集合元素
$("select:selected") //所有被選中的選項元素（下拉列表），返回：集合元素

4、表單選擇器

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

注意：

　　$(":input")和$("input")是不同的選擇器，$(":input")是表單選擇器可以選擇<input>、<textarea>、<select>和<button>元素，而$("input")是標簽選擇器，只能匹配選擇出<input>標簽元素。
　　上面說到了，有id選擇器，但是沒有name選擇器，此處可以使用屬性選擇器來表示$("[name=mytt]")來獲取name="mytt"的元素。

第三章 jQuery中的DOM操作

<p title="choose your favourite fruit" >你最喜歡的水果是?</p>
<ul>
    <li title='apple'>蘋果</li>
    <li title='orange'>橘子</li>
    <li title='pinapple'>菠蘿</li>
</ul>

1、查找節點

（1）、查找元素節點

//使用上面介紹的jQuery選擇器來完成查找元素
var $li = $("ul li:eq(1)");   // 獲取第二個<li>元素節點
var li_txt =  $li.text();       // 輸出第二個<li>元素節點的text
alert(li_txt);//得到橘子

（2）、查找屬性節點

var $para = $("p");//獲取<p>節點
var p_txt = $para.attr("title");//獲的<p>元素節點屬性title值
alert(p_txt);//得到"choose your favourite fruit"

2、創建節點

var $li_1 = $("<li title='banana'>香蕉</li>");//創建一個<li>元素,包括元素節點，文本節點和屬性節點,其中title='banana'就是創建的屬性節點
var $li_2 = $("<li title='pear'>雪梨</li>");//創建一個<li>元素，包括元素節點,文本節點和屬性節點，其中title='pear' 就是創建的屬性節點  
var $parent = $("ul");//獲取<ul>節點。<li>的父節點
$parent.append($li_1);//添加到<ul>節點中，使之能在網頁中顯示
$parent.append($li_2);//等價於：$parent.append($li_1).append($li_2);

3、插入節點

$("p").append("<b>grape</b>");//結果為<p title="choose your favourite fruit" >你最喜歡的水果是?<b>grape</b></p>

4、刪除節點

//remove()方法的返回值是一個指向已被刪除的節點的引用
var $li = $("ul li:eq(1)").remove(); //獲取第二個<li>元素節點后，將它從網頁中刪除
$li.appendTo("ul");//把剛才刪除的節點又重新添加到<ul>元素里

5、復制節點

//使用clone()方法
$(this).clone().appendTo("ul"); //復制當前點擊的節點，並將它追加到<ul>元素
$(this).clone(true).appendTo("ul"); //注意參數true，復制元素的同事復制元素中所綁定的事件

6、替換節點

//replaceWith()和replaceAll()方法
$("p").replaceWith("<strong>你最不喜歡的水果是?</strong>");
//同樣的實現：
$("<strong>你最不喜歡的水果是?</strong>").replaceAll("p");

7、包裹節點

//使用wrap()方法
$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起來。即<b><p title="choose your favourite fruit" >你最喜歡的水果是?</p></b>

8、屬性操作

//使用attr()方法來獲取和設置元素屬性
//設置<p>元素的屬性'title'
$("p").attr("title","choose");

//獲取<p>元素的屬性'title'
alert( $("p").attr("title"));

//使用removeAttr()方法來刪除元素的屬性
//刪除<p>元素的屬性'title'
$("p").removeAttr("title");

9、樣式操作

此處獲取和修改的是css樣式是class屬性。

//1.使用attr()方法來獲取樣式和設置樣式
$("p").attr("class","hign");//設置<p>元素的class
alert( $("p").attr("class"));//獲取<p>元素的'class'

//2.使用addClass()方法來追加樣式
$("p").addClass("another");//給<p>元素追加'another'樣式類

//3.使用removeClass()方法來移除樣式
$("p").removeClass()("high another");//使用空格來刪除多個樣式

//使用toggle()方法來控制行為上的重復切換
$toggleBtn.toggle(function(){
    //顯示元素
},function(){
    //隱藏元素
})

//4.toggleClass()方法來控制樣式上的重復切換
$("p").toggleClass("another");//重復切換類名"another"

//5.hasClass()判斷是否含有某個樣式
$("p").hasClass("another");

10、設置和獲取HTML、文本和值

//1.html()方法
alert($("p").html());//獲取<p>元素的HTML代碼
$("p").html("<strong>你最喜歡的水果是?</strong>");//設置<p>元素的HTML代碼

//2.text()方法
alert($("p").text());//獲取<p>元素的文本
$("p").text("你最喜歡的水果是?");//設置<p>元素的文本

//3.val()方法
alert($(this).val());//獲取按鈕的value值
$(this).val("我被點擊了!");//設置按鈕的value值

//focus()方法相當於js中的onfocus()方法，blur()方法相當與js中的onblur()方法
//defaultValue屬性包含該表單元素的初始值

11、遍歷節點

children()方法用於取得匹配元素的子元素集合。
next()方法取得匹配元素后面緊鄰的同輩元素。
prev()方法取得匹配元素前面緊鄰的同輩元素。
siblings()方法取得匹配元素前后所有的同輩元素。

12、CSS-DOM操作

此處獲取和修改的是css樣式是style屬性。

主要有css()方法、width()方法、height()方法、offset()方法、position()方法、scollTop()和scroLeft()方法等。

//此處獲取和修改的是css樣式是style屬性
//使用css()方法獲取或者設置元素的樣式屬性
alert($("p").css("color"));//獲取<p>元素的color
$("p").css("color","red");//設置<p>元素的color

第四章 jQuery中的事件和動畫

jQuery中的事件

1、加載DOM

//jQuery代碼：
$(window).load(function(){
    //編寫代碼
})
//等價於JavaScript代碼：
window.onload=function(){
    //編寫代碼
}

$(document).reday(function(){
    //編寫代碼
})
//等價於
$(function(){
    //編寫代碼 
})

2、事件綁定

在文檔裝在完成后，如果打算為元素綁定事件來完成操作，則可以使用bind()方法來對匹配元素進行特定事件的綁定，bind()方法的調用格式為：

bind(type [, data], fn);

$(function(){
    $("#panel h5.head").bind("click",function(){
        $(this).next().show();
    })
})
//可以簡寫為：
$(function(){
    $("#panel h5.head").click(function(){
         $(this).next().show();
    })
})

3、合成事件

jQuery有兩個合成事件：hover()方法和toggle()方法。

hover()方法用於模擬光標懸停事件，語法結構為hover(enter,leave)，當光標移動到元素上是，會觸發指定的第1個函數（enter）；當光標移出這個元素時，會觸發指定的第2個函數（leave）。

$(function(){
    $("#panel h5.head").hover(function(){
        $(this).next().show();
    },function(){
        $(this).next().hide();   
    })
})

toggle()方法用於模擬鼠標連續單擊事件，語法格式為toggle(fn1,fn2,...fnN)，每次單擊元素，都會依次執行fn。

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).addClass("highlight");
        $(this).next().show();
    },function(){
        $(this).removeClass("highlight");
        $(this).next().hide();
    });
})

4、事件冒泡

event.stopPropagation()方法停止事件冒泡；

event.preventDefault()方法阻止默認行為；

5、事件對象的屬性

event.type可以獲取到事件的類型；

event.stopPropagation()方法停止事件冒泡；

event.preventDefault()方法阻止默認行為；

event.target獲取到觸發事件的元素；

event.relatedTarget獲取到相關元素；

event.pageX和event.pageY獲取到光標相對於頁面的x坐標和y坐標；

event.which獲取鼠標單擊時的左、中、右鍵；

event.metaKey獲取<ctrl>按鍵；

6、移除事件

使用unbind([type],[data])方法

//移除click中的所有事件
$('#delAll').click(function(){
    $('#btn').unbind("click");//移除click中的所有事件
});

//移除click中的myFun2事件
$('#delTwo').click(function(){
    $('#btn').unbind("click",myFun2);//移除click中的myFun2事件
});

7、模擬操作

trigger()方法完成模擬操作

$('#btn').trigger("click");//模擬單擊操作
//可簡寫為
$('#btn').click();

jQuery中的動畫

1、show()方法和hide()方法

show()方法會將元素的display樣式改為"block"或者"inline"，hide()方法會將元素的display樣式改為"none"。方法中可以帶參數來控制顯示或者隱藏的速度。

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().hide();
    },function(){
        $(this).next().show();
    })
})

2、fadeIn()方法和fadeOut()方法

fadeIn()方法和fadeOut()方法改變元素的不透明度，即淡入淡出效果。

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().fadeOut();
    },function(){
        $(this).next().fadeIn();
    })
})

3、slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法會改變元素的高度，slideUp()方法由上到下縮短隱藏，slideDown()由上至下延伸顯示。

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().slideUp();
    },function(){
        $(this).next().slideDown();
    })
})

4、自定義動畫animate()

$(function(){
    $("#panel").click(function(){
        $(this).animate({left: "500px"}, 3000);
    })
})

第五章 jQuery對表單、表格的操作及更多應用

//復選框全選或不全選
$("#CheckedAll").click(function(){
    //所有checkbox跟着全選的checkbox走
    $('[name=items]:checkbox').attr("checked", this.checked );
});

$('[name=items]:checkbox').click(function(){
    //定義一個臨時變量，避免重復使用同一個選擇器選擇頁面中的元素，提升程序效率。
    var $tmp=$('[name=items]:checkbox');
    //用filter方法篩選出選中的復選框。並直接給CheckedAll賦值。
    $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);
});

//表格奇偶行才一共不同的樣式
$("tr:odd").addClass("oddTr"); //給奇數行添加oddTr樣式   
$("tr:even").addClass("evenTr"); //給偶數行添加evenTr樣式 

第六章 jQuery與Ajax的應用

Ajax的核心是XMLHttpRequest對象，它是Ajax實現的關鍵——發送異步請求、接收相應即執行回調都是通過他來完成的。

jQuery對Ajax操作進行了封裝，在jQuery中$.ajax()方法屬於最底層的方法，第2層是load()、$.get()和$.post()方法，第3層是$.getScript()和$.getJSON()方法。

load()方法是jQuery中最為簡單和常用的jQuery方法，能載入遠程HTML代碼和插入DOM中，一般用於獲取靜態的數據文件，語法格式為：load(url [,data] [,callback])。

//無參數傳遞，則是get方式；有參數傳遞，則是post方式
$(function(){
    $("#send").click(function(){
        $("#resText").load("test.html",function (responseText, textStatus, XMLHttpRequest){
            alert( $(this).html() );//在這里this指向的是當前的DOM對象，即 $("#iptText")[0]
            alert(responseText);//請求返回的內容
            alert(textStatus);//請求狀態：success，error
            alert(XMLHttpRequest);//XMLHttpRequest對象
        });
    })
})

$.get()方法和$.post()方法

$.get()方法的語法結構為：$.get(url [,data] [,callback] [,type])，$.post()方法結構與其類似，只是提交方式不一樣。
其中url表示被加載的數據的url地址；data表示發送到服務器的數據的鍵/值對象；callback表示當數據被加載時，所執行的函數；type表示被返回的數據的類型（html，xml，json，text等）。

form表單中的GET與POST的區別：
GET請求的數據會附在URL地址之后（就是把數據放置在HTTP協議頭中），以?分割URL和傳輸數據，參數之間以&相連，而且提交的數據最多只能是2KB，而且GET方式提交的數據會給瀏覽器緩存起來，從瀏覽器的歷史記錄中可以找到，所以安全性較差；
POST請求會把提交的數據放置在HTTP包的包體中，不會附着在地址欄中，提交的數據理論上沒有大小限制，所以POST的安全性要比GET高。

$(function(){
    $("#send").click(function(){
        $.get("get3.php", { 
            username :  $("#username").val() , 
            content :  $("#content").val()  
        }, function (data, textStatus){
            var username = data.username;
            var content = data.content;
            var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
            $("#resText").html(txtHtml); // 把返回的數據添加到頁面上
        },"json");
    })
})

 

$(function(){
    $("#send").click(function(){
        $.post("get3.php", { 
            username :  $("#username").val() , 
            content :  $("#content").val()  
        }, function (data, textStatus){
            var username = data.username;
            var content = data.content;
            var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
            $("#resText").html(txtHtml); // 把返回的數據添加到頁面上
        },"json");
    })
})

$.getScript()方法和$.getJSON()方法

$.getScript(url[,data][,callback])方法，相當於$.get()方法的Script版本，相當於指定type參數為"script"；$.getJson(url[,data][,callback])方法，相當於$.get()方法的Json版本，相當於指定type參數為"json"；

$(function(){
    $.getScript('jquery.color.js',function(){
        $("<p>加載JavaScript完畢</p>").appendTo("body");
        $("#go").click(function(){
            $(".block").animate( { backgroundColor: 'pink' }, 1000)
                       .animate( { backgroundColor: 'blue' }, 1000);
        });
    });
})

 

$(function(){
    $('#send').click(function() {
        $.getJSON('test.json', function(data) {
            $('#resText').empty();
            var html = '';
            $.each( data  , function(commentIndex, comment) {
                html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
            })
        $('#resText').html(html);
        })
    })
})

$.ajax()方法

$.ajax()方法的語法格式為：$.ajax(options)，參數以key/value的形式存在。
其中url表示發送請求的地址；dataType表示預期從服務器返回的數據類型；type表示請求方式，默認為GET；data表示發送到服務器的數據；async表示發送同步/異步請求，默認為true，表示異步；success表示請求成功后調用的回調函數；error表示請求失敗時調用的回調函數。
注意：同步請求將鎖住瀏覽器，用戶的其他操作必須等待請求完成后才可以繼續執行。

$(function(){
    $('#send').click(function() {
        $.ajax({
            type: "GET",
            url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
            dataType: "jsonp",
            success : function(data){
                $.each(data.items, function( i,item ){
                    $("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");
                    if ( i == 3 ) { 
                        return false;
                    }
                });
            }
        }); 
    });
})

Cookie與Session的區別：

Cookie是早期的會話跟蹤技術，它會將信息保存到客戶端瀏覽器中。瀏覽器訪問網站時會攜帶這些cookie信息，達到鑒別身份的目的。
Session是在Cookie的基礎上建立起來的會話跟蹤技術，它將信息保存在服務器端。Session中能夠存儲負責的Java對象，因此使用更加方便。Session依賴於名為JSESSIONID的Cookie。