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 24 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
js读取配置文件自写
Feb 11 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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基础知识:控制结构
2006/12/13 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
iOS10推送通知开发教程
2016/09/19 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
ES6 十大特性简介
2020/12/09 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
python递归下载文件夹下所有文件
2019/08/31 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
党委书记岗位职责
2013/11/24 职场文书
初中数学教学反思
2014/01/16 职场文书
4s店活动策划方案
2014/08/25 职场文书
丽江古城导游词
2015/02/03 职场文书
微观世界观后感
2015/06/10 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
一行Python命令实现批量加水印
2022/04/07 Python