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. lerna式升级

    有段时间没更新博客了,是时候更新一波了. 之前不是vue-next出了吗,然后就去学习了一下,发现整个目录不是那么熟悉了,变成这样了: 于是就这个线索去研究了一下,发下这是用的 lerna + yar ...

  2. 华为云 AI 实战营计划，带你迈上 AI 之路

    当今,AI的开发人才需求呈现极大的供需不平衡.所有开发者都关心,要如何从一名开发者晋升为AI开发者?AI开发能力,是主要的进入障碍.不用慌,华为云推出了 <华为云ModelArts-Lab AI ...

  3. 基于webpack实现多html页面开发框架四 自动写入多入口，自动插入多个htmlWebpackPlugin插件

    一.解决什么问题      1.手写页面多入口,一个一个输入太麻烦,通过代码实现      2.手写多个htmlWebpackPlugin插件太麻烦,通过代码实现 二.多入口代码实现 //读取所有.j ...

  4. 机器学习-Python 01

    机器学习中最常用最流行的语言工具现阶段应该是Python, 这篇文章主要介绍一些常用的Python语法知识.本篇博文适合那些有其他语言基础的程序员们,如果一点基础都没有,我建议先跳过.博主以前是做移动 ...

  5. 使用Docker测试静态网站

    参考书籍 :第一本docker书[澳]James Turnbull  1.Sample网站的初始Dockerfile 文件目录如下: Dockerfile文件代码: 安装nginx 在容器中创建一个目 ...

  6. EditText 无法失焦与失焦后键盘不收缩解决方案

    背景 有一个需求,比方说下图: 点击了上图的Image 区域才可以编辑. 那么我首先想到的就是: android:focusable="false" 不让它获取到焦点不就ok吗? ...

  7. python pyHook安装

    Hook安装 哇 这东西可真费劲  主要有pyhook和pyhook3 两种 每个都要根据系统版本和python版本 分成各种小版本 具体安装 一.可以在cmd 中输入 pip install pyh ...

  8. ARTS-S golang单元测试

    golang单元测试 在$GOPATH的src目录下建目录demo_unittest 在目录demo_unittest下建文件calc.go,内容如下: package demo_unittest f ...

  9. 你不知道的JavaScript（上）this和对象原型（四）原型

    五章 原型 1.[[ Prototype ]] JavaScript 中的对象有一个特殊的 [[Prototype]] 内置属性,其实就是对于其他对象的引用.几乎所有的对象在创建时 [[Prototy ...

  10. (Concurrent)HashMap的存储过程及原理。

    1.前言 看完咕泡Jack前辈的有关hashMap的视频(非宣传,jack自带1.5倍嘴速,高效),收益良多,所以记录一下学习到的东西. 2.基础用法 源码的注释首先就介绍了哈希表是基于Map接口,所 ...