<!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. 关于STM32 Flash的一些问题

    注:本人感觉是STM32 Flash本身的问题. 最近做STM32的远程升级,保存到Flash里面,用于记录更新状态的信息总是无故的清理掉 最终测试发现 STM32的 Flash 擦除操作 并不一定会 ...

  2. Mysql8.0 创建远程登陆账户

    mysql8和原来的版本有点不一样,8的安全级别更高,所以在创建远程连接用户的时候, 不能用原来的命令(同时创建用户和赋权): mysql>grant all PRIVILEGES on *.* ...

  3. cogs 944. [東方S3] 藤原妹红

    二次联通门 : cogs 944. [東方S3] 藤原妹红 /* cogs 944. [東方S3] 藤原妹红 最小生成树 + 树形dp 首先对原图跑最下生成树 后建出一棵树 在树上进行dp 先走到叶子 ...

  4. 【JZOJ6230】【20190625】梦批糼

    题目 一个$n\times m \times l $的立方体,有一些位置有障碍 一次操作会随机选择一个立方体,共有\(w\)次操作 询问所有操作都不选到障碍点,被选到至少一次的点的期望 $n ,m,l ...

  5. mysql 层级结构查询

    描述:最近遇到了一个问题,在mysql中如何完成节点下的所有节点或节点上的所有父节点的查询? 在Oracle中我们知道有一个Hierarchical Queries可以通过CONNECT BY来查询, ...

  6. JavaScript初探系列（十）——Event

    一.绑定事件的两种方式 (一).方式一:onclick 举例: <body> <button>点我</button> <script> var btn ...

  7. 阿里云ECS服务器相关配置以及操作---上（初学者）

    最近买了一台阿里云的ECS服务器 linux系统 centos镜像,把我相关的一些操作记录下来,供大家参考,不足之处欢迎指正. 首先买的过程就不用介绍了,根据自己的实际需要选择自己想要的配置,点击付钱 ...

  8. VIM 命令速查表

    今天整理一份 VIM 常用命令速查表,当做给自己备忘. 进入VIM 相关 命令 描述 vim filename 打开或者新建文件 vim +n filename 打开文件并将光标置于第n行行首 vim ...

  9. NioEventLoopGroup源码分析与线程设定

    我的以Netty Socket编程的代码为例, 1.EventLoopGroup 进入EventLoopGroup,这是一个特殊的EventExecutorGroup,在事件循环中,在selectio ...

  10. 阿里巴巴Druid数据源组件

    目前常用的数据源主要有c3p0.dbcp.proxool.druid,先来说说他们Spring 推荐使用dbcp:Hibernate 推荐使用c3p0和proxool1. DBCP:apacheDBC ...