jQuery回爐重造之路：技術補坑，常學常新

這不是攻略，只是查漏補缺。

一、選擇器

$("[href$='.jpg']")	所有帶有以 ".jpg" 結尾的屬性值的 href 屬性

$("div#intro .head")    id="intro"的div元素中所有class="head"的元素

$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。

$("tr:even")  所有偶數 <tr> 元素

$("ul li:eq(3)")	列表中的第四個元素（index 從 0 開始）
$("ul li:gt(3)")	列出 index 大於 3 的元素
$("ul li:lt(3)")	列出 index 小於 3 的元素

$("input:not(:empty)")	所有不爲空的 input 元素

$(":contains('W3School')")	包含指定字符串的所有元素

$(selector).offsetParent() 

返回最近的祖先定位元素。
定位元素指的是元素的 CSS position 屬性被設置爲 relative、absolute 或 fixed 的元素。
可以通過 jQuery 設置 position，或者通過 CSS 的 position 屬性

 

二、解決名稱衝突

jQuery 使用 $ 符號作爲 jQuery 的簡介方式。

某些其他 JavaScript 庫中的函數（比如 Prototype）同樣使用 $ 符號。

jQuery 使用名爲 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。

三、事件

$(".a").dbclick(function) 觸發或將函數綁定到被選元素的雙擊事件

delegate()爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

使用 delegate() 方法的事件處理程序適用於當前或未來的元素（比如由腳本創建的新元素）。

$(selector).delegate(childSelector,event,data,function)

用法實例：
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>這是一個新段落。</p>").insertAfter("button");
  });
});

error() 方法觸發 error 事件，或規定當發生 error 事件時運行的函數

$("img").error(function(){
  $("img").replaceWith("
      Missing image!
");
});

one() 方法爲被選元素附加一個或多個事件處理程序，並規定當事件發生時運行的函數。

當使用 one() 方法時，每個元素只能運行一次事件處理器函數。

$("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
});

event.result	包含由被指定事件觸發的事件處理器返回的最後一個值。
event.target	觸發該事件的 DOM 元素。

用法實例
$("button").click(function(e) {
  $("p").html(e.result);
});

$("p, button, h1, h2").click(function(event){
  $("div").html("Triggered by a " + event.target.nodeName + " element.");
});

preventDefault() 阻止默認事件

 

四、效果

slideUp()-向上滑動元素
slideDown()-向下滑動元素
jQuery slideToggle()

fadeIn()-用於淡入已隱藏的元素
fadeOut()-用於淡出可見元素
fadeToggle()-可以在 fadeIn() 與 fadeOut() 方法之間進行切換
fadeTo()-允許漸變爲給定的不透明度（值介於 0 與 1 之間）

$(".a").fadeTo(speed[slow,fast,10ms],opacity[0-1],callback[function]);
jQuery fadeTo() 方法允許漸變爲給定的不透明度（值介於 0 與 1 之間）。

$(selector).animate({params},speed,callback);
1.animate()也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
2.animate()可以把屬性的動畫值設置爲 "show"、"hide" 或 "toggle"：
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});
3.編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的“內部”隊列,逐一運行
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
4.停止動畫
$("#stop").click(function(){
  div.stop();
});
5.由於 JavaScript 語句（指令）是逐一執行的 - 按照次序，動畫之後的語句可能會產生錯誤或頁面衝突，因爲動畫還沒有完成。
爲了避免這個情況，您可以以參數的形式添加 Callback 函數。
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

 五、操作HTML元素和屬性

獲取內容
text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值
:contains() - 選擇器選取包含指定字符串的元素

用法實例：
1.獲取數據中‘.search-panel’的dom元素並填充到$panel容器中，再進行HTML轉義輸出頁面：
  $panel.html($('.search-panel', data).html());
2.$("p:contains(is)")  選擇所有包含 "is" 的 <p> 元素

獲取屬性
attr()與prop()的區別 https://www.cnblogs.com/zhwl/p/3520162.html

1.9.0 開始不建議使用 attr() 來對具有 true 和 false 兩個屬性的屬性進行操作了。

1.原理
attr()使用的DOM的API setAttribute()和getAttribute()方法操作的屬性元素節點
prop()可以理解爲 document.getElementById(el)[name] = value，這是轉化成 element 的一個屬性

2.區別
 1）用prop來設置屬性名，html結構是不會發生變化的。而用attr來設置屬性名，html結構是會發生變化的。

3.使用原則
 1）具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
 2）對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
 3）對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。
 4）通常在獲取或者設置checked，selected，readonly，disabled等的時候使用prop效果更好，減少了訪問dom屬性節點的頻率

4.用法實例：
<input id="chk1" type="checkbox" />是否可見
<input id="chk2" type="checkbox" checked="checked" />是否可見

像checkbox，radio和select這樣的元素，選中屬性對應“checked”和“selected”屬於固有屬性，
因此需要使用prop方法去操作才能獲得正確的結果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，則會出現：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

操作屬性
addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作
css() - 設置或返回樣式屬性
hasClass() -是否有某個類 ，一般用於判斷條件
removeAttr() - 從所有匹配的元素中移除指定的屬性


用法實例
$("#div1").addClass("important blue");//可一次性添加多個類
$("h1,h2,p").removeClass("blue");//可以在不同元素中同時刪除多個類
$("h1,h2,p").toggleClass("blue");
$("p").css("background-color");//返回屬性值
$("p").css({"background-color":"yellow","font-size":"200%"});//一次性修改多個屬性值
if($("p").hasClass("on")){};

元素增減
append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
insertAfter() - 把匹配的元素插入到另一個指定的元素集合的後面。
insertBefore() - 把匹配的元素插入到另一個指定的元素集合的前面。

remove()- 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素
detach()- 移除被選元素，包括所有文本和子節點。保留 jQuery 對象中的匹配的元素，因而可以在將來再使
          用這些匹配的元素。保留所有綁定的事件、附加的數據，這一點與 remove() 不同。

hide() - 隱藏，等價於display:none,dom結構會變化
show() - 顯示
toggle() - 可以在 slideDown() 與 slideUp() 方法之間進行切換

unwrap() - 刪除被選元素的父元素
wrap() - 把每個被選元素放置在指定的 HTML 內容或元素中

用法實例：

function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 創建新元素
var txt2=$("<i></i>").text("love ");     // 通過 jQuery 創建新元素
var txt3=document.createElement("big");  // 通過 DOM 創建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之後插入新元素
}

$("p").remove(".italic");
$("#div1").remove();
$("#div1").empty();//remove可以傳參，empty不能

$("p").unwrap();
$("p").wrap("<div></div>");

 

尺寸獲取
width()-元素的寬度
height()-元素的高度
innerWidth()-元素的寬度（包括內邊距）
innerHeight()-元素的高度（包括內邊距）
outerWidth()-元素的寬度（包括內邊距和邊框）
outerHeight()-元素的高度（包括內邊距和邊框）
outerWidth(true)-元素的寬度（包括內邊距、邊框和外邊距）。
outerHeight(true)-元素的高度（包括內邊距、邊框和外邊距）。

1.display爲none時，jQuery的outerWidth()與原生JavaScript的offsetWidth的區別
  offset()函數用於設置或者返回當前匹配元素相對於當前文檔的偏移，即相對於當前文檔的座標，只對可見元素有效。
  offsetWidth 是javascript 對象屬性
  display爲block時，$('#p1').outerWidth()與$('#p1').get(0).offsetWidth 取的值是相同的
  =width+padding+border;
  display爲none時，上例中$('#p1').outerWidth()=100與$('#p1').get(0).offsetWidth=0;
  $('#p1').outerWidth(true)=width+padding+border+margin;
