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 相关文章推荐
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
javascript RegExp 使用说明
May 21 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 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函数解决SQL injection
2006/10/09 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
php实现的用户查询类实例
2015/06/18 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP中Array相关函数简介
2016/07/03 PHP
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python time模块用法实例详解
2014/09/11 Python
Python中join和split用法实例
2015/04/14 Python
python获取外网ip地址的方法总结
2015/07/02 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python__name__原理及用法详解
2019/11/02 Python
python 命名规范知识点汇总
2020/02/14 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
秘书英文求职信
2014/04/16 职场文书
法律顾问服务方案
2014/05/15 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
2016高考感言
2015/08/01 职场文书
python中的装饰器该如何使用
2021/06/18 Python
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL