jQuery中API、事件和多庫共存是什么意思

這篇文章將為大家詳細講解有關jQuery中API、事件和多庫共存是什么意思，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

API

prop() 和 attr()

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

val()

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

width() 和 height()

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

offset()

獲取：返回值 {left: Number, top: Number}是相對于 document 的位置。
設置：如果元素沒有定位（即 position: static），將會修改為 relative。

position()

獲取匹配元素相對于其最近的具有定位（即position不是static）的父元素的位置{left: Number, top: Number}，不能設置。

scrollLeft() 和 scrollTop()。

獲取或者設置元素水平和垂直方向的位置，數值類型。

垂直滾動條位置 是可滾動區域 在 可視區域上方的 被隱藏區域的高度。

如果滾動條在最上方沒有滾動 或者 當前元素沒有出現滾動條，那么這個距離為0。

事件

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

bind()在1.7以后被on()取代，綁定多個事件：$(selector).on('dblclick contextment', function(){}); on()也兼容zepto。但是這兩種方法的缺點是要綁定的元素必須存在文檔中。

語法： $(selector).on('events'[, 'selector'][, data], handler); 其中第一個參數可以是標準事件名，也可以是自定義事件（通過trigger觸發），第二和第三個參數可以省略，第二個參數為匹配元素的后代元素，第三個參數為傳遞給處理函數的數據，即在函數中通過 event.data 來接收。

delegate() 支持對動態創建的元素有效。

語法：$('p').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 鼠標相對于文檔左部邊緣的位置

鏈式編程

原理： 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>

關于“jQuery中API、事件和多庫共存是什么意思”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。