jquery事件学习（普通，表单事件，及绑定和移除）

最新推荐文章于 2024-04-04 00:19:46 发布

驭乐MJ

最新推荐文章于 2024-04-04 00:19:46 发布

阅读量941

点赞数

分类专栏： JS_jQuery

本文链接：https://blog.csdn.net/mj404/article/details/42777439

版权

JS_jQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>learmn_jquery-5(jquery普通事件+表单事件+浏览器事件+事件对象+绑定和移除事件)</title>
</head>
	<style type="text/css">
		* {padding: 0; margin: 0;}
		ul {
			margin-left: 300px;
			width: 200px;
			list-style-type: none;
			border: 1px solid #ccc;
			display: none;
		}
		ul li {
			height: 24px;
			line-height: 24px;
		}
		ul li:hover {background: #cfcfcf;}
		body {margin: 50px;}
		div.select {
			margin-left: 300px;
			width: 200px;
			height: 28px;
			line-height: 24px;
			text-align: center;
			border: 2px solid green;
		}
	</style>
	<script type="text/javascript" src="jquery-2.1.1.js"></script>
<body style="height: 2000px;">
	<p>this is  p tag</p>
	<br/>
	<br/>
	<div>
		<input type="text" value="123456" style="position: fixed; top:200px;" />
		<input type="file" name="" id="" />
		<span style="display: none" >already focus</span>
		<br/>
		<br/>
		<form action="" id="form-1">
			<input type="text" name="" id="" />
			<input type="password" name="" id="" />
			<input type="submit" value="submit" />
		</form>

	</div>

	<div class="select">please select a city U like</div>
	<ul>
		<li>CITY~1~CITY</li>
		<li>CITY~2~CITY</li>
		<li>CITY~3~CITY</li>
		<li>CITY~4~CITY</li>
	</ul>

	<script type="text/javascript">
	/*没有涉及“时间冒泡”*/
	/*jQuery(document).ready(function($) {
	});//加载文档事件*/
	// $.holdready()// 1\暂停或恢复ready方法 2\jquery的工具函数
	
/*鼠标事件*/

	 //当鼠标左键按下然后再抬起鼠标左键才算完成一次click事件
    /*$('p').click(function() {
	 	//匿名函数
	 	alert($(this).text())
	 });*/
	//双击
	/*$('p').dblclick(function() {
	 	//匿名函数
	 	alert($(this).text())
	 });*/

	//foucsin() focusout()
	/*$('div').focusin(function() {
		$(this).children('span').show();
	});*/
	//效果一样
	/*$('input').focusin(function() {
		$('span').show();
	});*/
	
	//鼠标按下mousedown,鼠标抬起mouseup,mousemove()
	/*$('p').mousedown(function() {
	 	//匿名函数
	 	alert($(this).text())
	 })*/
	//获取实时鼠标坐标,传递参数
	/*$(document).mousemove(function(e) {
		var X = e.pageX;
		var Y = e.pageY;
		$('input').val(X+','+Y);
	});*/
	
	//相对应
	/*$('p').mouseover(function() {
		$(this).css('background', 'blue');
	});
	$('p').mouseout(function() {
		$(this).css('background', 'none');
	});*/
	//链式操作
	/*$('p').mouseover(function() {
		$(this).css('background', 'blue');
	}).mouseout(function() {
		$(this).css('background', 'none');
	});*/

	//mouseenter() mouseleave()
	//键盘事件
	/*$('input').keydown(function() {
		alert($(this).val());
	});*/
	/*$('input').keyup(function() {
		alert($(this).val());
	});*/
	/*$('input').keypress(function() {
		alert($(this).val());
	});*/
	
	//focus()获得焦点事件,blur()失去焦点
	/*$('input').focus(function() {
		$('span').show();
	});
	$('input').blur(function() {
		$('span').hide();
	});*/

	//change() 表单值改变事件,当有元素focus值改变的时候并且触发了blur事件才算完成一次change事件,
	//主要用在inp dile
	/*$('input').change(function() {
		$('span').show();
	});*/
	/*$('input[type=file]').change(function() {
		$('span').show();
	});*/

	//select是选中值松开鼠标后触发
	/*$('input').select(function() {
		$('span').show();
	});*/
	
	//提交事件
/*	$('#form-1').submit(function(event) {
		alert('submit is susscess!');
	});*/
	
	//######浏览器事件
	//resize();浏览器窗口改变大小触发的事件,scroll(),
	/*$(window).resize(function(event) {
		alert('browser size is change!!!');
	});*/
	/*$(window).scroll(function(event) {
		alert('browser scroll is change!!!');
	});*/
	

	//~~~~~~~~事件对象
	/*$(document).click(function(event) {
		var x = event.pageX;//已经把滚动条移动的距离加上了
		var y = event.pageY;
		$('input').val(x+', '+y);
	});*/
	
	//preventDeafult()//阻止浏览器默认行为
	/*$('#form-1').submit(function(event) {
		alert('submit is susscess!');
		event.preventDefault();
	});*/
	
	//阻止冒泡
	/*$('div.select').click(function(event) {
		$('ul').show();
		event.stopPropagation();
	});
	$(document).click(function() {
		$('ul').hide();
	});*/
	
	//=======绑定和移除事件
	/*$('p').bind('click',function(event) {
		alert($(this).text());
	});
	$('p').unbind('click');*/

	/*$('p').one('click',function(event) {
		alert($(this).text());
	});//只执行一次事件*/
	//事件委托
	/*$('body').delegate('p', 'click', function() {
		$(this).append('<div>i am new p tag </div>');
	});*/
	/*$('body').bind('click', function() {
		$(this).append('<div>i am new p tag </div>');
	});*/
	
	/*
	//事件命名空间
	$('p').bind('click.background', function() {
		$(this).css('background', 'red');
	});
	$('p').bind('click.color', function() {
		$(this).css('color', '#fff');
	});
	/*解除其中的一个*/
	$('p').unbind('click.color')*/

</script>
</body>
</html>