<!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. ACM数据结构-树状数组

    模板: int n; int tree[LEN]; int lowbit(int x){ return x&-x; } void update(int i,int d){//index,del ...

  2. SpringCloud基本模块分配搭建以及负载均衡

    springcloud是基于springboot的一套微服务的解决方案,springboot可以快速构建单个应用服务,而springcloud没有重复造轮子而是将现有的技术(服务发现,负载均衡等)整合 ...

  3. Java8中HashMap扩容算法小计

    Java8的HashMap扩容过程主要就是集中在resize()方法中 final Node<K,V>[] resize() { // ...省略不重要的 } 其中,当HashMap扩容完 ...

  4. MySql的执行计划

    一.什么是数据库执行计划: MySQL执行计划是sql语句经过查询优化器后,查询优化器会根据用户的sql语句所包含的字段和内容数量等统计信息,选择出一个执行效率最优(MySQL系统认为最优)的执行计划 ...

  5. MySQL数据库中文乱码问题

    mysql> select * from books; +-----+---------------------------------+---------+-------------+---- ...

  6. eclipse右键空白、eclipse提示空白

    右键选择菜单经常显示空白.要试好多次才会出来.eclipse无法启动.启动报错 查看eclipse安装目录下的.metadata下的.log 里面会记录eclipse的报错信息 一般显示空白问题都是因 ...

  7. [Web] 取消Promise

    转载自 为Promise插上可取消的翅膀 const makeCancelable = (promise) => { let hasCanceled_ = false; const wrappe ...

  8. Emotion Recognition Using Graph Convolutional Networks

    Emotion Recognition Using Graph Convolutional Networks 2019-10-22 09:26:56 This blog is from: https: ...

  9. Running MYSQL 5.7 By Bash On Ubuntu On Windows：ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

    root@PC-RENGUOQIANG:/usr/sbin# /etc/init.d/mysql start * Starting MySQL database server mysqld [ OK ...

  10. 多线程--同步--方法块和同步块synchronized

    package com.sxt.syn; /** * 线程安全: 在并发时保证数据的正确性.效率尽可能高 * synchronized * 1.同步方法 * 2.同步块 * * */ public c ...