|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
jQuery.one() 與 jQuery.on() 區(qū)別詳解【實(shí)例演示】
作者:admin 時間:2022-4-8 15:34:8 瀏覽:jQuery.one() 與 jQuery.on() 這兩個方法，在jQuery編程中經(jīng)常會用到，本文將通過具體實(shí)例來演示，它們之間的不同之處。
首先我們看看實(shí)例的效果圖。
jQuery.one()方法
jQuery.on()方法
從圖示看到，使用jQuery.one()方法時，點(diǎn)擊鼠標(biāo)事件只能觸發(fā)一次，而使用jQuery.on()方法時，點(diǎn)擊鼠標(biāo)事件會一直被觸發(fā)。
實(shí)例代碼
使用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>點(diǎn)擊我放大字體</p>
</body>
</html>
one() 方法為被選元素添加一個或多個事件處理程序，并規(guī)定當(dāng)事件發(fā)生時運(yùn)行的函數(shù)。
當(dāng)使用 one() 方法時，每個元素只能運(yùn)行一次事件處理程序函數(shù)。
語法
$(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>點(diǎn)擊我放大字體</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中文簡繁體轉(zhuǎn)換【演示-源碼下載】
- jQuery find("#id")與find(".class")實(shí)例分析與比較
- JQuery計算HTML元素子元素(child elements)
- 鼠標(biāo)點(diǎn)擊輸入框時高亮顯示邊框顏色【jquery和css實(shí)現(xiàn)】
- JQuery使用append()函數(shù)動態(tài)創(chuàng)建和應(yīng)用CSS樣式
- JQuery獲取/添加/刪除HTML控件的CSS類名(class name)
- $.ajax() data{} 傳參三種常見寫法及ajax()方法參數(shù)詳解
- JQuery如何把JSON字符串轉(zhuǎn)為JSON對象
- 使用HTML5和JQuery讀取CSV(Text)文件的實(shí)例
- HTML5和JQuery裁剪圖像實(shí)時預(yù)覽縮略圖并上傳
- HTML5和JQuery實(shí)現(xiàn)多圖片上傳預(yù)覽
- 使用HTML5和JQuery獲得上傳圖片大小尺寸（高和寬）
- 下拉菜單/下拉列表鼠標(biāo)提示ToolTip【JQuery實(shí)現(xiàn)】
- 如何用JQuery刪除或清空下拉列表的選項
- 怎樣使用JQuery動態(tài)增加下拉列表選項（option）
- 如何使用JQuery動態(tài)填充下拉列表（DropDownList）或下拉菜單
- 實(shí)例：使用jQuery插件TableDnD拖放HTML表(table)行
- 使用jQuery計算子元素(child elements)
- 使用jQuery setInterval函數(shù)延遲5秒后跳轉(zhuǎn)到另一個頁面
標(biāo)簽: jquery-one方法 jquery-on方法
相關(guān)文章
x
- 站長推薦