2.獲取屏幕寬高width(),outerWidth,innerWidth,clientWidth的區別
  https://segmentfault.com/a/1190000010746091
  
  $(window).width()與$(window).height()：獲得的是屏幕可視區域的寬高，不包括滾動條與工具條。
  $(window).width() = width + padding
  $(window).height() = height + padding

  document.documentElement.clientWidth與document.documentElement.clientHeight：
  獲得的是屏幕可視區域的寬高，不包括滾動條與工具條，跟jquery的(window).width()與(window).height()獲得的結果是一樣的。
  document.documentElement.clientWidth = width + padding
  document.documentElement.clientHeight = height + padding

  window.innerWidth與window.innerHeight：獲得的是可視區域的寬高，但是window.innerWidth寬度包含了縱向滾動條的寬度，window.innerHeight高度包含了橫向滾動條的高度(IE8以及低版本瀏覽器不支持)。
 window.outerWidth = width + padding + border + 縱向滾動條寬度
 window.outerHeight = height + padding + border + 橫向滾動條高度 + 工具條高度

 document.body.clientWidth與document.body.clientHeight：document.body.clientWidth獲得的也是可視區域的寬度，但是document.body.clientHeight獲得的是body內容的高度，如果內容只有200px，那麼這個高度也是200px,如果想通過它得到屏幕可視區域的寬高，需要樣式設置，如下：

 offsetWidth & offsetHeight
 返回本身的寬高 + padding + border + 滾動條
 
 offsetLeft & offsetTop所有HTML元素擁有offsetLeft和offsetTop屬性來返回元素的X和Y座標
 1)相對於已定位元素的後代元素和一些其他元素（表格單元），這些屬性返回的座標是相對於祖先元素
 2)一般元素，則是相對於文檔，返回的是文檔座標
 offsetParent屬性指定這些屬性所相對的父元素，如果offsetParent爲null，則這些屬性都是文檔座標
 

 scrollWidth & scrollHeight
 這兩個屬性是元素的內容區域加上內邊距，在加上任何溢出內容的尺寸.
 因此，如果沒有溢出時，這些屬性與clientWidth和clientHeight是相等的。

 scrollLeft & scrollTop指定的是元素的滾動條的位置
 scrollLeft和scrollTop都是可寫的屬性，通過設置它們來讓元素中的內容滾動。
 
 兼容性
 1)window innerWidth 和 innerHeight 屬性與outerWidth和outerHeight屬性IE8以及以下不支持。
 2)測試瀏覽器IE，火狐，谷歌，360瀏覽器，Safari都支持document.documentElement.clientWidth與document.documentElement.clientHeight。

遍歷DOM樹
/*parent()-返回被選元素的直接父元素
parents()-返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
parentsUntil()-返回介於兩個給定元素之間的所有祖先元素

children()-返回被選元素的所有直接子元素
find()-返回被選元素的後代元素，一路向下直到最後一個後代

siblings()-返回被選元素的所有同胞元素
next()-返回被選元素的下一個同胞元素
nextAll()-返回被選元素的所有跟隨的同胞元素
nextUntil()-返回介於兩個給定參數之間的所有跟隨的同胞元素
prev()-
prevAll()-
prevUntil()-

first()-返回被選元素的首個元素
last()-返回被選元素的最後一個元素
eq()-返回被選元素中帶有指定索引號的元素
filter()-允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
not()-返回不匹配標準的所有元素
*/
用法實例:
//返回介於 <span> 與 <div> 元素之間的所有祖先元素
 $("span").parentsUntil("div");
 $("h2").nextUntil("h6");
 $("p").not(".intro"); 

六、AJAX

load 方法:從服務器加載數據，並把返回的數據放入到被選元素中

//{data:與請求一同發送的查詢字符串鍵/值對集合,
//  callback：{responseTxt - 包含調用成功時的結果內容
//              statusTXT - 包含調用的狀態
//              xhr - 包含 XMLHttpRequest 對象}
//}

$(selector).load(URL,data,callback);


用法實例：
$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容加載成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

$.get()  通過 HTTP GET 請求從服務器上請求數據     $.get(URL,callback);
$.post() 通過 HTTP POST 請求從服務器上請求數據    $.post(URL,data,callback);

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

 

 七、定位與偏移

offset() 方法返回或設置匹配元素相對於文檔的偏移（位置），只對可見元素有效
第一個匹配元素的偏移座標，包含兩個整型屬性：top 和 left，以像素計。

position() 方法返回匹配元素相對於父元素的位置（偏移），只對可見元素有效
返回的對象包含兩個整型屬性：top 和 left，以像素計。

$(".btn1").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

$(".btn1").click(function(){
  x=$("p").position();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

scrollLeft() 返回或設置匹配元素的滾動條的水平位置。
滾動條的水平位置指的是從其左側滾動過的像素數。當滾動條位於最左側時，位置是 0。

scrollTop() 方法返回或設置匹配元素的滾動條的垂直位置。
1)scroll top offset 指的是滾動條相對於其頂部的偏移。
2)如果該方法未設置參數，則返回以像素計的相對滾動條頂部的偏移
3)該方法對於可見元素和不可見元素均有效。
4)當用於獲取值時，該方法只返回第一個匹配元素的 scroll top offset。
5)當用於設置值時，該方法設置所有匹配元素的 scroll top offset。

$("div").scrollLeft(100);
$(selector).scrollLeft();