<!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. bzoj1176: [Balkan2007]Mokia cdq

    链接 bzoj 思路 cdq入门题,拆成4个矩阵,然后cdq. 代码 /************************************************************** P ...

  2. phpstudy(小皮面板)和phpstudy2018 配置php的区别

    phpstudy(小皮面板)和phpstudy2018 配置php的区别 一.总结 一句话总结: phpstudy(小皮面板) 和 phpstudy2018 只是引入的php的位置不同,但是核心代码还 ...

  3. html5 input number类型使用整理

      一.  html5 input中的数字number类型, 只能输入整数,如果要输入浮点数呢,可以通过max.min和step去定义. type="number" 数字类型 mi ...

  4. Shared variable in python's multiprocessing

    Shared variable in python's multiprocessing https://www.programcreek.com/python/example/58176/multip ...

  5. 【转】SQL2008 链接Oracle 调用存储过程

    1. SQL链接ORACLE 都是可视化的操作 如下图: 红色框选的是oracle的数据驱动,如果没有这个驱动 那需要单独安装oracle的client端 装完以后就有了. 2.在创建之前,在SQLS ...

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

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

  7. windows mysql 修改配置datadir后 重启报错1067

    修改datadir目录 #datadir=C:/ProgramData/MySQL/MySQL Server 5.6/Data datadir=F:/ProgramData/MySQL/MySQL S ...

  8. how to transfer your linux to new work environment

    tar cvpzf backup.tgz --exclude=/proc --exclude=/lost+found --exclude=/backup.tgz --exclude=/mnt --ex ...

  9. C语言 按位异或实现加法

    /* C语言 按位异或实现加法 */ #include <stdio.h> #include <stdlib.h> #include <string.h> void ...

  10. jzy3D安装到弃坑

    jzy3D从入门到弃坑 觉得有用的话,欢迎一起讨论相互学习~Follow Me 安装 http://www.jzy3d.org/ 官网 选择DL 选择0.9版使用,而不要使用其他版本 具体原因 高版本 ...