锋利的jQuery学习总结
通過對《鋒利的jQuery》（第二版）一書的學習，發現此書講解通俗易懂，是學習jQuery的一本很好的指導書，特作如下總結。此書主要講解了jQuery的常用操作，包括認識jQuery，jQuery選擇器，jQuery中的DOM操作，jQuery中的事件和動畫，jQuery對表單、表格的操作及更多應用，jQuery與Ajax的應用等。
第一章 認識jQuery
jQuery強調的理念是寫得少，做得多（write less，do more），其具有鏈式操作方式、隱式迭代、行為層和結構層的分離等諸多優點。
獲取jQuery的最新版本：http://jquery.com/
1、默認情況下jQuery用$作為自身的快捷方式，并且以下兩種形式等價：
1 $(document).ready(function(){ 2 //代碼 3 }); 4 相當于 5 $(function(){ 6 //代碼 7 });2、jQuery對象和DOM對象的相互轉換
（1）、jQuery對象轉換成DOM對象
jQuery提供了兩種方法將一個jQuery對象轉換成DOM對象，即[index]和get(index)。
1 var $ck = $("#ck");//jQuery對象 2 var ck= $ck[0];//或者var ck= $ck.get(0); 3 alert(ck.checked);//檢測這個checkbox是否被選中（2）、DOM對象轉換成jQuery對象
只需要使用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。
1 var ck= document.getElementById("ck");//DOM對象 2 var $ck = $(ck);第二章 jQuery選擇器
1 //普通js判斷獲得元素是否存在 2 if(document.getElementById("mytt")){ 3 //do something 4 } 5 6 //juery判斷獲得元素是否存在 7 if($("#mytt").length > 0){ 8 //do something 9 } 1 //如果mytt元素不存在，則頁面出現異常 2 document.getElementById("mytt").style.color = "red"; 3 4 //即使頁面沒有名稱為mytt的元素，也不會報錯，它是一個jQuery對象 5 $("#mytt").css("color","red");常用選擇器
1、基本選擇器：
1 //注意：基本選擇器中有id選擇器，但是沒有name選擇器 2 $("#mytt") //根據給定的id選擇匹配的元素，此處是選取id為mytt的元素，返回：單個元素 3 $(".myttClass") //根據給定的樣式名稱選擇匹配的元素，此處是選取所有class為myttClass的元素，返回：集合元素 4 $("p") //根據給定的元素名稱選擇匹配的元素，此處是選取所有的<p>元素，返回：集合元素 5 $("#mytt,.myttClass,p") //根據給定的規則選擇匹配的元素，此處是選取id為mytt的元素、class為myttClass的元素和<p>元素，返回：集合元素 6 $("*") //選擇頁面所有元素，返回：集合元素2、層次選擇器：
1 $("div span") //選擇所有<div>元素下的所有<span>元素（即所有后代元素，包括兒子和孫子等層的），返回：集合元素 2 $("div>span") //選擇所有<div>元素下的<span>子元素（僅子元素），返回：集合元素 3 $(".myttClass+div") //選擇class樣式名稱為myttClass的下一個<div>元素（即緊接在myttClass元素后的同輩元素），等價于$(".myttClass").next("div")，返回：集合元素 4 $(".myttClass~div") //選擇樣式名稱為myttClass之后的所有<div>元素（myttClass元素之后的同輩元素），等價于 $(".myttClass").nextAll("div")，返回：集合元素 5 //注意：$(".myttClass").siblings("div") //選擇樣式名稱為myttClass的元素的所有同輩<div>元素（無論前后），返回集合元素3、過濾選擇器
（1）、基本過濾選擇器
1 //注意：索引index從0開始2 $("div:first") //選擇所有<div>元素中的第一個<div>元素，返回：單個元素3 $("div:last") //選擇所有<div>元素中的最后一個<div>元素，返回：單個元素4 $("div:not(.myttClass)") //選擇所有樣式不包括myttClass的<div>元素，返回：集合元素5 $("div:even") //選擇所有索引是偶數的<div>元素，返回：集合元素6 $("div:odd") //選擇所有索引是奇數的<div>元素，返回：集合元素7 $("div:eq(index)") //選擇索引等于index的<div>元素，eq為equals的縮寫，返回：單個元素8 $("div:gt(index)") //選擇所有索引大于index的<div>元素，gt為great than的縮寫，返回：集合元素9 $("div:lt(index)") //選擇所有索引小于index的<div>元素，lt為less than的縮寫，返回：集合元素 10 $(":header") //選擇所有標題元素（如h1,h2,h3等），返回：集合元素 11 $("div:animated") //選擇所有正在執行動畫的<div>元素，返回：集合元素 12 $(":focus") //選擇當前獲取焦點的元素，返回：集合元素（2）、內容過濾選擇器
1 $("div:contains('我')") //選擇所有文本內容包含"我"的<div>元素，返回：集合元素 2 $("div:empty") //選擇所有不包含子元素或者文本的<div>空元素，返回：集合元素 3 $("div:has(p)") //選擇所有含有匹配子元素<p>的<div>元素，返回：集合元素 4 $("div:parent") //選擇所有含有子元素或者文本的<div>元素，返回：集合元素（3）、可見性選擇器
1 $(":hidden") //選擇所有不可見的元素（如：<input type="hidden"/>、<div style="display:none;">和<div style="visibility:none">等元素），返回：集合元素 2 $(":visible") //選擇所有可見的元素，返回：集合元素（4）、屬性過濾選擇器
1 $("[id]") //選擇所有含有id屬性的元素，返回：集合元素 2 $("[class=myttClass]") //選擇所有class屬性值是myttClass的元素，返回：集合元素 3 $("[class!=myClass]") //選擇所有class屬性值不是myClass的元素，注意：沒有title屬性的元素也會被選取，返回：集合元素 4 $("[title^=tt]") //選擇所有title屬性值以tt開始的元素，返回：集合元素 5 $("[title$=tt]") //選擇所有title屬性值以tt結束的元素，返回：集合元素 6 $("[title*=tt]") //選擇所有title屬性值含有tt的元素，返回：集合元素 7 $('[title|="tt"]') //選擇所有title屬性值等于tt或以tt為前綴（該字符串后跟一個連字符'-'）的元素，返回：集合元素 8 $('[title~="tt"]') //選擇所有title屬性值用空格分割的值中包含字符tt的元素，返回：集合元素 9 $("div[id][class=myttClass]") //選擇所有含有id屬性的并且class屬性值是myttClass的元素，返回：集合元素（5）、子元素過濾選擇器
1 //index從1開始 2 $(":nth-child(index/even/odd)") //選擇每個父元素下的第index/偶數/奇數個子元素，返回：集合元素 3 $(":first-child") //選擇每個父元素下的第一個子元素，返回：集合元素 4 $(":last-child") //選擇每個父元素下的最后一個子元素，返回：集合元素 5 $("ul li:only-child") //在<ul>元素中選擇只有一個<li>元素的子元素，返回：集合元素（6）、表單對象屬性選擇器
1 $("#myttForm:enabled") //選擇id屬性為myttForm表單內的所有可用元素，返回：集合元素 2 $("#myttForm:disabled") //選擇id屬性為myttForm表單內的所有不可用元素，返回：集合元素 3 $("input:checked") //選擇所有被選中的<input>元素（單選框、復選框），返回：集合元素 4 $("select:selected") //所有被選中的選項元素（下拉列表），返回：集合元素4、表單選擇器
1 $(":input") //選擇所有<input>、<textarea>、<select>和<button>元素，返回：集合元素2 $(":text") //選擇所有單行文本框元素，返回：集合元素3 $(":password") //選擇所有密碼框元素，返回：集合元素4 $(":radio") //選擇所有單選框元素，返回：集合元素5 $(":checkbox") //選擇所有復選框元素，返回：集合元素6 $(":submit") //選擇所有提交按鈕元素，返回：集合元素7 $(":image") //選擇所有圖片按鈕元素，返回：集合元素8 $(":reset") //選擇所有重置按鈕元素，返回：集合元素9 $(":button") //選擇所有按鈕元素，返回：集合元素 10 $(":file") //選擇所有上傳域元素，返回：集合元素 11 $(":hidden") //選擇所有不可見域元素，返回：集合元素注意：
$(":input")和$("input")是不同的選擇器，$(":input")是表單選擇器可以選擇<input>、<textarea>、<select>和<button>元素，而$("input")是標簽選擇器，只能匹配選擇出<input>標簽元素。
上面說到了，有id選擇器，但是沒有name選擇器，此處可以使用屬性選擇器來表示$("[name=mytt]")來獲取name="mytt"的元素。
第三章 jQuery中的DOM操作
1 <p title="choose your favourite fruit" >你最喜歡的水果是?</p> 2 <ul> 3 <li title='apple'>蘋果</li> 4 <li title='orange'>橘子</li> 5 <li title='pinapple'>菠蘿</li> 6 </ul>1、查找節點
（1）、查找元素節點
1 //使用上面介紹的jQuery選擇器來完成查找元素 2 var $li = $("ul li:eq(1)"); // 獲取第二個<li>元素節點 3 var li_txt = $li.text(); // 輸出第二個<li>元素節點的text 4 alert(li_txt);//得到橘子（2）、查找屬性節點
1 var $para = $("p");//獲取<p>節點 2 var p_txt = $para.attr("title");//獲的<p>元素節點屬性title值 3 alert(p_txt);//得到"choose your favourite fruit"2、創建節點
1 var $li_1 = $("<li title='banana'>香蕉</li>");//創建一個<li>元素,包括元素節點，文本節點和屬性節點,其中title='banana'就是創建的屬性節點 2 var $li_2 = $("<li title='pear'>雪梨</li>");//創建一個<li>元素，包括元素節點,文本節點和屬性節點，其中title='pear' 就是創建的屬性節點 3 var $parent = $("ul");//獲取<ul>節點。<li>的父節點 4 $parent.append($li_1);//添加到<ul>節點中，使之能在網頁中顯示 5 $parent.append($li_2);//等價于：$parent.append($li_1).append($li_2);3、插入節點
1 $("p").append("<b>grape</b>");//結果為<p title="choose your favourite fruit" >你最喜歡的水果是?<b>grape</b></p>4、刪除節點
1 //remove()方法的返回值是一個指向已被刪除的節點的引用 2 var $li = $("ul li:eq(1)").remove(); //獲取第二個<li>元素節點后，將它從網頁中刪除 3 $li.appendTo("ul");//把剛才刪除的節點又重新添加到<ul>元素里5、復制節點
1 //使用clone()方法 2 $(this).clone().appendTo("ul"); //復制當前點擊的節點，并將它追加到<ul>元素 3 $(this).clone(true).appendTo("ul"); //注意參數true，復制元素的同事復制元素中所綁定的事件6、替換節點
1 //replaceWith()和replaceAll()方法 2 $("p").replaceWith("<strong>你最不喜歡的水果是?</strong>"); 3 //同樣的實現： 4 $("<strong>你最不喜歡的水果是?</strong>").replaceAll("p");7、包裹節點
1 //使用wrap()方法 2 $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起來。即<b><p title="choose your favourite fruit" >你最喜歡的水果是?</p></b>8、屬性操作
1 //使用attr()方法來獲取和設置元素屬性2 //設置<p>元素的屬性'title'3 $("p").attr("title","choose");4 5 //獲取<p>元素的屬性'title'6 alert( $("p").attr("title"));7 8 //使用removeAttr()方法來刪除元素的屬性9 //刪除<p>元素的屬性'title' 10 $("p").removeAttr("title");9、樣式操作
此處獲取和修改的是css樣式是class屬性。
1 //1.使用attr()方法來獲取樣式和設置樣式2 $("p").attr("class","hign");//設置<p>元素的class3 alert( $("p").attr("class"));//獲取<p>元素的'class'4 5 //2.使用addClass()方法來追加樣式6 $("p").addClass("another");//給<p>元素追加'another'樣式類7 8 //3.使用removeClass()方法來移除樣式9 $("p").removeClass()("high another");//使用空格來刪除多個樣式 10 11 //使用toggle()方法來控制行為上的重復切換 12 $toggleBtn.toggle(function(){ 13 //顯示元素 14 },function(){ 15 //隱藏元素 16 }) 17 18 //4.toggleClass()方法來控制樣式上的重復切換 19 $("p").toggleClass("another");//重復切換類名"another" 20 21 //5.hasClass()判斷是否含有某個樣式 22 $("p").hasClass("another");10、設置和獲取HTML、文本和值
1 //1.html()方法2 alert($("p").html());//獲取<p>元素的HTML代碼3 $("p").html("<strong>你最喜歡的水果是?</strong>");//設置<p>元素的HTML代碼4 5 //2.text()方法6 alert($("p").text());//獲取<p>元素的文本7 $("p").text("你最喜歡的水果是?");//設置<p>元素的文本8 9 //3.val()方法 10 alert($(this).val());//獲取按鈕的value值 11 $(this).val("我被點擊了!");//設置按鈕的value值 12 13 //focus()方法相當于js中的onfocus()方法，blur()方法相當與js中的onblur()方法 14 //defaultValue屬性包含該表單元素的初始值11、遍歷節點
children()方法用于取得匹配元素的子元素集合。
next()方法取得匹配元素后面緊鄰的同輩元素。
prev()方法取得匹配元素前面緊鄰的同輩元素。
siblings()方法取得匹配元素前后所有的同輩元素。
12、CSS-DOM操作
此處獲取和修改的是css樣式是style屬性。
主要有css()方法、width()方法、height()方法、offset()方法、position()方法、scollTop()和scroLeft()方法等。
1 //此處獲取和修改的是css樣式是style屬性 2 //使用css()方法獲取或者設置元素的樣式屬性 3 alert($("p").css("color"));//獲取<p>元素的color 4 $("p").css("color","red");//設置<p>元素的color第四章 jQuery中的事件和動畫
jQuery中的事件
1、加載DOM
1 //jQuery代碼： 2 $(window).load(function(){ 3 //編寫代碼 4 }) 5 //等價于JavaScript代碼： 6 window.οnlοad=function(){ 7 //編寫代碼 8 } 1 $(document).reday(function(){ 2 //編寫代碼 3 }) 4 //等價于 5 $(function(){ 6 //編寫代碼 7 })2、事件綁定
在文檔裝在完成后，如果打算為元素綁定事件來完成操作，則可以使用bind()方法來對匹配元素進行特定事件的綁定，bind()方法的調用格式為：
bind(type [, data], fn);
1 $(function(){2 $("#panel h5.head").bind("click",function(){3 $(this).next().show();4 })5 })6 //可以簡寫為：7 $(function(){8 $("#panel h5.head").click(function(){9 $(this).next().show(); 10 }) 11 })3、合成事件
jQuery有兩個合成事件：hover()方法和toggle()方法。
hover()方法用于模擬光標懸停事件，語法結構為hover(enter,leave)，當光標移動到元素上是，會觸發指定的第1個函數（enter）；當光標移出這個元素時，會觸發指定的第2個函數（leave）。
1 $(function(){ 2 $("#panel h5.head").hover(function(){ 3 $(this).next().show(); 4 },function(){ 5 $(this).next().hide(); 6 }) 7 })toggle()方法用于模擬鼠標連續單擊事件，語法格式為toggle(fn1,fn2,...fnN)，每次單擊元素，都會依次執行fn。
1 $(function(){ 2 $("#panel h5.head").toggle(function(){ 3 $(this).addClass("highlight"); 4 $(this).next().show(); 5 },function(){ 6 $(this).removeClass("highlight"); 7 $(this).next().hide(); 8 }); 9 })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])方法
1 //移除click中的所有事件 2 $('#delAll').click(function(){ 3 $('#btn').unbind("click");//移除click中的所有事件 4 }); 5 6 //移除click中的myFun2事件 7 $('#delTwo').click(function(){ 8 $('#btn').unbind("click",myFun2);//移除click中的myFun2事件 9 });7、模擬操作
trigger()方法完成模擬操作
1 $('#btn').trigger("click");//模擬單擊操作 2 //可簡寫為 3 $('#btn').click();jQuery中的動畫
1、show()方法和hide()方法
show()方法會將元素的display樣式改為"block"或者"inline"，hide()方法會將元素的display樣式改為"none"。方法中可以帶參數來控制顯示或者隱藏的速度。
1 $(function(){ 2 $("#panel h5.head").toggle(function(){ 3 $(this).next().hide(); 4 },function(){ 5 $(this).next().show(); 6 }) 7 })2、fadeIn()方法和fadeOut()方法
fadeIn()方法和fadeOut()方法改變元素的不透明度，即淡入淡出效果。
1 $(function(){ 2 $("#panel h5.head").toggle(function(){ 3 $(this).next().fadeOut(); 4 },function(){ 5 $(this).next().fadeIn(); 6 }) 7 })3、slideUp()方法和slideDown()方法
slideUp()方法和slideDown()方法會改變元素的高度，slideUp()方法由上到下縮短隱藏，slideDown()由上至下延伸顯示。
1 $(function(){ 2 $("#panel h5.head").toggle(function(){ 3 $(this).next().slideUp(); 4 },function(){ 5 $(this).next().slideDown(); 6 }) 7 })4、自定義動畫animate()
1 $(function(){ 2 $("#panel").click(function(){ 3 $(this).animate({left: "500px"}, 3000); 4 }) 5 })第五章 jQuery對表單、表格的操作及更多應用
1 //復選框全選或不全選2 $("#CheckedAll").click(function(){3 //所有checkbox跟著全選的checkbox走4 $('[name=items]:checkbox').attr("checked", this.checked );5 });6 7 $('[name=items]:checkbox').click(function(){8 //定義一個臨時變量，避免重復使用同一個選擇器選擇頁面中的元素，提升程序效率。9 var $tmp=$('[name=items]:checkbox'); 10 //用filter方法篩選出選中的復選框。并直接給CheckedAll賦值。 11 $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length); 12 }); 13 14 //表格奇偶行才一共不同的樣式 15 $("tr:odd").addClass("oddTr"); //給奇數行添加oddTr樣式 16 $("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])。
1 //無參數傳遞，則是get方式；有參數傳遞，則是post方式2 $(function(){3 $("#send").click(function(){4 $("#resText").load("test.html",function (responseText, textStatus, XMLHttpRequest){5 alert( $(this).html() );//在這里this指向的是當前的DOM對象，即 $("#iptText")[0]6 alert(responseText);//請求返回的內容7 alert(textStatus);//請求狀態：success，error8 alert(XMLHttpRequest);//XMLHttpRequest對象9 }); 10 }) 11 })$.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高。
?
1 $(function(){2 $("#send").click(function(){3 $.post("get3.php", { 4 username : $("#username").val() , 5 content : $("#content").val() 6 }, function (data, textStatus){7 var username = data.username;8 var content = data.content;9 var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>"; 10 $("#resText").html(txtHtml); // 把返回的數據添加到頁面上 11 },"json"); 12 }) 13 })$.getScript()方法和$.getJSON()方法
$.getScript(url[,data][,callback])方法，相當于$.get()方法的Script版本，相當于指定type參數為"script"；$.getJson(url[,data][,callback])方法，相當于$.get()方法的Json版本，相當于指定type參數為"json"；
1 $(function(){ 2 $.getScript('jquery.color.js',function(){ 3 $("<p>加載JavaScript完畢</p>").appendTo("body"); 4 $("#go").click(function(){ 5 $(".block").animate( { backgroundColor: 'pink' }, 1000) 6 .animate( { backgroundColor: 'blue' }, 1000); 7 }); 8 }); 9 })?
1 $(function(){2 $('#send').click(function() {3 $.getJSON('test.json', function(data) {4 $('#resText').empty();5 var html = '';6 $.each( data , function(commentIndex, comment) {7 html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';8 })9 $('#resText').html(html); 10 }) 11 }) 12 })$.ajax()方法
$.ajax()方法的語法格式為：$.ajax(options)，參數以key/value的形式存在。
其中url表示發送請求的地址；dataType表示預期從服務器返回的數據類型；type表示請求方式，默認為GET；data表示發送到服務器的數據；async表示發送同步/異步請求，默認為true，表示異步；success表示請求成功后調用的回調函數；error表示請求失敗時調用的回調函數。
注意：同步請求將鎖住瀏覽器，用戶的其他操作必須等待請求完成后才可以繼續執行。
Cookie與Session的區別：
Cookie是早期的會話跟蹤技術，它會將信息保存到客戶端瀏覽器中。瀏覽器訪問網站時會攜帶這些cookie信息，達到鑒別身份的目的。
Session是在Cookie的基礎上建立起來的會話跟蹤技術，它將信息保存在服務器端。Session中能夠存儲負責的Java對象，因此使用更加方便。Session依賴于名為JSESSIONID的Cookie。
轉載于:https://www.cnblogs.com/asdyzh/p/9815651.html
總結
以上是生活随笔為你收集整理的锋利的jQuery学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android的UI性能优化
- 下一篇： OSGB压缩算法有哪些？