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 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php缓冲输出实例分析
2015/01/05 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
python实现合并两个数组的方法
2015/05/16 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
车间班组长岗位职责
2013/11/13 职场文书
企业门卫岗位职责
2013/12/12 职场文书
幼儿教师考核制度
2014/01/25 职场文书
公务员转正考察材料
2014/02/07 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
法语专业求职信
2014/07/20 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis