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/jQuery 表单美化插件小结
Feb 14 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
DOM事件探秘篇
Feb 15 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 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 syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php中define用法实例
2015/07/30 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
Javascript的闭包详解
2014/12/26 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
python调用百度API实现人脸识别
2020/11/17 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
运动会通讯稿50字
2014/01/30 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
小学生交通安全寄语
2015/02/27 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书