<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>jquery事件处理</title>

    <script src="jquery.min.js"></script>

    <style>

        div{

            width: 100px;

            height: 100px;

            background: pink;

        }

        .current{

            background: green;

        }

    </style>

</head>

<body>

    <div>

    </div>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <script>

        $(function(){

            // <!--1  事件处理:on  注册多个事件-->

            // $('div').on({

            //     mouseenter: function(){

            //         $(this).css('background',"blue");

            //     },

            //     mouseleave: function(){

            //         $(this).css('background',"red");

            //     },

            //     click: function(){

            //         $(this).css('background',"purple");

            //     },

            // });

            // 2  如果事件处理的是相同操作，可以如下，表示鼠标进入和鼠标离开都会触发函数

            $("div").on("mouseenter mouseleave",function(){

                $(this).toggleClass("current");//切换增加或者删除类名的操作

            });

            // 3  事件委派：将原本绑定在子元素上的事件绑定到父元素上  $("ul").on('click','li',function(){})  事件绑定在父元素ul上，但触发事件的对象是ul下的子元素li

            // on  【可以给未来创建的元素绑定事件】 比如我先绑定ul元素，由li触发函数，后创建新的li元素，点击新的li元素仍然可以触发函数。即说明给未来创建的元素也绑定了事件

            $("ul").on('click','li',function(){

                alert('略略略略略');

            });

            $("ul").append($("<li>我是新创建的</li>"));

            // 解绑事件：off() 接触on绑定事件

            $('ul').off("click",'li');//解绑委托事件

            $('div').off();//接触div的所有on绑定事件

            // one() 只能触发一次的事件

            $('div').one('click',function(){});

            // 自动触发事件  trigger()  比如轮播图自动播放，音乐自动播放，视频自动播放等

            //1  element.事件()   2 element.trigger("事件")   3 element.triggerHandeler("事件")-----不会触发元素的默认行为，比如光标闪烁行为不会被触发

            // jquery事件对象：element.on(events,[selector],function(event) {})

            // 阻止默认行为：event.preventDefault()  或者return false

            // 阻止冒泡：event.stopPropagation()

        })

    </script>

</body>

</html>

待补充

jQuery基础事件处理的更多相关文章

  1. jQuery基础--事件处理

    2. jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极 ...

  2. jQuery基础之事件处理

    jQuery基础之事件处理方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> < ...

  3. jQuery基础之选择器

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

  4. jquery基础知识汇总

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

  5. jquery基础教程读书总结

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

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

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

  7. 第一章 jQuery基础

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

  8. jQuery系列 第六章 jQuery框架事件处理

    第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...

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

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

随机推荐

  1. 【CSP-S膜你考】最近公共祖先 （数学）

    Problem A. 最近公共祖先 (commonants.c/cpp/pas) 注意 Input file: commonants.in Output file: commonants.out Ti ...

  2. web前端开发高级

    前端高效开发框架技术与应用 Vue 基础Vue 框架简介 MVX 模式介绍Vue 框架概述如何使用 Vue.js 基础语法 实例对象生命周期模板语法计算属性Methods 方法 渲染 列表渲染条件渲染 ...

  3. KVM系统镜像制作

    使用virt-install创建虚拟机并安装GuestOS virt-install是一个命令行工具,它能够为KVM.Xen或其它支持libvirt API的hypervisor创建虚拟机并完成Gue ...

  4. GoCN每日新闻(2019-11-01)

    GoCN每日新闻(2019-11-01) GoCN每日新闻(2019-11-01) 1. Rob Pike 认为 Go 成功的 5 个因素 https://changelog.com/posts/5- ...

  5. python 判断元素是否在一个列表中

    import random val= data=[,,,,] : find=False val=int(input('请输入查找键值(1-9),输入-1离开:')) for i in data: if ...

  6. 《京东上千页面搭建基石——CMS前后端分离演进史》阅读笔记

    一.背景 CMS即内容管理系统,目的是用于快速进行网站建设或者网页开发. 对于京东网站部门来说,CMS核心目的是用来快速开发和上线各种页面,诸如各种垂直频道页. 二.CMS核心目的 进行数据和模板的统 ...

  7. 如何使用gitbook写文档

    本文主要参考资料为该网址:https://github.com/GitbookIO/gitbook/blob/master/docs/setup.md 如何想使用现成的gitbook,网络上虽说可以搜 ...

  8. Gamma阶段第五次scrum meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 张圆宁 #91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91(持续完成) # ...

  9. 【技术博客】Pytorch代码生成

    开发组在开发过程中,都不可避免地遇到了一些困难或问题,但都最终想出办法克服了.我们认为这样的经验是有必要记录下来的,因此就有了[技术博客]. Pytorch代码生成经验文档 关于模型代码的生成,主要思 ...

  10. Django实现自动发布(3发布-安装)

    相对于服务的升级.回退,新部署一个服务要复杂一些,要满足以下要求: 已经运行了服务实例的主机不能重复部署 进程启动需要的配置文件要先同步到主机上 之前的升级.回退都是指进程的操作,不涉及配置文件的变更 ...