jQuery的one()方法用法实例

本文实例讲述了jQuery的one()方法用法。分享给大家供大家参考。具体分析如下：

为匹配元素的特定事件绑定一个一次性的事件处理方法。
在语法上one()方法和bind()方法是一样的，它们的不同在于绑定的处理方法的执行次数。

语法结构:


代码如下:

$(selector).one(event,data,function)

参数列表:

参数 描述
type 定义绑定到匹配元素中的事件类型。
如果有多个事件使用空格分隔。
data 可选。传递给事件对象的额外数据对象。
function 定义当事件发生时运行的方法。

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>one()函数-我们</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border:1px solid red
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").one("click",function(){
    $(this).append("添加的内容");
  })
})
</script>
</head>
<body>
  <div></div>
</body>
</html>

点击div之后，可以为div添加指定的内容，但是此事件处理函数只会被执行一次。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery中on()方法用法实例

    本文实例讲述了jQuery中on()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以在匹配元素上绑定一个或者多个事件处理函数. 使用off()方法可以删除on()方法绑定的事件. 语法结构一: 复制代码 代码如下: $(selector).on(events,[selector],[data],fn) 参数列表: 参数 描述 events 一个或多个用空格分隔的事件类型和可选的命名空间. selector 可选.一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序.

  • jQuery中unbind()方法用法实例

    本文实例讲述了jQuery中unbind()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件. unbind()方法如果不带参数,则删除所有绑定的事件. 此方法如果提供了事件类型作为参数,则只删除该类型的绑定事件. 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 语法结构: 复制代码 代码如下: $(selector).unbind(type,function) 参数列表: 参数 描述

  • jQuery中bind()方法用法实例

    本文实例讲述了jQuery中bind()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的特定事件绑定事件处理方法. 在语法上bind()方法和one()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构一: 复制代码 代码如下: $(selector).bind(type,data,function) 参数列表: 参数 描述 type 定义绑定到匹配元素中的事件类型. 如果有多个事件使用空格分隔. data 可选.传递给事件对象的额外数据对象. function

  • jQuery中delegate()方法用法实例

    本文实例讲述了jQuery中delegate()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行的函数. 语法结构: 复制代码 代码如下: $(selector).delegate(childofselector,type,data,function) 参数列表: 参数 描述 childofselector 定义要附加事件处理程序的一个或多个子元素. type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值.

  • jQuery中trigger()方法用法实例

    本文实例讲述了jQuery中trigger()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发匹配元素指定类型的事件. 语法结构一: 规定匹配元素被触发的事件类型. 复制代码 代码如下: $(selector).trigger(event,param1,param2,...) 参数列表: 参数 描述 event 规定指定元素要触发的事件. 可以是自定义事件(使用 bind() 函数来附加),或者任何标准事件. param 可选.传递到事件处理程序的额外参数. 额外的参数对自定义事件特别

  • Javascript与jQuery方法的隐藏与显示

    示例代码很简单,直接奉上,就不多废话了 复制代码 代码如下: <html> <head> <title>denotoggle</title> <style> #box {     width: 100px;     height: 100PX;     background-color: #ddd } .show {     visibility: hidden; } </style> <script src="jqu

  • jQuery中triggerHandler()方法用法实例

    本文实例讲述了jQuery中triggerHandler()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发被选元素的指定事件类型. 从上面定义可以看出此方法和trigger()方法功能上很类似,但还是有巨大区别.以下是主要区别: 1.此方法不会触发浏览器默认事件. 2.此方法触发jQuery对象集合中第一个元素的事件处理函数,不会产生事件冒泡. 3.此方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象. 语法结构: 复制代码 代码如下: $(selector).t

  • jQuery中die()方法用法实例

    本文实例讲述了jQuery中die()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除所有通过live()方法向指定元素添加的一个或多个事件处理程序. 语法结构: 复制代码 代码如下: $(selector).die(type,function) 参数列表: 参数 描述 type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. function 定义当事件发生时运行的函数. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html>

  • jQuery中live()方法用法实例

    本文实例讲述了jQuery中live()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素添加一个或多个事件,并规定当这些事件发生时运行的函数. 特别说明:jQuery1.9已经删除此方法. 语法结构: 复制代码 代码如下: $(selector).live(type,data,function) 参数列表: 参数 描述 type 定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. data 可选.定义传递到事件处理函数的额外数据. function 定义当事件发生时运行的

  • jQuery中prevAll()方法用法实例

    本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $("selector").prevAll(expr) 参数列表: 参数 描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta cha

  • jQuery的one()方法用法实例

    本文实例讲述了jQuery的one()方法用法.分享给大家供大家参考.具体分析如下: 为匹配元素的特定事件绑定一个一次性的事件处理方法. 在语法上one()方法和bind()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构: 复制代码 代码如下: $(selector).one(event,data,function) 参数列表: 参数 描述 type 定义绑定到匹配元素中的事件类型. 如果有多个事件使用空格分隔. data 可选.传递给事件对象的额外数据对象. function

  • jQuery中innerHeight()方法用法实例

    本文实例讲述了jQuery中innerHeight()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域高度. 包括内补白(padding).不包括边框border). 也就是说内部区域的宽度等于width和padding之和. 此方法对可见和隐藏元素均有效. 可以结合innerWidth()方法学习. 语法结构: 复制代码 代码如下: $(selector).innerHeight() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html

  • jQuery中data()方法用法实例

    本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • jQuery中scrollLeft()方法用法实例

    本文实例讲述了jQuery中scrollLeft()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量. 语法结构一: 当scrollLeft()方法没有参数的时候就是获取匹配元素相对滚动条左侧的偏移量. 复制代码 代码如下: $(selector).scrollLeft() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&quo

  • jQuery中each()方法用法实例

    本文实例讲述了jQuery中each()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数. 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的.通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成. each()方法不同于jQuery.each()方法 .each()方法只能够遍历JQuery对象,而jQu

  • jQuery中offset()方法用法实例

    本文实例讲述了jQuery中offset()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: 复制代码 代码如下: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta char

  • jQuery中first()方法用法实例

    本文实例讲述了jQuery中first()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素集合中的第一个元素. 语法结构: 复制代码 代码如下: $(selector).first() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="h

随机推荐