change.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>ready.html</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
7 </head>
8 <body>
9 <select>
10 <option value="bj">北京</option>
11 <option value="sh">上海</option>
12 <option value="gz">广州</option>
13 </select>
14
15 <script type="text/javascript">
16 //当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
17 $("select").change(function(){
18 var $option = $("select option:selected");
19 var value = $option.val();
20 var html = $option.html();
21 alert(value+":"+html);
22 });
23
24
25 </script>
26 </body>
27 </html>
focus.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>focus.html</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
7 </head>
8 <body>
9 <input type="text" value="加载页面时获取光标并选中所有文字" size="50"/>
10 <script type="text/javascript">
11 //加载页面时获取光标并选中所有文字
12 $(function(){
13 //将光标定位于文本框
14 var $text = $(":text");
15 //选中文本框中的内容
16 $text.select();
17 });
18 </script>
19 </body>
20 </html>
keyup.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>focus.html</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
7 </head>
8 <body>
9 <script type="text/javascript">
10 //当按键弹起时，显示所按键的code码
11 $(document).keyup(function(){
12 //获取浏览器产生的事件对象，该事件对象，无需程序员代码创建，
13 //是每个浏览器自已产生的，即IE和firefox浏览器产生的事件
14 //对象可以不同。
15 var code = event.keyCode;
16 alert(code);
17 });
18 </script>
19 </body>
20 </html>
mousemove.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>focus.html</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
7 </head>
8 <body>
9
10 X=<input type="text" id="xID"/>
11 <br/>
12 Y=<input type="text" id="yID"/>
13
14 <script type="text/javascript">
15 $(document).mousemove(function(){
16 //显示鼠标移动时的X和Y座标
17 var x = event.clientX;
18 var y = event.clientY;
19 //将x和y坐标设置到文本框中
20 $("#xID").val(x);
21 $("#yID").val(y);
22 });
23 </script>
24
25
26 </body>
27 </html>
mouseover_mouseout.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>focus.html</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
7 </head>
8 <body>
9 <table border="2" align="center" width="80%" id="tableID">
10 <tr>
11 <td>张三</td>
12 <td>男</td>
13 <td>22</td>
14 </tr>
15 <tr>
16 <td>李四</td>
17 <td>男</td>
18 <td>24</td>
19 </tr>
20 <tr>
21 <td>王五</td>
22 <td>男</td>
23 <td>26</td>
24 </tr>
25 <tr>
26 <td>周六</td>
27 <td>男</td>
28 <td>28</td>
29 </tr>
30 </table>
31 <hr/>
32 <img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%"/>
33 <img height="120px" src="../images/lb.jpg" style="position:absolute;left:60%"/>
34 <script type="text/javascript">
35 //鼠标移到某行上，某行背景变色，字体加租
36 $("table tr").mouseover(function(){
37 $(this).css("background-color","#AABBCC");
38 });
39 //鼠标移出某行，某行还原
40 $("table tr").mouseout(function(){
41 $(this).css("background-color","white");
42 });
43 //鼠标移到某图片上，为图片加边框
44 $("img").mouseover(function(){
45 $(this).css("border-style","ridge");
46 });
47 //鼠标移出图片，图片还原
48 $("img").mouseout(function(){
49 $(this).css("border-style","none");
50 });
51 </script>
52 </body>
53 </html>
ready.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>ready.html</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
7 </head>
8 <body>
9 <script type="text/javascript">
10 //定义a()和b()二个方法
11 function a(){
12 alert("a");
13 }
14 function b(){
15 alert("b");
16 }
17 /*使用DOM方式加载a()和b()二个方法
18 window.onload = function(){
19 a();
20 }
21 window.onload = function(){
22 b();
23 }
24 */
25 /*使用jQuery方式加载a()和b()二个方法
26 $(document).ready(function(){
27 a();
28 });
29 $(document).ready(function(){
30 b();
31 });
32 */
33
34 //使用jQuery最简方式加载a()和b()二个方法
35 $(function(){
36 a();
37 });
38 $(function(){
39 b();
40 });
41 </script>
42 </body>
43 </html>
submit.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>ready.html</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
7 </head>
8 <body>
9 <form action="submit.html" method="post">
10 <select>
11 <option value="bj">北京</option>
12 <option value="sh" selected>上海</option>
13 <option value="gz">广州</option>
14 </select>
15 <input type="submit" value="表单提交"/>
16 </form>
17 <script type="text/javascript">
18 //当表单提交前检测
19 $("form").submit(function(){
20 //..
21 return false;
22 });
23 </script>
24 </body>
25 </html>
jquery api 常见 事件操作
时间： 2024-07-30 13:45:27