jQuery事件

最新推荐文章于 2023-01-07 11:07:03 发布

katy的小乖

最新推荐文章于 2023-01-07 11:07:03 发布

阅读量248

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/u010918487/article/details/50119955

版权

javaWeb 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<span style="font-size:18px;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 单击事件
		$(":button:first").click(function() {
		//将当前点击的按钮隐藏
			$(this).hide();
		});
		
		// 双击事件
		$(":button:eq(1)").dblclick(function() {
			console.log("fdsfdsfsdf");
			//双击的时候将当前的按钮隐藏
			$(this).hide();
		});
		
		// $(":button:eq(2)").mouseenter(function() {// 鼠标放上去触发
		// $(":button:eq(2)").mouseover(function() { // 鼠标放上去触发
		// $(":button:eq(2)").mousedown(function() { // 鼠标放上去按下鼠标键触发
		// $(":button:eq(2)").mouseout(function() { //鼠标放上去移开触发
		// $(":button:eq(2)").mouseleave(function() { //鼠标放上去移开触发
		//	$(this).hide();
		//});
		/*$("[type='image']").hover(function() {
				// mouseover
				c
			},function() {
				// mouseout
				$(this).attr("src","image/Chrysanthemum.jpg");
		});*/
		
		/*
			toggle(function() {},fucntion() {});
		*/
		
		$("[type='image']").mouseover(function() {
		//当鼠标移过的时候将图片路径设置为image/Tulips.jpg
			$(this).attr("src","image/Tulips.jpg");
		}).mouseout(function(){
		//当鼠标移过的时候将图片路径设置为image/Chrysanthemum.jpg
			$(this).attr("src","image/Chrysanthemum.jpg");
		});
		
		// 键盘按键释放才触发 keyup
		// 键盘按钮按下事件:keydown
		$(document).keydown(function(event) {
			console.log(event.keyCode);
			//当是回车键的时候，回车键的ascii值为13
			if(event.keyCode==13) {
				$(":button:eq(1)").dblclick();//下标为1的按钮触发双击事件
			}
		});
		
		// 下拉列表：内容发生变化的时候触发
		$("#grade").change(function() {
			// 创建option元素的jQuery对象
			var $option = $("<option value='2'>二年级</option>");
			$option.appendTo($(this));//将当前的option追加
		});
		
		// 文本框获取焦点focus(),blur(),change()
		
		// 浏览器滚动条滚动触发
		var json = {"data":[
		            {"src":"Chrysanthemum.jpg"},
					{"src":"Tulips.jpg"}
					]}
		alert(json.data[0].src);
		$(document).scroll(function(event) {
			var $img = $("<img />");
			$img.attr("src","image/"+json.data[0].src);
			$("#box").append($img);//给id为box的div追加img
		});
	});
</script>
<style>
	[type="image"] {
		width:200px;
		height:100px;
		outline:none;
	}
	
	#box {
		width:200px;
		height:auto;
	}
</style>
</head>
<body>
	<input type="button" value="单击" />
	<input type="button" value="双击" />
	<input type="button" value="鼠标放上去" />
	<input type="image" src="image/Tulips.jpg" value="鼠标的hover事件" />
	<input type="button" value="点击我5" /><br/>
	<select id="grade">
		<option value="-1">--请选择--</option>
		<option value="1">一年级</option>
	</select>
	<div id="box">
		<img src="image/Desert.jpg" />
	</div>

</body>
</html></span>

katy的小乖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件

Insert title here $(function() { // 单击事件 $(":button:first").click(function() { //将当前点击的按钮隐藏 $(this).hide(); }); // 双击事件 $(":button:eq(1)").dblclick(function() { console.log("fd
复制链接

扫一扫

专栏目录