JQuery的事件【六】

最新推荐文章于 2023-04-20 00:48:27 发布
最新推荐文章于 2023-04-20 00:48:27 发布
阅读量191 收藏
点赞数
分类专栏： 前端 Jquery 文章标签： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joss_dzy/article/details/80564855
版权
一．JS与jQuery中的事件：
1. 事件写法的区别：
1) JS：
document.getElementById("btn").onclick  = function() {
};
onclick是一个属性
2) jQuery：
$("#btn").click(function(){
});
click是一个方法

2. 例如：要为一个<input id="btn" type="button" value="提交"/>按钮绑定 点击事件。
二．jQuery中事件的绑定与解绑
1. 单个事件绑定
1) 语法：
jq对象.bind("事件名", 处理函数);

2) id为b1的按钮，绑定一个点击事件：
$("#b1").bind("click", function(){
//代码
});

注：一个元素可以多次绑定同一个事件

2. 单个事件的解绑：
1) 语法：
jq对象.unbind("事件名");

2) id为b2的按钮，解绑点击指定事件：
$("#b2").unbind("事件名");

3. 示例：绑定一个事件
1) 需求：有四个按钮，b1按钮使用以前的事件方式，点击弹出信息。b2按钮没有事件。btnBind按钮点击给b2按钮绑定点击事件。
然后点击b2，查看输出的信息。btnUnbind按钮点击解除b2按钮的点击事件。
2) 代码：
  <body>
        <input id="b1" type="button" value="按钮1"/>
        <input id="b2" type="button" value="按钮2"/>
        <hr/>
        <input id="b3" type="button" value="给按钮2绑定事件"/>

        <input id="b4" type="button" value="给按钮2解除绑定事件"/>

        <script type="text/javascript">
            $("#b1").click(function(){
                alert("1号按钮被点击");
            });
            
            $("#b3").click(function(){
                //参数1：事件名
                //参数2：事件处理函数
                $("#b2").bind("click", function(){
                    alert("2号按钮被点击");
                });
            });
            
            //解除绑定事件
            $("#b4").click(function(){
                //解除一个click事件
                $("#b2").unbind("click");
            });
        </script>

3. 多个事件的绑定：
1) 一个对象绑定多个：
格式：
{
键：值,
键 : 值
} 
JSON对象

jq对象.bind({
事件名: 处理函数,
事件名: 处理函数,
事件名: 处理函数
});

2) 解绑多个事件：
格式：
jq对象.unbind("事件名1 事件名2");

3) 解绑所有事件：
格式：
jq对象.unbind();

4. 示例：有一个文本框为t1，有2个按钮，一个用于绑定文本框事件，一个用于解绑文本框事件。点击按钮btnBind，
同时绑定单击，鼠标移动，鼠标移出事件。事件发生时改变文本框中的内容。点击按钮btnUnbind，先解绑一个click事件，
再解绑所有的事件。
    <input type="text" id="t1" />
    <hr />
    <input type="button" id="btnBind" value="使用绑定事件方式的按钮" />
    <input type="button" id="btnUnbind" value="解绑按钮的点击事件" />
       
        <script type="text/javascript">
        //给文本框同时添加单击，鼠标移入，鼠标移出
            $("#btnBind").click(function(){
                $("#t1").bind({
                    click: function(){
                        $(this).val("我被点击啦");
                    },
                    mouseover: function() {
                         $(this).val("鼠标移入事件");
                    },
                    mouseout: function() {
                         $(this).val("鼠标移出事件");
                    }
                });
            });
            
            $("#btnUnbind").click(function(){
                //解绑一个事件
                //$("#t1").unbind("click");
                //解绑两个
                //$("#t1").unbind("mouseover mouseout");
                //全部解绑
                $("#t1").unbind();

            });

                /*
 * 注意:绑定次数和解绑次数要一致,比如给一个按钮绑定2次,则点击该按钮时会执行两次;所以解绑也要2两次
 */

        </script>

三、事件切换
1. 示例：创建一个DIV，指定宽和高为300px，边框2px,灰色，实线。当鼠标移入背景色发生变化，移出DIV背景色变成另一种颜色。
2. 方式一：使用mouseover和mouseout实现，支持链式写法。
3. 方式二：使用hover，同时支持两个事件
4. 代码：
        <script type="text/javascript">
            //鼠标移入
            /*
            $("#box").mouseover(function(){
                $(this).css("backgroundColor", "red");
            });
           
            //鼠标移出
            $("#box").mouseout(function(){
                $(this).css("backgroundColor", "green");
            });
            */
           
           /*
           //支持链式写法
           $("#box").mouseover(function(){
                $(this).css("backgroundColor", "blue");
            }).mouseout(function(){
                $(this).css("backgroundColor", "pink");
            });
            */
           
           //事件切换方法
           $("#box").hover(function(){
                $(this).css("backgroundColor", "yellow");
           },function(){
                $(this).css("backgroundColor", "black");
           });
        </script>
