jquery api 常见 事件操作
2020-12-13 03:30
标签：style class blog code java http change.html focus.html keyup.html jquery api 常见 事件操作,搜素材,soscw.com jquery api 常见 事件操作 标签：style class blog code java http 原文地址：http://www.cnblogs.com/friends-wf/p/3810280.html 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 html>
3 head>
4 title>ready.htmltitle>
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 //当
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>
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 html>
3 head>
4 title>focus.htmltitle>
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>
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 html>
3 head>
4 title>focus.htmltitle>
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.htmltitle>
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.htmltitle>
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>22td>
14 tr>
15 tr>
16 td>李四td>
17 td>男td>
18 td>24td>
19 tr>
20 tr>
21 td>王五td>
22 td>男td>
23 td>26td>
24 tr>
25 tr>
26 td>周六td>
27 td>男td>
28 td>28td>
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.htmltitle>
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.htmltitle>
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>