jQuery中delegate()方法用法实例


Posted in Javascript onJanuary 19, 2015

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

此方法为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行的函数。

语法结构:

$(selector).delegate(childofselector,type,data,function)

参数列表:

参数 描述
childofselector 定义要附加事件处理程序的一个或多个子元素。
type 可选。定义附加到元素的一个或多个事件类型。由空格分隔多个事件值。
data 定义传递到事件处理函数的额外数据。
function 定义当事件发生时运行的函数。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" /> 

<title>三水点靠木</title> 

<style type="text/css"> 

li{ 

  list-style-type:none; 

  width:150px; 

  height:150px; 

  border:1px solid green; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("div").delegate("button","click",function(){ 

    $("li").slideToggle(); 

  }) 

}) 

</script> 

</head> 

<body> 

<div> 

  <ul> 

    <li>三水点靠木欢迎您</li> 

  </ul> 

  <button>点击查看效果</button> 

</div> 

</body> 

</html>

以上代码可以div的子元素button元素注册click事件处理函数,当点击按钮的时候能够实现隐藏和显示的切换。

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

Javascript 相关文章推荐
javascript parseInt 大改造
Sep 27 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
canvas绘制的直线动画
Jan 23 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
使用Vue实现一个树组件的示例
Nov 06 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
jQuery中die()方法用法实例
Jan 19 #Javascript
jQuery中live()方法用法实例
Jan 19 #Javascript
jQuery中unbind()方法用法实例
Jan 19 #Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 #Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 #Javascript
jQuery中trigger()方法用法实例
Jan 19 #Javascript
jQuery的one()方法用法实例
Jan 19 #Javascript
You might like
让你的网站首页自动选择语言转跳
2006/12/06 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
实例讲解React 组件
2020/07/07 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
新郎婚宴答谢词
2014/01/19 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
给实习单位的感谢信
2014/02/01 职场文书
数学检讨书1000字
2014/02/24 职场文书
企业文化宣传标语
2014/06/09 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
2014年教务处工作总结
2014/12/03 职场文书
儿子满月酒致辞
2015/07/29 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
人力资源部工作计划
2019/05/14 职场文书