`

jquery 中的一个函数one讲解

阅读更多
  最近学习jquery中,发现了一个特殊的函数one,其含义是能让其绑定的事件只执行一次,
马上来看实际的例子:

1)
<a href="#">Click Me Many Times[/a]


 
(function($){

  $(function(){
    
    $("#once").one('click',function(){

      console.log("click once");
    });
                   
  });
    
}(window.jQuery));

   这个例子中,无论点多少次,始终都只显示1次了


2)还可以将多个事件都关联到once中,比如
$("#once").one('mousedown mouseup click',
function(){   
 console.log("click once");
}
);



3 自定义的数据也可以关联到once中,比如
$("#once").one('click',
 { color: 'blue', size : 'xxl' },
 function(e)
{     
   console.log('click once you ' + e.data.size + ' ' + e.data.color + ' rabbit.'); 
   });
      });


4 还可以针对页面中的某些元素的某些事件,只使用一次,比如下面的例子中,
无论点哪一个li元素,始终只对一个元素加了横线,再点其他li则无效果了
 
 Click any item below to cross it out, then click on any other item.
  <ul>
<li>Happy1</li>

   <li>Happy</li>

   <li>Joy</li>

   <li>Joy</li>

  </ul>

function($){

  $(function(){
    
    $("ul").one('click','li',function(e){
		$(this).css('text-decoration','line-through');
    });
                   
  });
    
}(window.jQuery));
3
8
分享到:
评论

相关推荐

    jQuery权威指南-源代码

    《jQuery权威指南》除了理论知识丰富而全面外,它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,包括需求分析、代码实现和结果展示三个部分,而且还包含两个综合性的案例,它的实践性之强是目前...

    jQuery详细教程

    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...

    jquery点击显示更多列表文字.zip

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理以及动画效果。在这个"jquery点击显示更多列表文字.zip"压缩包中,包含了一个使用jQuery实现的点击显示更多列表...

    jquery_method.rar_jquery

    本篇文章将详细讲解jQuery中的事件方法,这些方法是学习jQuery时不可或缺的部分,对于提升Web开发效率有着显著的帮助。 1. **绑定事件(.on())** jQuery的`.on()`方法是最主要的事件绑定方式,它可以处理当前及...

    asp.net结合jquery裁剪图片

    在实现图片裁剪功能时,我们通常会借助jQuery的一个插件——JQuery Cropper。这个插件提供了直观的拖动选择区域,让用户可以自由地裁剪图片。以下是使用该插件的基本步骤: 1. **引入依赖**:在HTML页面中,我们...

    Learning from jQuery

    jQuery为此提供了`.one()`方法,它允许你为元素添加一个仅执行一次的事件监听器。 ### 结论 《Learning from jQuery》这本书深入浅出地讲解了jQuery的核心功能之一——事件处理。通过学习如何监听、触发、移除事件...

    jQuery-1.6-api

    jQuery 1.6 版本是该库的一个重要里程碑,引入了一些新特性和改进。以下是关于jQuery 1.6 API 的详细讲解: 1. **$.fn.extend() 和 $.extend()** - `$.fn.extend()` 用于扩展jQuery对象的方法,使得所有jQuery实例...

    jquery投票工具点击量翻转累加

    在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本教程将详细讲解如何利用jQuery实现一个投票工具,特别是关于点击量翻转累加的功能。 首先,理解...

    jquery中object对象循环遍历的方法

    在遍历对象时,$.each()函数为每个属性提供了一个键值对,其中键是一个字符串(属性名),值是与键相关联的值。$.each()函数接受两个参数:要遍历的对象和一个回调函数。回调函数有三个参数,其中两个是必需的,即...

    Jquery注册事件实现方法

    在`&lt;script&gt;`标签内,有一个匿名函数,这个函数是jQuery的文档就绪($(document).ready)函数,它保证了在页面加载完成后执行其中的代码。 ```javascript $(function () { // 在这里注册事件 }); ``` 在这个函数...

    初窥JQuery(二)事件机制(2)

    JQuery作为一个流行的JavaScript库,它封装了原生JavaScript事件处理的复杂性,并提供了一套更为简洁和强大的事件机制。 在上篇文章中,已经介绍了JQuery的事件机制中的三个概念:加载页面、事件委派和事件切换。本...

    jqury点击事件

    `.click()`接受一个函数作为参数,当用户点击绑定该事件的元素时,这个函数就会被执行。例如,如果你有一个HTML按钮元素`点击我&lt;/button&gt;`,你可以使用以下代码来监听其点击事件: ```javascript $(document).ready...

    jQuery学习总结之jQuery事件

    1. `one()`方法:该方法用于绑定一个事件处理器,但该处理器只会被执行一次,之后即使再次触发该事件,之前绑定的处理器也不会被调用。这对于事件处理后不再需要监听的场景非常有用。 2. `focus()`和`blur()`方法:...

    Jquery基础之事件操作详解

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了许多DOM操作和事件处理。本文将深入讲解jQuery中的事件操作,帮助你更好地理解和应用这些基础知识。 首先,我们来看一下DOM加载事件。在JavaScript中,...

    Web Design All-in-One For Dummies

    《Web设计全攻略》是为初学者和有一定基础的网页设计师提供的一本全面指南,它涵盖了Web设计领域的多个重要方面。这本书旨在帮助读者理解和掌握创建出色网页设计的关键技术和策略。 一、HTML与CSS基础 HTML...

    jQuery封装animate.css的实例

    在这个例子中,`#box`元素将会执行一个名为`bounce`的弹跳动画。 ### 三、jQuery封装animate.css 为了更灵活地控制动画的触发和结束,我们可以使用jQuery来封装animate.css的功能。下面是一个简单的封装示例: ``...

    jquery tools系列 overlay 学习第1/2页

    在jQuery Tools库中,Overlay是一个强大的功能,它允许开发者创建可自定义的弹出层,通常用于显示额外信息、对话框或任何需要突出显示的内容。本篇教程将深入讲解jQuery Tools Overlay的用法,分为两部分,这里是第...

Global site tag (gtag.js) - Google Analytics