<!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. [RN] React Native :Error: Cannot find module 'asap/raw'

    今天在使用 react-native-dropdownmenus 的时候,安装没问题,但Link的时候 报: Error: Cannot find module 'asap/raw' 朋友们莫慌,一步 ...

  2. BZOJ 1801: [Ahoi2009]中国象棋

    题目描述 //每行每列最多放两个,可以讨论第i-1行到第i行的每一种情况 #include<complex> #include<cstdio> using namespace ...

  3. tomcat做成Windows自启动服务

    一.下载Tomcat 下载Windows版本的tomcat,一般是以zip结尾的包,免安装的包,而Linux包虽然解压可以运行,但是缺少service.bat关键文件,无法做成服务形式 下载网站: h ...

  4. 第08组 Alpha冲刺（6/6）

    队名:955 组长博客:https://www.cnblogs.com/cclong/p/11913269.html 作业博客:https://edu.cnblogs.com/campus/fzu/S ...

  5. Centos7 .net core 2.0安装使用

    一.添加dotnet产品Feed sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'ech ...

  6. java定时任务框架Quartz入门与Demo搭建

  7. The Snowflake Elastic Data Warehouse

    开篇说的是,Shared-nothing当前已经是主流的架构,需要用自身的local disks来存储数据,Tables被水平划分到各个partitions上 这种架构,比较适合star-schema ...

  8. centos7 python2.7升级至python3.5.3版本

    1.wget https://www.python.org/ftp/python/3.5.3/Python-3.5.3.tgz      #下载安装包 2.tar -zxvf Python-3.5.3 ...

  9. phpstudy 首次安装后打开网站 数据库内容 中文乱码

    首次安装完成 phpstudy 后,默认的 my.ini 配置只有数据库文件位置,其他的都没有设置,这时如果想要输出数据库中的中文后,显示到页面上就会变成中文乱码 解决方法: 打开 phpstudy ...

  10. js---省略花括号{}的几种表达式

    在进行js的书写中,对于常见的if,for,while是可以简写,省略花括号{}的: var a = 10,b = 20; /** * if 简写 */ if(a > b) console.lo ...