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. 使用 Flask 和 Vue.js 来构建全栈单页应用

    在这个教程中,我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来. 简单的来说,如果想在 Flask 中使用 Vue 框架是没有什么问题的. 但在实际中存在一个明显的问题就是 Fla ...

  2. 洛谷P2085——最小函数值

    题目描述 有n个函数,分别为\(F_1,F_2,...,F_n\).定义\(F_i(x)=A_i*x^2+B_i*x+C_i (x∈N*)\).给定这些\(A_i.B_i和C_i\),请求出所有函数的 ...

  3. Git基础用法

    从远程仓库拉取代码: git clone https://xxxx.xxx.xx 进入拉取到代码的路径下,(文件夹中含有 .git 隐藏文件夹) 查看当前是否关联到远git代码管理 git statu ...

  4. drf过滤器、分页器、筛选器的应用

    一.drf 提供的过滤器(ordering) views.py from rest_framework.generics import ListAPIView from . import models ...

  5. IIS+PHP上传文件大小限制和上传时间限制，iis7和iis8上传文件大小限制和上传时间限制

    先说IIS这边的配置                                                                  一:点击站点“管理”下的“配置编辑器”. 二:设 ...

  6. css3学习——一列固定宽度且居中

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 这可能是最容易入门的socket教程了

    前言: 如今,网络编程已然成为了一个后端开发工程师需要具备的核心技能之一.因此,该博客力求提供最简单.通俗的描述方式,来描绘网络编程中常见的知识点,同时附带代码示例,后期会加上具体的抓包分析,实际项目 ...

  8. vue 各种打包坑

    1,报错 Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following ...

  9. 自定义 cell

    自定义 cell 1 什么是自定义 cell 自定义 cell 即 tableView,collectionView,scrollView中的 cell 使用的时候不能满足我们使用 cell 的需求, ...

  10. OA项目之Mybatis多表链接查询

    xml文件: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC & ...