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 sortable效果 代码有错但值得看看
Nov 05 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
js仿微信抢红包功能
Sep 25 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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/10/09 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
房展策划方案
2014/06/07 职场文书
2015年植树节活动总结
2015/02/06 职场文书
年度考核表个人总结
2015/03/06 职场文书
教师远程培训心得体会
2016/01/09 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
python内置进制转换函数的操作
2021/06/02 Python
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL