JQ点击事件

最新推荐文章于 2023-03-08 14:46:38 发布
最新推荐文章于 2023-03-08 14:46:38 发布
阅读量2.1k 收藏 2
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HeDashuaithan/article/details/112205766
版权

事件绑定

<script src="./js/jquery-3.1.1.js"></script>
		<script>
			// on事件绑定的方式有两种，第一种是直接给元素绑定事件和普通的绑定没有区别
			// $('button').click(function(){});
			// $('button').on('click',function(){
			// 	console.log($(this).text());
			// })
			// 第二种用法是给后添加进来的元素进行时间绑定
			let userOrders = {
							"code":200,
							"msg":"success",
							"data":[
								{"id":2,"username":"王晨阳","sex":"男"},
								{"id":1,"username":"何沛文","sex":"男"}
							]
						}
			$('button:nth-of-type(1)').click(function(){
				for(let i=0;i<userOrders.data.length;i++){
									//创建行元素及列元素
									let trNode = document.createElement("tr");
									let tdNode01 = document.createElement("td");
									let tdNode02 = document.createElement("td");
									let tdNode03 = document.createElement("td");
									let tdNode04 = document.createElement("td");
									
									//给列元素赋值
									tdNode01.innerHTML = userOrders.data[i].id;
									tdNode02.innerHTML = userOrders.data[i].username;
									tdNode03.innerHTML = userOrders.data[i].sex;
									
									//创建操作栏中的标签
									let spanNode = document.createElement("span");
									let spanNode02 = document.createElement("span");
									spanNode.innerHTML = "编辑";
									spanNode02.innerHTML = "删除";
									
									//将操作用的两个标签添加到操作栏中
									tdNode04.appendChild(spanNode);
									tdNode04.appendChild(spanNode02);
									
									//将列添加到行中
									trNode.appendChild(tdNode01);
									trNode.appendChild(tdNode02);
									trNode.appendChild(tdNode03);
									trNode.appendChild(tdNode04);
									
									//将行元素添加到表格中
									$('table')[0].appendChild(trNode);
								}
			})
			
			// $('span').click(function(){})
			// 语法:$(父元素).on(事件名,选择器,函数)父元素必须要存在
			$('table').on('click','span',function(){
				// 当前对象所在的行进行移除
				// parentNode查找父元素节点
				let trNode=this.parentNode.parentNode;
				trNode.remove();
			})
		</script>

onchange点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQ事件绑定-onchange</title>
	</head>
	<body>
		<input type="text" />
		<select name="" id="">
			<option value="">123</option>
			<option value="">456</option>
			<option value="">789</option>
		</select>
		
		<script src="./js/jquery-3.1.1.js"></script>
		<script>
			$('input').change(function(){
				console.log($(this).val());
			})
			$('select').change(function(){
				console.log(this.selectedIndex);
			})
		</script>
	</body>
</html>

ready事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQ事件绑定</title>
		<script src="./js/jquery-3.1.1.js"></script>
		<script>
			
			// window.οnlοad=function(){
			// 	$('button').click(function(){
			// 		alert("-----");
			// 	})
			// }
			// // onload事件只能存在一次，多个会被覆盖，且在DOM结构及图片都加载完毕后才会执行函数中的代码
			// window.οnlοad=function(){
			// 	$('button').click(function(){
			// 		alert("**********");
			// 	})
			// }
			
			// ready事件是可以多次使用,ready事件实在DOM结构加载完毕后就执行
			$(function(){
				$('button').click(function(){
					alert("----");
				})
			})
			
			$(function(){
				$('button').click(function(){
					alert("*******");
				})
			})
			/*
			onload和ready的区别
					1.onload只能使用一次，ready可以使用多次
					2.执行时机不同(onload实在DOM结构及图片资源加载完后执行，ready是在DOM结构加载完后执行)
			*/
			
		</script>
	</head>
	<body>
		<button>
			click
		</button>
	</body>
</html>

焦点事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQ事件绑定</title>
	</head>
	<body>
		<input type="text" />
		<script src="./js/jquery-3.1.1.js"></script>
		<script>
			// 焦点事件,获取焦点
			// $('input').focus(function(){
			// 	$(this).css("backgroundColor","darkorange");
			// })
			// // 失去焦点事件
			// $('input').blur(function(){
			// 	$(this).css("backgroundColor","white");
			// })
			
			$('input').on({
				focus:function(){
					$(this).css("backgroundColor","darkorange");
				},
				blur:function(){
					$(this).css("backgroundColor","white");
				}
			})
		</script>
	</body>
</html>
我们一起走过的岁月
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery的事件
程序员柒的博客
09-19 1043
本文章简单讲解了jQuery事件，如果本文对你有所帮助请三连支持博主，先赞后看养成习惯。提示：以下是本篇文章正文内容，下面案例可供参考。
jquery 点击完成_jQuery详解
weixin_33957382的博客
01-20 404
Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQu...
jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件
cheng1a的博客
09-05 8580
jQuery绑定点击事件和及监听改变事件的几种方式以及多个元素绑定多个事件
JQ简单的点击事件介绍
Mu_Cloud的博客
05-18 1319
JQ简单的点击事件介绍 点击事件有单击和双击事件，相对于js来说jq用这些事件会比js简单方便的多 最常见的给元素绑定一个点击事件，快捷方法或者on方法 $("#qwq").click（function(){}）快捷方式 方法 事件 $("#qwq").on('click',function(){})on方式 on方式 方法 事件 当然不止单击还有双击事件 $("#qwq").ndblclick（function(){}）快捷方式 方法 事...
jQuery动态绑定事件的方法（超详细）
zy1992As的博客
03-08 4761
以上只是一些常用的jQuery动态绑定事件的方法，jQuery还提供了许多其他方法来处理事件，如.keydown()、.keyup()、.submit()等等。1..on()：这是一个通用的事件绑定方法，可以用于任何事件类型，包括自定义事件。4..delegate()：这是一种早期的事件委托方法，已被.on()取代。5..live()：这是一种早期的事件委托方法，已被.on()取代。3..bind()：这是一个早期的绑定方法，它允许绑定多个事件处理程序，但已被.on()取代。
css3模拟jq点击事件的实例代码
01-21
今天是一个css3模拟jq点击事件，因为我发现，css3中没有类似于，js的点击事件，那么，可不可以仿照jq的效果，类似的做一个呢？主要用到,input里面的radio 单选按钮，然后后面跟一个a标签，让radio覆盖在a上，那为...
JQ 鼠标事件
04-26
1. **点击事件**：包括`click()`, `dblclick()`，分别对应单击和双击。 2. **鼠标移动事件**：`mousemove()`，当鼠标在元素上移动时触发。 3. **鼠标进入/离开事件**：`mouseenter()` 和 `mouseleave()`，区别于`...
JQ 事件绑定
08-13
在这个例子中，单击任何列表项都会触发事件，而无需为每个项单独绑定。 ### 5. 事件对象 在事件处理函数中，jQuery 会传递一个事件对象，其中包含了有关事件的详细信息，如事件类型、目标元素等： ```javascript ...
Jq 点击滚动
11-22
总的来说，“Jq 点击滚动”是一个典型的前端开发实践，涉及到了jQuery的选择器、事件处理、动画制作等多个关键知识点。掌握这个技能对于提升网页交互性和用户体验大有裨益。通过不断地学习和实践，开发者可以创建更...
JQuery绑定click事件的3种写法
热门推荐
聆听
12-29 8万+
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 Tr...
jQuery入门
weixin_43926272的博客
03-23 390
入门jQuery "作为一个在编程学习路上的赶路来说，我不喜欢在网上查阅的资料内容太过冗余，看着累，学者也难。所以写的这一篇关于jQuery的文档，我想用最直接的方法告诉大家，它的使用方法以及底层逻辑原理。如果有哪些知识点有错误还望各位大佬，多多包涵指教… 一、什么是jQuery 在我们认识什么jQuery以前，我们先了解一下JavaScript库的概念。生活中有仓库这个概念，仓库里面可以放很多的东西，我们用的时候去仓库里找这些东西就能够使用。同理JavaScript库也
jq 触发按钮点击事件
damei2017的博客
12-18 8785
$("#a").trigger("click");  
jq点击切换隐藏显示
qq_35606790的博客
06-17 5795
先引入jquery.js 点击自动切换显示或隐藏 .hidden { display:none; } .block { display:block; } <button style="display:none;"></button>/默认隐藏* */ <p>123456789</p> 在加入代码： <script ty...
jq 模仿点击事件
小米粒的博客
11-09 2566
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt;   &lt;inpu
jquery添加click事件，jq动态添加click事件多种方式分享
请告诉他
11-12 5441
目录： 添加方式 实例演示 其中方式有一下几种 $("#ImId1").click(function(){}); $("#ImId2").bind("click",function(){}) $("#ImId3").on("click",function(){}) $("body").delegate("#xxx","click",function(){}) 实例演示： 导入jq <script type="text/javascrip...
jq 模拟点击事件，自动触发
weixin_44000635的博客
06-26 6909
$('#id').trigger("click");
js/jq 点击按钮显示div,点击页面其他任何地方隐藏div
Ice Yang的博客
11-27 1万+
js和jq两种方法 点击按钮显示div,点击页面其他任何地方隐藏div
调用jq点击事件不生效
最新发布
05-09
可能有多种原因导致 jq 点击事件不生效，以下是一些常见的解决办法： 1. 确认你的页面已经加载了 jQuery 库，可以在控制台输入 `$` 看看是否返回了 jQuery 对象。如果没有加载 jQuery 库，可以在 `head` 标签中添加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值