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 闭包基础分享
Jul 10 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
js实现微博发布小功能
Jan 12 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
Javascript----文件操作
2007/01/18 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
python遍历数组的方法小结
2015/04/30 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
golang/python实现归并排序实例代码
2020/08/30 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
个人简历自我鉴定
2013/10/11 职场文书
《影子》教学反思
2014/02/21 职场文书
小学节能减排倡议书
2014/05/15 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
陪护人员误工证明
2015/06/24 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP