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之网页换肤实现代码
Apr 30 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 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/08/18 国漫
谈谈新手如何学习PHP
2006/12/23 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
php关联数组快速排序的方法
2015/04/17 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
Python运算符重载用法实例
2015/05/28 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python事件驱动event实现详解
2018/11/21 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python多进程使用函数封装实例
2020/05/02 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
德国网上药房:Apotal
2017/04/04 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
可口可乐广告词
2014/03/20 职场文书
残疾人小组计划书
2014/04/27 职场文书
大型营销活动计划书
2014/04/28 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL