JQuery绑定click事件的3种写法

最新推荐文章于 2024-05-17 05:20:49 发布
置顶 最新推荐文章于 2024-05-17 05:20:49 发布
阅读量8.7w 收藏 22
点赞数 4
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41542329/article/details/78930083
版权

1.首先你得有jquery 1.7以上的版本的js

2.将js导入项目

3.jsp源码

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="../js/WdatePicker.js"></script>
<link rel="stylesheet" type="text/css" href="../css/WdatePicker.css"> 
<script type="text/javascript">
$(document).ready(function(){
	$("#text").bind("click",function(){
		alert("我的id为text，你点击时触发");
	});
	
	$("#text1").on("click",function(){
		alert("hellworl");
	});
	
	$("#text2").click(function(){
		alert($("#text2").val());
		
	});
});
	
	
</script>
<body>
	
	<input id="text" type="button" value="点击"/> 
	
	<input id="text1" type="button" value="点击"/> 
	
	<input id="text2" type="text" value="love"/> 
</body>
</html>

4.效果图：其他的就不一一测试了

 


 

聆听HJ
关注
  • 4
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制
记录java学习日常~
05-20 7551
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
jQuery注册事件的三种方式
LSSHFF的博客
06-19 1373
// JQ注册事件 // 方式1. $('css选择器').on('事件类型',事件处理函数) - 常用 $('#myDiv').on('click',function () { console.log('div被点击了'); }) // 方式二 $('css选择器').事件类型(事件处理函数) // 注意: .事件类型 没有on $('#myDiv').click(function () { c
JQuery调用绑定click事件的3种写法
10-24
主要介绍了JQuery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
Web前端最全硬核解析，巧用案例学习jQuery框架三种事件绑定方式，2024年最新简短的面试总结
最新发布
2301_76278747的博客
05-17 367
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容如：Jquery对象.cilck();点击事件Jquery对象.mouseover();鼠标移入时触发。
jquery中click事件绑定及移除的几种方法总结
qq_40984495的博客
02-09 2768
jQuery绑定、解绑事件方式总结
【jQuery】jQuery事件
早睡早起长头发的博客
01-15 1128
我是动态创建的p
learning jQuery 学习笔记四（+jQuery 1.4.1 API）--简单的事件
hu_shengyang的专栏
08-31 163
注：本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考 CSS样式： body.large.chapter{ font-size:.1.5em; } 为body标签应用large类，添加类的语句如下所示： $(‘body’).addClass(‘large’); 希望用户在单击id为switcher-large的按钮时执行。因此我们需要引入bind()方...
jquery动态绑定事件的方法_JQuery绑定click事件的3种写法
weixin_39745345的博客
12-03 493
1.首先你得有jquery 1.7以上的版本的js2.将js导入项目3.jsp源码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//...
jQuery绑定事件的三种方法
low1101的博客
12-02 377
bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数： <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></script> </he...
jQuery使用bind函数实现绑定多个事件的方法
10-19
这里，`selector`是匹配元素的CSS选择器，`eventType`是要绑定的事件类型，`function`是事件触发时执行的回调函数，`data`是可选参数，可以传递给事件处理程序的数据，而`handler`是1.4版本后引入的另一种写法，允许...
jQuery实现为动态添加的元素绑定事件实例分析
12-01
像需要用ajax的方式请求远程数据来动态添加页面元素时，显然以上几种绑定事件的方式是无效的，具体写法如下。 $(selector).bind(event,data,function) $(selector).click(function) $("#searchMoveVideoResult ...
浅谈jQuery中事情的动态绑定
10-20
delegate()方法是jQuery提供的一种更高效的方式来替代live()，它可以指定事件绑定的上下文。如下所示： ```javascript $('#container').delegate('.scv','click', function(){ $(this).clone().appendTo('#...
jQuery事件绑定
m0_67388537的博客
07-07 2297
jQuery 事件对象常用属性也与之前学过的 DOM 事件对象几乎一致，多了一个。旧的 jQuery 事件绑定方法如。jQuery 允许给同一个 jQ 对象的同一个事件绑定多个不同的事件处理函数。jQuery 事件中的事件对象通过事件处理函数的形参获取，事件中的。指向绑定事件的 jQuery 对象代表的 DOM 对象，如果使用。等都可以使用第一种方式绑定事件，但也有特殊的如输入框的。方式添加的事件委托，委托事件处理函数中的。上的属性，与原生事件中的事件对象一致。jQuery 事件中的。
jQuery事件绑定与解绑
执笔丶画苍生的博客
08-13 2762
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
jQuery编程学习2（ jQuery 事件注册、处理、对象）
m0_73809176的博客
08-06 367
1. jQuery 事件注册 单个事件注册 2. jQuery 事件处理 2.1 事件处理 on() 绑定事件 语法： on() 方法优势1：可以绑定多个事件，多个处理事件处理程序. on() 方法优势2：可以事件委派操作 。 on() 方法优势3：可以给未来动态生成的元素绑定事件 案例：发布微博案例 ！！！！！ HTML、CSS代码 jQuery代码： 2.2 事件处理 off() 解绑事件 2.3 自动触发事件 trigger() 3. jQuery 事件对象
jQuery基础（事件、其他方法-内容）
weixin_57920269的博客
03-14 414
事件的相关操作、拷贝、多库共存、插件（轮播图、全屏滚动、bootstrap等）
jQuery绑定click事件的三种方式
Nan1mono的博客
09-06 1220
18 $("ul li").bind("click",function () { 19 alert(this.innerHTML); 20 }); 21 22 $("ul").on("click","li",function () { 23 alert("事件委托"); 24 }); 25 $("input").click(function () { 26 $("ul").append("<li>666&.
JavaScript(14) jquery三种点击事件(click、on、bind)
热门推荐
郑清
11-06 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加点击事件</title> <script type="text/javascript" src="js/jquery/jquery-1.11.2.js"></scr...
jquery绑定click事件传递参数
08-12
在jQuery中，绑定click事件并传递参数可以通过以下几种方式实现。首先，如果是通过on方法绑定事件，可以传入四个参数：jQuery.on(events,[selector],[data],fn)。其中，data参数就是用来传递参数的。另外，如果是直接通过click方法绑定事件，可以传入一个参数，也就是一个包含了参数的json对象：jQuery.click([[data],fn])。其中data参数也是用来传递参数的。在绑定函数时，需要声明参数带有event，并将参数以json对象（键值对）的格式传递。在函数内部，可以使用event.data.xxx来引用传递的参数。例如，$("选择器").click(以json对象形式存在的参数, 待绑定函数名称)。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [jquery的click()事件如何传参](https://blog.csdn.net/connie_0217/article/details/78743445)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【JQuery】JQuery绑定事件并传参](https://blog.csdn.net/weixin_45500506/article/details/119547596)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值