|
|
|
|
|
|
jQuery.one() 與 jQuery.on() 區別詳解【實例演示】
作者:admin 時間:2022-4-8 15:34:8 瀏覽:jQuery.one() 與 jQuery.on() 這兩個方法，在jQuery編程中經常會用到，本文將通過具體實例來演示，它們之間的不同之處。
首先我們看看實例的效果圖。
jQuery.one()方法
jQuery.on()方法
從圖示看到，使用jQuery.one()方法時，點擊鼠標事件只能觸發一次，而使用jQuery.on()方法時，點擊鼠標事件會一直被觸發。
實例代碼
使用jQuery.one()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.one()</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
});
</script>
</head>
<body>
<p>點擊我放大字體</p>
</body>
</html>
one() 方法為被選元素添加一個或多個事件處理程序，并規定當事件發生時運行的函數。
當使用 one() 方法時，每個元素只能運行一次事件處理程序函數。
語法
$(selector).one(event,data,function)
使用jQuery.on()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.on()</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
$(this).animate({fontSize:"+=6px"});
});
});
</script>
</head>
<body>
<p>點擊我放大字體</p>
</body>
</html>
on() 方法在被選元素及子元素上添加一個或多個事件處理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 代碼庫。
語法
$(selector).on(event,childSelector,data,function)
您可能對以下文章也感興趣
- jQuery $('document').on() 比 $('body').on() 速度快
- JS中文簡繁體轉換【演示-源碼下載】
- jQuery find("#id")與find(".class")實例分析與比較
- JQuery計算HTML元素子元素(child elements)
- 鼠標點擊輸入框時高亮顯示邊框顏色【jquery和css實現】
- JQuery使用append()函數動態創建和應用CSS樣式
- JQuery獲取/添加/刪除HTML控件的CSS類名(class name)
- $.ajax() data{} 傳參三種常見寫法及ajax()方法參數詳解
- JQuery如何把JSON字符串轉為JSON對象
- 使用HTML5和JQuery讀取CSV(Text)文件的實例
- HTML5和JQuery裁剪圖像實時預覽縮略圖并上傳
- HTML5和JQuery實現多圖片上傳預覽
- 使用HTML5和JQuery獲得上傳圖片大小尺寸（高和寬）
- 下拉菜單/下拉列表鼠標提示ToolTip【JQuery實現】
- 如何用JQuery刪除或清空下拉列表的選項
- 怎樣使用JQuery動態增加下拉列表選項（option）
- 如何使用JQuery動態填充下拉列表（DropDownList）或下拉菜單
- 實例：使用jQuery插件TableDnD拖放HTML表(table)行
- 使用jQuery計算子元素(child elements)
- 使用jQuery setInterval函數延遲5秒后跳轉到另一個頁面
相關文章
x
