jquery事件绑定

最新推荐文章于 2022-11-29 15:22:14 发布

Tsuyuri kanawu

最新推荐文章于 2022-11-29 15:22:14 发布

阅读量155

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/zwb1365237878/article/details/111594242

版权

笔记专栏收录该内容

41 篇文章 0 订阅

订阅专栏

1.点击事件

<body>
		<button>
			<strong>click to change div content</strong>
		</button>
		<div>娱乐新闻：进击的巨人更新啦</div>
		
		<script src="./js/jquery-3.1.1.js"></script>
		
		<script type="text/javascript">
			//js中所有的事件都是以on开头，去掉on就是jQuery中的事件
			//js中所有功能的使用以属性为基础，jQuery中以函数为基础
			
			//找到标签
			let $btn=$("button");
			//js绑定事件 $btn[0].οnclick=function(){}
			//jQuery绑定事件
			$btn.click(function(event){
				console.log($(this).text());
				console.log($("div").text());
				//event  事件源（包含了该事件的所有信息，只要有事件存在，该事件源对象就默认存在）
				console.log(event.target)
			});
		</script>
	</body>

在这里插入图片描述 2.表单提交事件

<body>
		<form action="">
			<input type="submit" value="提交">
		</form>
		<script src="./js/jquery-3.1.1.js"></script>
		<script type="text/javascript">
			$("form").submit(function(){
				return true;//true 可以提交 false 
			})
		</script>
	</body>

3.onchange事件

<body>
		<input type="text">
		<select name="">
			<option value="">ahei</option>
			<option value="">aha</option>
			<option value="">ahou</option>
		</select>
		<script src="./js/jquery-3.1.1.js"></script>
		<script type="text/javascript">
			$("input").change(function(){
				console.log($(this).val());
			})
			$("select").change(function(){
				console.log(this.selectedIndex)
			})
		</script>
	</body>

在这里插入图片描述 4.ready事件

<button>click</button>

<script src="./js/jquery-3.1.1.js"></script>
		<script type="text/javascript">
			/*//onload 事件只能存在一次，多个会被覆盖 且在DOM结构及图片都加载完毕后才会执行函数中的代码
			window.οnlοad=function(){
				$("button").click(function(){
					alert("------");
				})
			}
			
			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>

在这里插入图片描述

5.焦点事件

<body>
		<input type="text">
		
		<script src="./js/jquery-3.1.1.js"></script>
		<script type="text/javascript">
			
			/*//焦点事件 鼠标点击input框变色
			$("input").focus(function(){
				$(this).css("backgroundColor","darkblue");
			})
			//失去焦点事件 鼠标移开变回原色
			$("input").blur(function(){
				$(this).css("backgroundColor","#FFFFFF");
			})*/
			
			//on简写
			$("input").on({
				focus:function(){
					$(this).css("backgroundColor","darkblue");
				},
				blur:function(){
					$(this).css("backgroundColor","#FFFFFF");
				}
			})
		</script>
	</body>

在这里插入图片描述

Tsuyuri kanawu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery事件绑定

1.点击事件<body> <button> <strong>click to change div content</strong> </button> <div>娱乐新闻：进击的巨人更新啦</div> <script src="./js/jquery-3.1.1.js"></script> <script type="text/javascript"&g
复制链接

扫一扫