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、事件和多庫共存的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！