Joss_dzy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在html中搜索按钮事件,html中<button>绑定点击事件的几种方法介绍
weixin_34177886的博客
06-04 4238
HTML中为button绑定事件的方式有三种。例如以下标签： submit 一、使用jquery进行绑定$('#btn_submit').click(function(){});二、使用原生js绑定，(注意：Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 这类浏览器版本要使用 atta...
jQuery为元素绑定事件
chenqiuqian的博客
07-27 2735
这是bind链式方法，方法.bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数)这个方法跟前面的几个方法有些不一样，这个是给父元素绑定事件，方法父元素.delegate(“事件名字”，“子元素”，事件处理函数)。这是键值对方法，方法.bind({“事件函数”事件处理函数，“事件函数”事件处理函数，“事件函数”事件处理函数})这是bind方法，方法bind(“事件名字”，事件处理函数)；为元素绑定事件的几个方法。...
DOM对象-对元素进行操作
yyy_wj的博客
07-21 289
属性操作 非表单元素的属性 href、title、id、src、className var link = document.getElementById('link'); console.log(link.href); console.log(link.title); var pic = document.getElementById('pic'); console.log(pic....
document.getElementByID('btn').click();
热门推荐
十年之约
02-02 1万+
<input type='button' id='btn' onclick='setoption()' /> document.getElementByID('btn').click();
jQuery事件
qq_48238787的博客
07-24 163
5：事件基础 不懂事件操作，jQuery等于白学在jQuery中一个事件由三部分组成， 事件主角 事件类型 事件过程 jQuery基本事件共有六种 1、 页面事件  2、 鼠标事件 3、 键盘事件 4、表单事件  5、编辑事件  6、滚动事件 5.1：页面事件 在JavaScript中用onload来表示加载文档完成后再执行一个事件 语法：window.οnlοad=function(){……} 在jQuery中使用ready来完成相关操作。 语法: $(function(){……}) 完整写法: $(
JQuery事件
s990420的博客
03-02 210
JQuery事件： jQuery事件是对JavaScript事件的封装，常用事件分类如下： 基础事件： 鼠标事件 键盘事件 表单事件 复合事件： 鼠标光标悬停 鼠标连续点击 一、鼠标事件： 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
jQuery 事件（六）
qq_42502919的博客
05-31 84
标签（空格分隔）： 前端学习 简单事件注册 $(selector).click(handler) //单击事件 $(selector).mouseenter(handler) //鼠标进入事件 $(selector).mouseleave(handler) 可以注册多个事件
jQuery 动画和事件
weixin_65474399的博客
03-21 1104
目录 一，事件 常用的基本事件： 1.加载Dom两种方式 1>.window.onload方式 2>.jQuery方式 3>.两个都有的情况下执行顺序 2.绑定事件的两种方式： 元素.事件名(function(){}) 3.合成事件/事件切换 hover():鼠标悬停合成事件（鼠标放入，鼠标移开两种状态） toggle():鼠标点击合成事件(控制是否显示) 4.事件传播(事件冒泡) 五，事件坐标 offsetX:当前元素左上角 针对整个body的位置 c...
JQuery系列之ajax事件
老__L的博客
11-13 643
ajax事件
六、JS06 jQuery 中的事件与动画
m0_72817617的博客
04-20 675
jQuery 中的基本事件，鼠标事件，键盘事件，浏览器事件，以及绑定事件和移除事件，jQuery 当中的动画，包括控制元素显示与隐藏 show() 方法和 hide() 方法，改变元素透明度 fadeIn() 方法和 fadeOut() 方法，以及改变元素高度的 slideUp()方法 和 slideDown() 方法
jQuery学习5 jQuery事件模型
10-29
### jQuery事件模型详解 #### 一、概述 jQuery 作为一种流行的 JavaScript 库，在简化 DOM 操作的同时也提供了强大的事件处理机制。本篇文章将详细介绍 jQuery 的事件模型及其核心功能，包括如何绑定、解除绑定...
jquery效果事件
07-23
三、jQuery事件 1. 基本事件绑定：jQuery提供了`.on()`方法来绑定事件。例如，`$("#myButton").on("click", function() { ... })`表示当id为"myButton"的元素被点击时，执行匿名函数内的代码。 2. 鼠标事件：常见...
jquery事件介绍
04-05
### jQuery事件介绍 #### 一、概述 jQuery作为一款流行的JavaScript库，极大地简化了Web开发中的许多任务，其中就包括事件处理。通过jQuery，开发者能够更加便捷地为HTML元素添加事件监听器，处理用户交互，并控制...
JQUERY事件大全
12-31
### JQUERY事件大全知识点解析 #### 一、概述 JQuery 是一款优秀的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。本篇文章将详细解读“JQUERY事件大全”中提供的常用事件及其用法...
JQuery事件Demo
08-08
**jQuery事件Demo详解** 在Web开发中，JavaScript的事件处理是构建交互式用户界面的关键技术。jQuery库大大简化了这一过程，提供了丰富的API和方法来处理DOM（文档对象模型）中的事件。本篇文章将深入探讨jQuery...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
Learning jQuery 中文版指南
标签包括 `jquery`、`中文` 和 `基础`，内容涵盖了 jQuery 的下载安装、选择器、事件处理、动画、DOM 操作、Ajax 交互、客户端验证、美化页面元素以及插件开发等多个方面。" 在本书的第一部分，作者引导读者入门 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值