jQuery的其餘經常使用知識點

選擇器

• :visible 和 :hidden 匹配顯示和隱藏的元素（css-display），須要指明元素或類，由於head、script等元素也是不可見的。
• :animate 處於動畫的元素
• tr:nth-child(even) tr:nth-child(2n) 偶數行，odd 奇數行 3n 隔兩行。（tr:even tr:odd)
• tr:nth-child(1)、tr:first、tr:first-child、$("tr").first() 、$("tr").eq(0) 拿到同樣的
• tr:only-child 只有一個子元素的
• tr:gt(i) 拿到i以後的
• tr:lt(i) 拿到i以前的
• tr:not(".className") 獲取不含指定類的
• input:not(:checkbox) 非複選框的input元素
• tr:contains(text) 獲取包含給定文本的
• tr:empty 獲取無子元素或文本的空元素
• tr:has(selector) 獲取有匹配子選擇器的元素
• tr:parent 獲取含有子元素或者文本的元素
• tr:hidden 獲取全部不可見元素 （經過.show()展現）
• tr:visible 獲取全部的可見元素 （經過.hide()隱藏）
• tr[attribute=value] 屬性選擇器 *= ^= $= !=
• li:has(a) 包含a的li
• 針對表單元素的一些特殊選擇器

:input 匹配的是 <input>，<textarea>，<select>，<button>
:button 匹配 input[type=button|reset|submit]和button
:file  即 input[type=file]，同理還有 :checkbox，:radio
:checked 勾上的單複選框
:disabled 和 :enabled 能和不能點擊或輸入的表單元素
:focus 匹配當前焦點元素
:checkbox:checked:disabled 匹配的是不能點擊的已選中的複選框

API

prop() 和 attr()

prop() 方法用來改變影響DOM元素的動態狀態，而不是改變HTML屬性。好比： disabled、checked

clone()

參數是布爾值，表明是否複製事件，默認false。
$('.item').on('click', function(){});
$('.item').clone(true).appendTo('.list'); // 克隆 .item（包括事件）並添加到 .list

val()

設置或者返回表單元素（input、select、textarea）的值

replaceWith() 和 replaceAll()

<div id="app">hello jquery world.</div>

var $e = $("div").replaceWith("<p>你好，jquery</p>");
返回的是 div#app 的 jQuery 對象，但已從 dom 樹中移除，頁面呈現的是p。

而 $("<p>你好，jquery</p>").replaceAll("#app") 返回的是 p 的jQuery對象。

width() 和 height()

設置或者獲取匹配元素的寬度和高度值，返回的是number（不帶單位），而$(selector).css('width')返回的是string（帶有單位）

offset()

獲取匹配的第一個元素相對於 document 的位置
返回：{left: Number, top: Number}
設置：若是元素沒有定位（即 position: static），將會修改成 relative
注意：jQuery不支持獲取隱藏元素的偏移座標。一樣的，也沒法取得隱藏元素的 border, margin, 或 padding 信息。
若元素的屬性設置的是 visibility:hidden，那麼咱們依然能夠取得它的座標。可是若設置的屬性是 display:none，因爲在繪製 DOM 樹時根本就不繪製該元素，因此它的位置屬性值是 undefined。

position()

獲取匹配的第一個元素相對於其最近的具備定位（即position不是static）的父元素的位置
返回 {left: Number, top: Number}
不能設置。
注意：jQuery不支持獲取隱藏元素的偏移座標及所佔用的邊框，邊距和填充的大小

scrollLeft() 和 scrollTop()

獲取或者設置匹配的第一個元素水平和垂直方向的位置，數值類型

垂直滾動條位置 是可滾動區域 在 可視區域上方的 被隱藏區域的高度。
若是滾動條在最上方沒有滾動 或者 當前元素沒有出現滾動條，那麼這個距離爲0

回頂部代碼 $('html,body').scrollTop(0);兼容IE 和 Chrome，瞬間回到頂部。

事件

標準事件類型

• click mouseup mousedown ...
• keypress ...
• dblclick mousewheel
• change 用在 input select 元素上
• $(window).resize 調整瀏覽器窗口大小時觸發的事件

事件綁定 bind()、delegate() 和 on()

bind()在1.7之後被on()取代，綁定多個事件：$(selector).on('dblclick contextment', function(){}); on()也兼容zepto。可是這兩種方法的缺點是要綁定的元素必須存在文檔中。語法： $(selector).on('events'[, 'selector'][, data], handler); 其中第一個參數能夠是標準事件名，也能夠是自定義事件（經過trigger觸發），第二和第三個參數能夠省略，第二個參數爲匹配元素的後代元素，第三個參數爲傳遞給處理函數的數據，即在函數中經過 event.data 來接收。
delegate() 支持對動態建立的元素有效。語法：$('div').delegate('p', 'mousemove', function(){}); 爲div下面的p（包括將來產生的）綁定mousemove事件。

事件解綁 unbind()、undelegate() 和 off()

不傳參數就解綁匹配元素的全部事件，不然就解綁指定參數的事件。
$(selector).off('click', '**'); 解綁全部代理的click事件，而元素自己的事件不會被解綁。

事件觸發 trigger() 和 triggerHandler()

簡單觸發：$(selector).click();
trigger()觸發事件，觸發瀏覽器行爲。$(selector).trigger("click");
triggerHandler()觸發事件響應方法，不觸發瀏覽器行爲。$(selector).triggerHandler("focus");

事件對象event

event.data 傳遞給事件處理程序的額外數據
event.currentTarget 等同於this，指當前DOM對象
event.target 觸發事件源，不必定是等同this（一般在事件委託中出現）
event.type 事件類型
event.which 鼠標的按鍵類型：左1 中2 右3 或者鍵盤碼
event.keyCode 鍵盤碼
event.pageX 鼠標相對於文檔左部邊緣的位置

動畫

一般第一個參數爲速度（fase、normal、slow、ms），第二個參數爲一個函數，動畫完成後執行。

• show() 和 hide() 實現顯示和隱藏，可同時改變 width、height、opacity。toggle() 切換狀態。
• fadeIn() 和 fadeOut() 淡入淡出，僅改變 opacity
• fadeTo() 按指定透明度進行漸進式調整
• slideUp() 和 slideDown() 卷窗簾效果，僅改變 height。slideToggle() 切換狀態。
• animate() 自定義動畫

動畫的中止與延時 stop()、delay()

AJAX

$.ajax({
    beforeSend(){} // 發送請求以前調用的匿名函數，若是 return false; 就表明阻止該次請求，能夠用於驗證用戶輸入的數據
})

鏈式編程

原理： return this;
一般只有設置操做才能夠鏈式操做，獲取操做時返回相應的值，沒法返回this。
end() 結束當前鏈最近的一次過濾操做，而且返回匹配元素以前的狀態。

多庫共存

jQuery佔用了$ 和jQuery這兩個變量，若是同一個頁面引用了jQuery庫，還引用了其餘庫或者其餘版本的jQuery也用的了$或jQuery這個變量，爲了保證每一個庫都能正常使用，就須要讓jQuery交出變量的控制權。
$.noConflict(); 交出$
$.noConflict(true); 交出$ 和 jQuery

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    // 查看版本
    console.log($.fn.jquery); // 3.2.1
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict();
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict(true);
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 2.2.4
</script>