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基础之事件处理的更多相关文章

  1. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  2. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  3. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

  4. Jquery基础教程第二版学习记录

    本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做 ...

  5. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

  6. 《jQuery基础教程(第四版)》学习笔记

    本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...

  7. jQuery基础【1】

    jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极大地简化了 JavaScript 编程.jQuery 很容易学习.jQuery 库位于一个 JavaSc ...

  8. Web前端学习笔记之jQuery基础

    0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  9. 《jQuery基础》总结

    目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...

随机推荐

  1. python_爬虫

    1.网络爬虫    1.定义:网络蜘蛛,网络机器人,抓取网络数据的程序    2.总结:用Python程序去模仿人去访问网站,模仿的越逼真越好    3.目的:通过有效的大量的数据分析市场走势,公司的 ...

  2. Hadoop原生搭建

    版本:(centos7.6) 在开始搭建平台前我已经预装了MySQL ps:MySQL创建用户并授权: grant all privileges on *.* to ' with grant opti ...

  3. 震惊！线上四台机器同一时间全部 OOM，到底发生了什么？

    案发现场 昨天晚上突然短信收到 APM (即 Application Performance Management 的简称),我们内部自己搭建了这样一套系统来对应用的性能.可靠性进行线上的监控和预警的 ...

  4. Thinkphp5——pathinfo的访问模式、路径访问模式

    tp5访问入口文件的时候是,访问public目录下的index.php,那么她真正访问的url到底是什么?如何去访问其他页面,实际上她默认使用的PATH_INFO模式进行访问. PATHINFO模式 ...

  5. css实现input表单验证

    有没有办法只通过css来确定input标签是否有输入? 我有这个想法是因为我想完成一个自动补全的input部件,最基本的功能是: 如果input没有内容,这隐藏下拉框 反之,显示下拉框 我找到了一个也 ...

  6. 3分钟了解ServiceStage 应用智能化运维【华为云分享】

    [摘要] 微服务云应用平台(ServiceStage)是面向企业及开发者的一站式DevOps平台服务,支持基于微服务的应用开发.治理.部署及运维监控的全生命周期管理,并提供大规模容器集群管理及中间件服 ...

  7. 一招教你如何修复MySQL slave中继日志损坏问题

    [摘要]MySQL的Crash safe slave是指slave crash后,把slave重新拉起来可以继续从Master进行复制,不会出现复制错误也不会出现数据不一致. PS:华为云数据库特惠专 ...

  8. jQuery 判断页面对象是否存在

    不能用 if($("#id")){}else{} 因为 $("#id") 不管对象是否存在都会返回 object.   正确使用判断对象是否存在应该用: if( ...

  9. Docker Compose集成式应用组合及service编排

    Compose简介 Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排.其代码目前在 https://github.com/docker/compose 开源.C ...

  10. 升级xcode10.0, 终端运行 运行报错：Print: Entry, “:CFBundleIdentifier”, Does Not Exist

    目录 问题原因 解决方法 终端解决 Print: Entry, ":CFBundleIdentifier", Does Not Exist 第一步: 去官网GitHub下载对应包就 ...