Javaweb基础-jQuery事件,Ajax

CoderAji798

已于 2022-02-09 18:09:33 修改

阅读量343

点赞数

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

于 2022-02-06 22:30:17 首次发布

本文链接：https://blog.csdn.net/weixin_46899412/article/details/122801924

版权

Javaweb 专栏收录该内容

20 篇文章 4 订阅

订阅专栏

文本就绪事件

$(document).ready(function(){}) ：ready事件
<script type="text/javascript">
	$(document).ready(function(){
		//文本就绪
	})
</script>
$(function(){}) ：ready事件
<script type="text/javascript">
	$(function(){
		//文本就绪
	})
</script>

鼠标事件

$("").click(function(){})：鼠标单击事件

<script type="text/javascript">
	$(function(){
		$("#input1").click(function(){
			alert("click事件");
		});
		//鼠标单击id为input1的元素时弹窗显示
	})
</script>

$("").mouseover(function(){})，$("").mouseout(function(){})：鼠标移入移出事件

<script type="text/javascript">
	$(function(){
		$("#input1").mouseover(function(){
			$(this).css("color","pink");
		});
		$("#input1").mouseout(function(){
			$(this).css("color","red");
		});
		//鼠标移入id为input1的元素上面字变粉移出变红
	})
</script>

$("").mousedown(function(){})，$("").mouseup(function(){})：鼠标按下松开事件

<script type="text/javascript">
	$(function(){
		$("#input1").mousedown(function(){
			$(this).css("color","pink");
		});
		$("#input1").mouseup(function(){
			$(this).css("color","red");
		});
		//鼠标按下id为input1的元素上面字变粉，松开变红
	})
</script>

键盘事件

$("").keydown(function(){})，$("").keyup(function(){})：键盘按下松开事件

<script type="text/javascript">
	$(function(){
		var txt;
		$("#input2").keyup(function(){
			txt=$(this).val();
			$("#id2").empty().append(txt.length);
		});
		//键盘松开时获取input2的值，把文本长度插入到id2
	})
</script>

表单事件

$("").focus()：获取焦点

<script type="text/javascript">
	$(function(){
		$("#input2").focus();
		//焦点对准input2
	})
</script>

$("").blur()：失去焦点

<script type="text/javascript">
	$(function(){
		$("#input2").blur(function({
            //input2失去焦点时触发function
        }));
		
	})
</script>

$("").select()：选中事件

<script>
    $(function(){
		$("#input1").select(function(){
			alert("选中了");
		});
		//input1被选中
	})
</script>

$("").change()：具有多个选项的表单中使用，如单选，复选框，下拉列表等

<script type="text/javascript">
	$(function(){
		$("input[type='radio']").change(function(){
			console.log($(this).val());
		});
		//输出被选中的多选框的value值
	})
</script>

绑定事件

$("").on()：可以给动态添加的元素绑定事件

<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			$("#div1").append("<div>456</div>");
		});
        //鼠标单击btn1时，给div1追加新标签
		$("#div1").on("click","div",function(){
			$(this).append('hello');
		});
        //鼠标单击新标签时，给新标签追加hello
	})
</script>
</head>
<body>
	<input id="btn1"  type="button" value="a"/><br>
	<div id="div1">123</div>
</body>
</html>

this

this始终指向触发当前事件的对象

<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			$("#div1").append("<div>456</div>");
		});
		$("#div1").on("click","div",function(){
			$(this).append('hello');
            //触发当前时间的对象是div1里面的div元素，因此this指向改div元素
            //所以hello字符串追加到div标签里面
		});
	})
</script>
</head>
<body>
	<input id="btn1"  type="button" value="a"/><br>
	<div id="div1">123</div>
</body>
</html>

Ajax

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

名称描述
url 规定发送请求的 URL。默认是当前页面。
type 规定请求的类型（GET 或 POST）。
data 规定要发送到服务器的数据。
success(result,status,xhr) 当请求成功时运行的函数。
error(xhr,status,error) 如果请求失败要运行的函数。

$.ajax({name:value,name:value,...})
<script type="text/javascript">
	$(function(){
		$.ajax({
			type:"get",
			url:"/getData",
			data:{"name":"value"},
			success:function(value){
				console.log(value);
			},
			error:function(value){
				console.log("获取数据失败");
			}
		});
	})
</script>

CoderAji798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

名称	描述
url	规定发送请求的 URL。默认是当前页面。
type	规定请求的类型（GET 或 POST）。
data	规定要发送到服务器的数据。
success(result,status,xhr)	当请求成功时运行的函数。
error(xhr,status,error)	如果请求失败要运行的函数。