提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaWeb——jQuery事件

jQuery事件 javaweb
2023-09-14 09:14:08 时间

jQuery事件：01_ready

 onload事件与ready()的区别

1.onload是js中的事件，当页面dom模型完成和需要下载的外部文件和图片下载完成后，才会执行 2.ready()是jquery的方法，当页面dom模型完成后就能执行 ready()先于onload事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ready.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
    	window.onload = function () {
    		$("button").click(function () {
	    		alert(2222);
	    	})
    	}
    	
    </script>
  </head>
  <body>
  
  	<button>按钮</button>
	<script type="text/javascript">
		//定义a()和b()二个方法
		function a(){
			alert("JS方式");
		}
		function b(){
			alert("JQUERY方式");
		}
		/*使用JS方式加载a()方法*/
		window.onload = function () {
			a();
		}
		/*使用jQuery方式加载b()方法*/
		$(document).ready(function() {
		 	b();
		});
		/*使用jQuery最简方式加载b()方法*/
		$(function() {
			b();
		})
		
		//onload事件与ready()的区别
		// 1.onload是js中的事件，当页面dom模型完成和需要下载的外部文件和图片下载完成后，才会执行
		// 2.ready()是jquery的方法，当页面dom模型完成后就能执行
		// ready()先于onload事件
		
	</script>	
	  	
  </body>
</html>

jQuery事件：02_change

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ready.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
	
	<select id="city">
		<option value="bj">北京</option>	
		<option value="sh">上海</option>	
		<option value="gz">广州</option>
	</select>
	
	<script type="text/javascript">
		//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
		$("#city").change(function() {
			console.log($("#city option:selected").val() + ":" + $("#city option:selected").html())
		});
	</script>
		
  </body>
</html>

jQuery事件：03_focus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>focus.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
	
	<input type="text" value="加载页面时获取光标并选中所有文字" size="50"/>	
	
	<script type="text/javascript">
		//加载页面时获取光标并选中所有文字
		$(function () {
			//1.获取光标
			$("input").focus();
			//2.选中所有文字
			$("input").select();
		})
	</script>
  
  </body>
</html>

jQuery事件：04_keyup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>focus.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>

	<script type="text/javascript">
		//当按键弹起时，显示所按键的unicode码
		$(document).keyup(function() {
         console.log(event.keyCode)
    });
	</script>

  </body>
</html>

jQuery事件：05_mousemove

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>focus.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>

	X=<input type="text" id="xID"/>
	<br/>
	Y=<input type="text" id="yID"/>

	<script type="text/javascript">
		//显示鼠标移动时的X和Y座标
		$(document).mousemove(function () {
			$("#xID").val(event.clientX)
			$("#yID").val(event.clientY)
		})
	</script>
	
  </body>
</html>

jQuery事件：06_mouseover_mouseout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>focus.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
	<table border="2" align="center" width="80%" id="tableID">
		<tr>
			<td>张三</td>
			<td>男</td>
			<td>22</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>男</td>
			<td>24</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>男</td>
			<td>26</td>
		</tr>
		<tr>
			<td>周六</td>
			<td>男</td>
			<td>28</td>
		</tr>
	</table>
	
	<hr/>
	
	<img height="120px" src="../images/222.png" style="position:absolute;left:30%;border-style:dashed;border-color:white"/>
	<img height="120px" src="../images/222.png" style="position:absolute;left:60%;border-style:dashed;border-color:white"/>
	
	<script type="text/javascript">
	
		//鼠标移到某行上，某行背景变色
		$("tr").mouseover(function () {
			$(this).css("background-color","pink")
		})
		
		//鼠标移出某行，某行还原
		$("tr").mouseout(function () {
			$(this).css("background-color","white")
		})
		//鼠标移到某图片上，为图片加边框
		$("img").mouseover(function () {
			$(this).css("border","5px solid black")
		})
		
		//鼠标移出图片，图片还原
		$("img").mouseout(function () {
			$(this).css("border","0")
		})
		
	</script>
	
  </body>
</html>

jQuery事件：07_submit 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ready.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  </head>
  <body>
  	
  	<form action="06_mouseover_mouseout.html" method="post">
		用户名：<input type="text"/>
		<input type="submit" value="表单提交"/>
	</form>
	
	<script type="text/javascript">
		//浏览器加载web页面时触发将光标定位于文本框中
		$(function () {
			//1.获取光标
			$(":text").focus();
		})	
	</script>

	<script type="text/javascript">
		//当表单提交前检测
		$("form").submit(function () {
			if ($(":text").val() == "") {
				return false;
			}else{
				return true;	
			}
		})
	</script>
	
  </body>
</html>

相关文章