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

来源：互联网发布：Java二叉树的遍历算法编辑：程序博客网时间：2024/04/29 01:38
<!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>
0 0