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 相关文章推荐
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
cookie的secure属性详解
Apr 08 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
如何使用 vue + d3 画一棵树
Dec 03 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
PHP 数据库树的遍历方法
2009/02/06 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
关于Python的一些学习总结
2018/05/25 Python
python删除文本中行数标签的方法
2018/05/31 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
大学生实习期自我评价范文
2013/10/03 职场文书
土地转让协议书范本
2014/04/15 职场文书
技术负责人岗位职责
2015/02/10 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS