jQuery事件处理与绑定

最新推荐文章于 2022-08-13 17:43:05 发布
最新推荐文章于 2022-08-13 17:43:05 发布
阅读量123 收藏
点赞数
分类专栏： java 文章标签： jQuery




（1）示例与介绍

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery类库使用演示</title>
<!-- 引入jquery类库的路径pageContext.request.contextPath表示当前项目的路径 -->
   <script type="text/javascript" src="${pageContext.request.contextPath/js/jquery.js} }" ></script>


</head>
<body>
<input type="text" id="username"><br>
  <input type="button"  id="btnTest" value="事件测试">
   <input type="button"  id="btnTest2" value="取消绑定">
   <input type="button"  id="btnTest3" value="绑定另一个事件">
   <p id="p1">p标签的内容</p>
   <div></div>
   <input type="button"  id="btnTest4" value="追加内容到p标签">
   <input type="button"  id="btnTest5" value="把p标签的内容追加到div中">
       
</body>
       <script type="text/javascript">
         //事件绑定，ready相当于onload事件，页面加载完成后会首先调用被绑定的事件
         $( function(){
                //绑定事件,绑定的是单击事件，
                $("#btnTest").bind("click",function(){
                      alert("btnTest");
                
                }); 
                //绑定鼠标离开目标位置时触发的事件
                $("#username").bind("mouseout",function(){
                //修改css样式
                   $("#username").css("background","red");
                
                });
                  //绑定鼠标碰到目标位置时触发的事件
                $("#username").bind("mouseout",function(){
                   $("#username").css("background","green");
                
                });
                
                //绑定失去焦点事件
                $("#username").bind("blur",function(){
                   var val=$("#username").val();//取出表中的值
                   if(val==""){
                      alert("请输入用户名称");
                      $("#username").focus();//返回焦点
                      return;
                      
                   }     
                   if(isNaN(val)){
                       alert("强输入数字");
                       $("#username").focus();
                       return;
                   }
                                
                });
                
               //
               $("#btnTest3").bind("click",function(){
                     //绑定btnTest的单击事件
                     $("#btnTest").trigger("click");
                     $("#username").trigger("blur");//触发其失去焦点事件
                     
               });
               
               //hover事件切换,在这里就是在鼠标移动到，以及离开目标位置不用点击鼠标使得光标落在目标位置就可以调用这两个事件，
               //上述2个同样作用的绑定事件可以注释掉了
               $("#username").hover(
                   function(){
                       $("#username").css("background","red");
                   },function(){
                       
                        $("#username").css("background","green");
                   });
                   //append向每个匹配的元素追加内容
                   $("#btnTest4").bind("click",function(){
                        $("#p1").append("追加的内容");
                   });
                   
                   //把所有匹配 的元素追加到另一个指定元素集合中
                  $("#btnTest5").bind("click",function(){
                     
                     $("#p1").appendTo("div");
                     
               });
                   
               
                
             });
            
            //取消绑定
            function test2(){
            //点击取消绑定按钮后，会取消绑定的失去焦点事件
                 $("#username").unbind("blur");
            
            }
       
       </script>
       
       
    
</html>


安静点DGC
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery为元素绑定事件
chenqiuqian的博客
07-27 2711
这是bind链式方法，方法.bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数)这个方法跟前面的几个方法有些不一样，这个是给父元素绑定事件，方法父元素.delegate(“事件名字”，“子元素”，事件处理函数)。这是键值对方法，方法.bind({“事件函数”事件处理函数，“事件函数”事件处理函数，“事件函数”事件处理函数})这是bind方法，方法bind(“事件名字”，事件处理函数)；为元素绑定事件的几个方法。...
jQuery事件绑定与解除绑定实现方法
10-24
在JavaScript的世界里，jQuery库为开发者提供了方便快捷的方式来处理DOM元素的事件，其中包括事件的绑定与解除绑定。本文将深入探讨jQuery中的`bind`和`unbind`方法，以及如何通过它们来实现事件处理。 首先，事件...
jQuery事件绑定与解绑
执笔丶画苍生的博客
08-13 2762
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
jQuery事件处理 on() 绑定事件
vue_ajks的博客
08-12 1344
jQuery事件处理 on() 绑定事件
jQuery事件处理
shao_xuan_的博客
12-18 1783
jQuery事件处理前言事件绑定Query事件处理函数的好处反绑定事件事件触发器trigger触发事件triggerHandler触发事件快捷事件 Event Helpershover：模仿鼠标悬停jQuery中事件对象JQuery中事件对象操作 前言 jQuery在JavaScript基本的事件处理机制的基础上，对其进行了增强和扩展。jQuery不但提供了十分优雅的事件处理语法，而且也对事件处理机制本身作了很大的增强。 如在页面加载事件中，JavaScript使用window.onload()方法，它在页
五、jQuery事件处理
m0_61684063的博客
04-15 911
五、jQuery事件处理
jQuery--解除事件绑定
吴声子夜歌的博客
10-02 3056
解除事件绑定 在元素绑定事件之后，当在某个时刻不再需要该事件处理时，可以解除所绑定的事件。在jQuery中提供了unbind()和undelegate()方法，分别用于解除由bind()和delegate()方法所绑定的事件，通过参数指明需要解除的绑定事件即可。当方法没有提供参数时，表示解除该元素所有的事件绑定。 在jQuery1.7+中提供了off()方法，用于解除由on()、bind()和de...
jQuery事件多次绑定与解绑
xiaouncle的博客
10-18 1074
jQuery事件绑定很常见，相信大家经常会用到click、focus、blur等事件，但是如果对控件的某个事件绑定多个方法会是怎样的结果呢，覆盖、累加、或其他效果？今天我就来验证一下这个疑问并说说如何解绑。 一、jQuery事件多次绑定 <head> <script src="~/Scripts/jquery-1.8.2.min.js"></script...
jQuery的事件绑定
weixin_46287150的博客
12-03 320
jQuery绑定事件 on() one() hover() 事件常用函数 1.on() 1-1基础绑定 语法：元素集合.on( ‘事件类型’ , 事件处理函数) <style> div{ width: 500px; height: 500px; background-color: skyblue; } p{ width: 300px; height: 300px; background-col
【jQuery】jQuery操作之如何绑定事件_05
青春木鱼的博客
07-13 1034
在jQuery中，实现事件绑定有两种方式，一种是通过事件方法进行绑定(仅限常用事件)，另一种是通过on()方法进行绑定(标准)。jQuery的事件和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中的onclick。并且，jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。...............
jQuery绑定事件
qq_49044908的博客
11-12 937
jQuery绑定事件 语法为$(“选择器”).事件名称(事件的处理函数) 对于上面的语法给出解释: $(“选择器”) : 定位dom对象,dom对象可以有多个,这些dom对象都绑定事件了 事件名称 : 就是js中的事件去掉on的部分,例如js中的单击事件是onclick,jQuery中的事件名称就是click 事件的处理函数 : 就是一个function,当事件发生时就会执行函数的内容 例如 : 给id是btn的按钮绑定点击事件 $("#btn").click(function() { alert
jquery事件与绑定事件
01-21
1.首先,我们来看一下经常使用的添加事件的方式: <input type=button id=btn ...只能为一个事件处理函数，在事件处理函数方法中，获取事件对象的方式不同. jQuery中的事件 ready事件： 当页面加载完成后，来执行fun
多种jQuery绑定事件的实现方式
10-22
总的来说，jQuery提供了灵活且强大的事件处理机制，允许开发者轻松地绑定、解绑和管理事件。理解这些不同的方法及其应用场景，能够帮助你编写更加高效和可维护的jQuery代码。无论你是初学者还是经验丰富的开发者，都...
jQuery事件多次绑定与解绑问题实例分析
10-17
本文将深入探讨jQuery中的事件多次绑定与解绑问题，通过实例分析来展示它们的工作原理和使用技巧。 一、jQuery事件多次绑定 在jQuery中，事件绑定通常使用`.on()`, `.click()`, `.bind()`等方法。当一个元素的同一...
jQuery事件绑定和委托实例
10-25
jQuery事件绑定和委托是JavaScript库jQuery中用于处理用户交互的核心机制。这些方法允许开发者在页面元素上添加事件监听器，以便在用户执行特定操作时触发响应。本文将深入探讨jQuery中的四种主要事件处理方法：on()...
基于springboot+vue开发社区医疗服务系统--附毕业论文+源代码+sql（毕业设计）.rar
06-28
本项目是一个基于Spring Boot和Vue开发的社区医疗服务系统，旨在为计算机相关专业的学生提供毕业设计或课程设计的实践机会，同时也适合Java学习者进行项目实战练习。项目资源包括完整的源代码、数据库脚本以及详细的开发说明，并附有参考论文，可直接用于毕业设计。 系统采用Spring Boot框架搭建后台，利用MySQL数据库存储数据，通过JDK、IntelliJ IDEA和Tomcat构建开发环境。经过严格的调试，项目已确保稳定运行，为学习者提供了一个可靠的开发平台。 在功能方面，该系统不仅实现了用户注册与登录、医疗服务预约、健康档案管理、在线咨询等基本功能，还提供了数据统计与分析等高级功能，以满足社区医疗服务的实际需求。学习者可以在现有代码基础上进行修改和扩展，实现更多个性化功能，从而提升自己的编程能力和项目实战经验。
基于 Java 实现的仿windows扫雷小游戏课程设计
06-28
【作品名称】：基于 Java 实现的仿windows扫雷小游戏【课程设计】 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：基于 Java 实现的仿windows扫雷小游戏【课程设计】
uniapp版即时通讯软件 IM社交交友聊天系统 语音视频通话双端APP 聊天交友APP源码 （含搭建教程）-网盘链接下载
最新发布
06-28
源码太大1.1G 修复音视频（官方团队插件，无二次费用），文件发送，公告，签到，发现页，朋友圈删除，轮询客服，马甲等 可内嵌第三方网页连接，后台添加，带完整视频搭建教程 即时通讯聊天交友APP源码 IM带音视频源码。Uniapp前端编译，PHP后台， 安卓苹果APP源码+详细搭建视频。 前端开发语言：uniapp（ 安卓，IOS,WEB共用一套前端代码，极大减小开发成本） 服务器端开发语言: PHP+WebSocket 数据库：MySql + mongodb 前端打包工具：Hbuilder 服务器搭建工具：宝塔+宝塔自带终端（或SSH） 服务器配置： 推荐2核4G宽带5兆以上 服务器系统：Linux Centos 7.6 64位
331ssm_mysql_jsp 小学数学在线测试系统.zip（可运行源码+sql文件+文档）
06-28
本文利用SSM框架结构以及JSP开发技术，实现基于小学数学教学需求的在线测试系统平台的开发设计，通过对应用户需求的分析按照系统的主要用户角色划分为了教师学生及系统管理员用户，借助WEB端实现了题库管理、试卷生成以及成绩查询等功能模块，通过线上平台实现了更加编辑快速的在线测试，可以借助在线测试系统实现课程内容的巩固学习，也提升了教师端出卷和成绩发布的效率。 （1）学生用户 学生用户通过学号登录进入小学数学在线测试系统后可以通过在线测试模块进行在线测试，测试完成后通过成绩查看可以获取到测试结果，同时可以通过公告信息查看到教师发布的公告信息以及考试须知等内容。 （2）教师用户 教师用户通过教师工号登录进入小学数学在线测试系统后，通过题库管理可以按照题目类型进行试题的内容添加，包括单选多项、填空判断等类型，借助试卷管理模块实现在线试卷生成，利用成绩统计可以查看到学生成绩、错题率以及平均分等内容。 （3）管理员用户 管理员用户主要借助系统后台实现教师及学生用户信息的管理，同时可以利用公告管理添加相关的系统管理及系统升级的公告信 关键词： JSP技术；SSM框架；在线测试；题库管理；
jquery事件绑定
09-09
jQuery提供了一种简单和便捷的方式来绑定事件。可以使用on()方法来绑定事件。下面是一个例子： ```javascript $(document).ready(function(){ // 绑定点击事件 $("button").on("click", function(){ // 执行点击...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值