jquery学习事例 _Web前端

jquery学习例子

引用

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="" />
<script src="jquery.js" type="text/javascript"></script>
<title>时学宝的html文档</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
        //不管是得到焦点，还是失去焦点，都简单的理解，就是光标在不在此处，光标移动到此处就是得到焦点，光标从此处移动到别的地方就是失去焦点
        $('#blur').blur(function(){//blur事件是当元素失去焦点时，触发的事件，即本例的input框，当选中这个input后，在点击页面的其他地方或者按table键，就是失去焦点操作，此时就执行blur事件，调用blur其中的函数
                alert('失去焦点弹出信息');
        });

        $('#focus').focus(function(){//当鼠标点击2.的input框是，此input便得到焦点。就调用focus事件
                alert("这是得到焦点弹出的信息");
        });
        //在来看keydown和keyup，keypress
        $('#keydown').keydown(function(){//当我们把光标选中第三个text框，我们在键盘上随便按下一个键就会调用keydown事件
                alert('这是键盘键按下时弹出的信息');
        });
        $('#keyup').keyup(function(){//当我们把光标选中第四个text框，我们在键盘上随便按下一个键然后抬起这个键就会调用keydown事件
                alert('这是键盘键弹起时弹出的信息');
        });
        //那keypress 是干什么的呢
        //keypress也是键盘键按下后调用的事件，keypress和keydown的区别是，
//        1.KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、 Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
//         KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）
//
//        2.KeyPress 只能捕获单个字符
//
//                KeyDown 和KeyUp 可以捕获组合键。
//
//   3.KeyPress 可以捕获单个字符的大小写
//
//   4.KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。
//
//   5.KeyPress 不区分小键盘和主键盘的数字字符。
//
//                KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
//
//   6.其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
        $('#keypress').keypress(function(){
                alert('这是键盘键按下弹起时弹出的信息');
        });
})
</script>
<body>
        鼠标点击input框后在点页面其他的地方就能看到效果<br/>
        1.<input id="blur" type="text" name="blur" /><p>

        2.<input id="focus" type="text" name="focus" /><p>

        3.<input id="keydown" type="text" name="keydown" /><p>

        4.<input id="keyup" type="text" name="keyup" /><p>

        5.<input id="keypress" type="text" name="keypress" /><p>
</body>
</html>