jQuery基础之事件处理
jQuery基础之事件处理方法，如下图：
代码实现：
<script src="JS/jquery-1.12.4.min.js"></script>
<script>
// 事件代理的第一种方式
// 事件冒泡，子标签的事件会传递给父标签
// 当点击子标签时会将单击事件传递给父标签，导致父标签也执行单击事件
$(function(){
var $div1 = $('#div1');
$div1.click(function(){
alert('父标签' + $div1.html())
});
var $div2 = $('#div2');
$div2.click(function(){
alert('子标签' + $div2.html())
});
});
// 事件代理的第二种方式
// 使用delegate方法完成事件代理 $(function(){
// 获取父标签对象
$div3 = $('#div3');
$div3.delegate('p','click',function(){
// this这是表示子标签元素对象
$(this).css({
color:'red',
width:'300px',
height:'200px',
background:'yellow'
});
});
});
</script> <body>
<div id="div1">111
<div id="div2">22</div>
</div>
<div>
<div id="div3">
<p>使用delegate方法完成事件代理</p>
</div>
</div>
</body>
jQuery基础之事件处理的更多相关文章
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- Jquery基础教程第二版学习记录
本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做 ...
- 第一章 jQuery基础
第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...
- 《jQuery基础教程(第四版)》学习笔记
本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...
- jQuery基础【1】
jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极大地简化了 JavaScript 编程.jQuery 很容易学习.jQuery 库位于一个 JavaSc ...
- Web前端学习笔记之jQuery基础
0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...
- 《jQuery基础》总结
目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...
随机推荐
- Nginx+MySQL+PHP+Redis多机部署（测试发布discuz论坛）
链接:LNMP+Redis单机部署 1.实战多机部署环境 nginx服务器: 192.168.1.3 php服务器: 192.168.1.4 mysql服务器: 192.168.1.10 red ...
- zsh: /usr/local/bin/pod: bad interpreter: /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby: no such file or directory
系统升级为 macOS Catalina 发现 CocoaPods 不管用了. 解决方法: 打开 iTerm2 sudo gem update --system 输入电脑密码,然后 sudo gem ...
- 使用Spring Data JPA的Specification构建数据库查询
Spring Data JPA最为优秀的特性就是可以通过自定义方法名称生成查询来轻松创建查询SQL.Spring Data JPA提供了一个Repository编程模型,最简单的方式就是通过扩展Jpa ...
- 基于jquery的弹幕实现
前几天,需要做一个弹幕展示效果,看了网上很多资料,但是很不凑巧,都不能满足自己的需求和功能点,但是总不能放弃吧,那么就自己写一个,今天把成果分享给大家,首先说一下市面上比较流行的弹幕插件吧: 1.有关 ...
- Spring Data初步--整合Hibernate
Spring Data课程中的技术介绍 Hibernate: Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,它将 pojo 与数据库表建立映射关系 ...
- cmake 简介
CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX下的 ...
- 《手把手教你》系列进阶篇之4-python+ selenium自动化测试 - python几种超神操作你都知道吗？（详细教程）
1. 简介 今天分享和讲解的超神操作,对于菜鸟来说是超神的操作,对于大佬来说也就是几个简单方法的封装和调用.这里讲解和分享这部分主要是为了培养小伙伴们和童鞋们的面向对象的开发思维,对比这样做的好处让你 ...
- 【React】383- React Fiber：深入理解 React reconciliation 算法
作者:Maxim Koretskyi 译文:Leiy https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliat ...
- JavaWeb中的MVC 下
代码较多,请先略过代码,看懂逻辑在研究代码 引入 回顾上一节中的项目,最终的层次结构: 在MVC上中,我们分析了MVC设计模式具备的优点,以及不足,并在其基础上增了Service层用于处理业务逻辑,但 ...
- Redis sorted set 常用命令介绍
Redis sorted set 使用: Redis 有序集合(sorted set) Redis 有序集合和集合一样也是string类型元素的集合,且不允许重复的成员. 不同的是每个元素都会关联一个 ...