jQuery语法知识（表单事件）

最新推荐文章于 2024-05-21 23:21:19 发布

糖糖糖果88

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量402

点赞数 6

分类专栏： jQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_59329828/article/details/135746605

版权

jQuery 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

表单事件

1、focus ( )

触发条件：

获取焦点

作用对象：

focus（）作用对象可以是任意元素

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>		
		<form  >
			<input id="target" type="text" value="field 1">
			<input type="text"  value="field 2">
			
		</form>
	</body>
	<script>
	$(function(){
		$("#target").focus(function(){
			alert("获得焦点");
		})
		})
	</script>
</html>

当选择field 2后，在去选择field 1，就会弹出对话框，因为field 1 获得了焦点

2、blur ( )

触发条件：

失去焦点

作用对象：

blur（）作用对象可以是任意元素

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>		
		<form  >
			<input id="target" type="text" value="field 1">
			<input type="text"  value="field 2">
			
		</form>
	</body>
	<script>
	$(function(){
		$("#target").blur(function(){
			alert("失去焦点");
		})
		})
	</script>
</html>

当选择field 1后，在去选择field 2，就会弹出对话框，因为field 1 失去了焦点

3、change ( )

触发条件：

一个元素的值改变时就会触发

作用对象：

input、textarea、select 仅限于这三种元素

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>	
		<form  >
			<input id="target" type="text" value="field 1">
			<input type="text"  value="field 2">
			
		</form>
	</body>
	<script>
	$(function(){
		$("#target").change(function(){
			alert("内容改变了");
		})
		})
	</script>
</html>

4、select ( )

触发条件：

当用户在一个元素中进行文本选择时就会触发，就是说我们选择了这个元素中的文本就会触发

作用对象：

input、textarea、type=“text” 仅限于这三种元素

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>	
		<form  >
			<input id="target" type="text" value="field 1">
			<input type="text"  value="field 2">
			
		</form>
	</body>
	<script>
	$(function(){
		$("#target").select(function(){
			alert("xuanze");
		})
		})
	</script>
</html>

5、submit ( )

触发条件：

当用户提交表单时就会触发，

作用对象：

只能绑定到form元素上

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>	
		<form id="target" >
			<input  type="text" value="field 1">
			<input type="text"  value="field 2">
			<input type="submit" value="go">
		</form>
	</body>
	<script>
	$(function(){
		$("#target").submit(function(){
			alert("确定提交吗？");
		})
		})
	</script>
</html>