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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
javascript demo 基本技巧
Dec 18 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
JS将unicode码转中文方法
May 08 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JQuery删除DOM节点的方法
2015/06/11 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
Python3 replace()函数使用方法
2018/03/19 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
Python PIL图片添加字体的例子
2019/08/22 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
提拔干部考察材料
2014/05/26 职场文书
介绍信的格式
2015/01/30 职场文书
西柏坡观后感
2015/06/08 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
Golang 并发编程 SingleFlight模式
2022/04/26 Golang