简洁高效的JQuery

最新推荐文章于 2023-01-20 23:26:52 发布

木道-

最新推荐文章于 2023-01-20 23:26:52 发布

阅读量172

点赞数

分类专栏：新职课文章标签： jquery

本文链接：https://blog.csdn.net/LJW123487/article/details/115720780

版权

新职课专栏收录该内容

26 篇文章 1 订阅

订阅专栏

一、概念

jQuery是一个JavaScript函数库，jQuery是一个轻量级的“写得少，做得多的”JavaScript库

jQuery库包含以下功能：

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

提示：除此之外，jQuery还提供了大量的插件。
目前网络上有大量开源的JS框架，但是jQuery是目前最流行的JS框架，而且提供了大量的扩展。

二、jQuery的使用

jQuery库是一个JavaScript文件，我们可以直接在HTML页面中通过script标签引用它，跟引用自己的外部JavaScript脚本文件一样的语法。

<head>
	<script src="jquery-1.11.1.js"></script>
</head>

三、jQuery语法结构

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作（actions）。

3.1 基础语法：$(selector).action()

说明：
美元符合定义jQuery
选择符(selector) “查询”和“查找”HTML元素
jQuery 的 actions() 执行对元素的操作

3.2 文档就绪事件

文档就绪事件，实际就是文件加载事件。

这是为了防止文档在完全加载（就绪）之前运行jQuery代码，即在DOM加载完成后才可与对DOM进行操作

如果在文档没有完全加载之前就运行函数，操作可能失败

所以我们尽可能将所有的操作都在文档加载完毕之后实现。

写法1：

$(document).ready(function(){
	//开始写 jQuery 代码...
});

写法2：简洁写法

$(function(){
	//开始写jQuery代码...
});

jQuery的ready方法与JavaScript中的onload相似，但是也有区别：
在这里插入图片描述

四、jQuery选择器：

jQuery选择器基于元素的 id 、类、类型、属性、属性值等“查找”（或选择）HTML元素。它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。

jQuery中所以的选择器都以美元符号开头：$()

4.1 元素/标签选择器

jQuery元素选择器基于元素/标签名选取元素。
语法：

$("标签名称")

<script>
	//文档就绪事件
	$(function(){
		//1.标签选择器
		//获取所有的div元素（集合）
		var list = $("div");
		console.log(list); //jQuery对象
		console.log(list.length); //3
		for(var i=0;i<list.length;i++){
			console.log(list[i]); //js对象
			console.log($(list[i])); //将js对象转化为jQuery对象
		}
	});
</script>

输出：
在这里插入图片描述

4.2 "#id"选择器

jQuery的 #id 选择器通过Html 元素的 id 属性选取指定的元素

页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器

语法：

$("#id");

//根据id获取到的元素是唯一的
//即使有重名的id 那也只是获取第一个
var p = $("#p1");
console.log(p); //jQuery对象

4.3 ".class"选择器

jQuery类选择器可以通过指定的class查找元素，查找到的一定是一个集合

语法：

$(".class");

var list = $(".mydiv");
console.log(list.length);

4.4 全局选择器

匹配当前页面的所有元素
语法

$("*");

var list = $("*"); 
console.log(list.length);
for(var i =0;i<list.length;i++){
	console.log(list[i]); //js对象
}

4.5 并集选择器

将每一个选择器匹配到的元素合并后一起返回。

$("div,p,.mydiv");

4.6 后代选择器

在给定的祖先元素下匹配所有的后代元素

$("form input");

4.7 子选择器

在给定的父元素下匹配所有的子元素

$("form > input");

4.8 相邻选择器

匹配所有紧接在prev元素后的next元素

$("label + input");

4.9 同辈选择器

匹配pre元素之后的所有siblings元素

$("form ~ input");

4.10 属性选择器

匹配包含给定属性的元素

$("div[id]");//获取所有拥有id属性的div元素
$("div[class]");//获取所有拥有class属性的div元素
$("input[name='userName']"); //获取所有name属性是userName的input元素
$("input[name^='user']");//获取所有name属性是user开头的input元素
$("input[name$='user']");//获取所有name属性是user结尾的input元素
$("input[name*='user']");//获取所有name属性包含user字段的input元素
$("input[name^='user'][id]");//获取所有name属性是user开头且拥有id属性的input元素

4.11 可见性选择器

匹配所有的可见或不可见的元素

$("div:visible");
$("input:hidden");

4.12 所有选择器案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<form>
			<label>用户名：</label>
			<input id="userName" name="userName" type="text"/><br/>
			密码：<input type="password"/>
			<fieldset>
				电话：<input type="text"/><br/>
				邮箱：<input type="email"/>
			</fieldset>
		</form>
		地址<input type="text" value="北京"/>
		<div id="div1">div1</div>
		<div id="div2" class="mydiv">div2</div>
		<div class="mydiv">div3</div>
		<p id="p1">p1</p>
	</body>
</html>
<script>
	//文档就绪事件
	$(function(){
		seeSelector();
	});
	function print(list){
		for(var i=0;i<list.length;i++){
			console.log(list[i]);
		}
	}
	//11、可见性选择器
	function seeSelector(){
		var list = $("div:visible");//获取所有可见的div元素集合
		list = $("div:hidden");//获取所有不可见的div元素集合
		print(list);
	}
	
	//10、属性选择器
	function attrSelector(){
		var list = $("div[id]");//获取所有拥有id属性的div元素
		list = $("div[class]");//获取所有拥有class属性的div元素
		list = $("input[name='userName']"); //获取所有name属性是userName的input元素
		list = $("input[name^='user']");//获取所有name属性是user开头的input元素
		list = $("input[name$='user']");//获取所有name属性是user结尾的input元素
		list = $("input[name*='user']");//获取所有name属性包含user字段的input元素
		list = $("input[name^='user'][id]");//获取所有name属性是user开头且拥有id属性的input元素
		print(list);
	}
	//9、同辈选择器
	function sublingsSelector(){
		var list = $("form ~ input");
		print(list);
	}
	//8、相邻选择器
	function nextSelector(){
		var list = $("label + input");
		print(list);
	}
	//7、子选择器
	function sonSelector(){
		var list = $("form>input");
		print(list);
	}
	//6、后代选择器
	function subSelector(){
		var list = $("form input");
		print(list);
	}
	//5、并集选择器
	function andSelector(){
		var list = $(".mydiv,p");
		print(list);
	}
	//4、全局选择器
	function allSelector(){
		var list = $("*");
		console.log(list.length);
		for(var i =0;i<list.length;i++){
			console.log(list[i]);
		}
	}
	//3、class选择器
	 function classSelector(){
		 var list = $(".mydiv");
		 console.log(list.length);
	 }
	//2、id选择器
	function idSelector(){
		//根据id获取到的元素是唯一的
		//即使有重名的id 那也只是获取第一个
		var p = $("#p1");
		console.log(p); //jQuery对象
	}
	//1、标签选择器
	function htmlSelector(){
		//获取所有的div元素（集合）
		var list = $("div");
		console.log(list); //jQuery对象
		console.log(list.length); //3
		for(var i=0;i<list.length;i++){
			console.log(list[i]); //js对象
			console.log($(list[i])); //将js对象转化为jQuery对象
		}
	}
</script>

五、jQuery常用函数

5.1 与标签内容相关函数

5.2 与标签属性相关函数

5.3 与标签样式相关函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				cssFun();
			});
			//1.与内容相关的函数
			function textFun(){
				var str1 = $("div").html();//获取的是第一个匹配元素的围堵标签中的所有内容，包含标签
				console.log(str1);
				var str2 = $("div").text();//获取的是所有匹配元素的标签中的文本信息，不包含标签
				console.log(str2);
				var str3 = $("div").val();//val()只能用在表单项元素中，div不是表单，所以获取不到
				console.log(str3);
				var str4 = $("input").val();//当有多个匹配时，获取第一个，input是表单，所以嫩获取
				console.log(str4);
			}
			//2.与属性相关的函数
			function attrFun(){
				var img = $("img");
				//设置属性
				img.attr("src","img/cat.jpg");
				img.attr("title","不服！");
				//移除属性
				img.removeAttr("title");
				//获得属性
				var src = img.attr("src");
				var title = img.attr("title");
				
				
				//获取checked或者 selected 属性使用prop函数,获取到的值是boolean类型，表示是否被选中
				var list = $("input[name='gender']");
				for(var i=0;i<list.length;i++){
					console.log($(list[i]).prop("checked"));
				}
				//一般想要获取的值是true 或 false 的时候，用prop
				//获取属性值的话 用 attr 函数
			}
			
			//与标签样式相关的函数
			function cssFun(){
				$("div").addClass("redBg");//添加一个编写好的样式
				$("div").addClass("redBg fontColor");//添加多个编写好的样式
				$("input").css("border-color","yellow");//添加样式
				$("input").css({"color":"red","border-color":"yellow"});//添加多个样式
				
			}
			function changeCss(){
				$("div").toggleClass("redBg");//如果目标元素有该样式就删除，没有就添加
			}
		</script>
		<style>
			.redBg{
				background-color: red;
			}
			.fontColor{
				color: blue;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="changeCss()">点我切换</button>
		性别：<input type="radio" value="1" name="gender" checked="checked"/>男
		<input type="radio" value="0" name="gender"/>女<br/>
		<img src="img/a.png" title="服不服" />
		<div>div1<button type="button">普通按钮1</button></div>
		<div>div2<button type="button">普通按钮2</button></div>
		<input typr="text" name="username" value="贾宝玉"/>
		<input typr="text" name="password" value="456"/>
	</body>
</html>

六、jQuery与js对象的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				//获取所有div元素集合
				var list = $("div");
				for(var i=0;i<list.length;i++){
					//js对象，获取内容用innerHTML()
					console.log(list[i]);
					//jquery对象，获取内容用html函数
					console.log($(list[i]));
				}
			});
		</script>
	</head>
	<body>
		<div>div</div>
		<div>div</div>
	</body>
</html>

七、jQuery中的事件

页面对不同访问者的响应叫做事件，事件处理程序指的是当HTML中发生某些事件时所调用的方法。

7.1 常用DOM事件列表

在这里插入图片描述

7.2 常用的jQuery事件方法

在jQuery中，大多数DOM事件都有一个等效的jQuery方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			//页面加载事件
			$(function(){
				//给所有的button去绑定单击事件
				$("button").click(function(){
					//this指当前对象，该对象是Js对象，需要转换为jquery对象
					$(this).css("color","red");//给按钮添加样式
				});
				//给所有a标签绑定鼠标移上事件
				$("a").mouseover(function(){
					var str = $(this).html();
					$(this).html("鼠标移上-"+str);
				});
				//给所有a标签绑定鼠标离开事件
				$("a").mouseout(function(){
					var str = $(this).html();
					$(this).html(str.substr(5));
				});
			});
		</script>
	</head>
	<body>
		<a href="#">首页</a>&nbsp;
		<a href="#">零食</a>&nbsp;
		<a href="#">鲜花</a>
		<button type="button" onclick="">普通按钮1</button>
		<button type="button">普通按钮2</button>
		<button type="button">普通按钮3</button>
	</body>
</html>

八、jQuery操作DOM

8.1 元素的增加

append() - 在被选元素的结尾插入元素（元素内部）
prepend() - 在被选元素的开头插入内容（元素内部）
after() - 在被选元素之后插入内容（元素外部）
before() - 在被选元素之前插入内容（元素外部）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				background-color: aqua;
			}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				//append() 在元素内部末尾追加
				$("#btn1").click(function(){
					$("div").append("<br/><p>追加新段落</p><br/>");
				});
				//prepend() 在元素内部顶端追加
				$("#btn2").click(function(){
					$("div").prepend("<br/><p>追加新段落</p><br/>")
				});
				//after() 在元素外部末尾追加
				$("#btn3").click(function(){
					$("div").after("<br/><p>追加新段落</p><br/>")
				});
				//before() 在元素外部顶端追加
				$("#btn4").click(function(){
					$("div").before("<br/><p>追加新段落</p><br/>")
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">append</button>
		<button id="btn2">prepend</button>
		<button id="btn3">after</button>
		<button id="btn4">before</button>
		<div>
			div1
		</div>
	</body>
</html>

8.2 元素的克隆

clone(boolean)-克隆匹配的DOM元素并且选中这些克隆的副本

语法：

$(selector).clone(includeEvents);

参数：可选。布尔值。规定是否复制元素的所以事件处理。，默认是false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				$("#bt1").click(function(){
					alert("试试就试试");
				});
				//克隆且事件有效
				$("#bt2").click(function(){
					$("div").append($("p").clone(true));
				});
				//克隆但事件无效
				$("#bt3").click(function(){
					$("div").append($("p").clone(false));
				});
				
			});
		</script>
	</head>
	<body>
		<button id="bt2">克隆元素 true</button>
		<button id="bt3">克隆元素 false</button>
		<p>
			被克隆的段落
			<button id="bt1">点我试试</button>
		</p>
		<div>
			div1
		</div>
	</body>
</html>

8.3 元素的替换

replaceWith() - 将所有匹配的元素替换成指定的HTML或DOM元素（后换前）
replaceAll() - 前换后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				//后换前
				$("#btn1").click(function(){
					$("div").replaceWith("<p>aaa</p>");
				});
				//前换后
				$("#btn2").click(function(){
					$("<p>aaa</p>").replaceAll("div");
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">replaceWith</button>
		<button id="btn2">replaceAll</button>
		<div>div1</div>
		<div>div2</div>
	</body>
</html>

8.4 元素的删除

remove() 删除被选元素（及其内容和子元素）
empty() 删除被选元素中所有内容和子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				//删除div及其内部所有内容
				$("#btn1").click(function(){
					$("div").remove();
				});
				//删除id为div2的div元素及其所有内容
				$("#btn2").click(function(){
					$("div").remove("#div2");
				});
				//删除div内所有内容，但div还存在
				$("#btn3").click(function(){
					$("div").empty();
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">remove</button>
		<button id="btn2">remove筛选</button>
		<button id="btn3">empty</button>
		<div>
			div1
			<p>段落1</p>
			<p>段落2</p>
		</div>
		<div id="div2">div2</div>
	</body>
</html>

九、jQuery效果

9.1 隐藏和显示

语法：

$(selector).hide([speed,callback]); 隐藏
$(selector).show([speed,callback]); 显示
$(selector).toggle([speed,callback]); 切换

参数说明：
可选的speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、"fast"或毫秒
可选的callback 参数是隐藏或显示完成后所执行的函数名称。

9.2 淡入和淡出

语法：

$(selector).fadeIn([speed,callback]);
$(selector).fadeOut([speed,callback]); 
$(selector).fadeToggle([speed,callback]);

参数说明:
可选的speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、"fast"或毫秒
可选的callback 参数是隐藏或显示完成后所执行的函数名称。

十、基于jQuery实现表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>英雄会注册</h1>
		<form id="myForm" action="#" method="get">
			*用户名：<input type="text" id="userName" name="userName" placeholder="请输入用户名"/>
			<span id="userMsg"></span><br/>
			*密码：<input type="password" id="passWord" name="passWord" placeholder="请输入密码"/>
			<span id="pwd1Msg"></span><br/>
			*确认密码：<input type="password" id="rePassWord" name="rePassWord" placeholder="请确认密码"/>
			<span id="pwd2Msg"></span><br/>
			*性别：
			<select id="gender">
				<option value="-1">请选择性别</option>
				<option value="1">男</option>
				<option value="0">女</option>
			</select><br/>
			*电话号码：<input type="text" id="phone" name="phone" />
			<span id="phoneMsg"></span><br/>
			*邮箱：<input type="email" id="email" name="email"/>
			<span id="emailMsg"></span><br/>
			<input type="submit" id="sub" value="注册"/>
			<input type="reset" id="reset" value="重置"/>
		</form>
	</body>
</html>
<script>
	$(function(){
		$("#userName").blur(function(){
			isName();
		});
	});
	
	
	//验证用户名
	function isName(){
		var val = $("#userName").val();
		var msg = $("#userMsg");
		var zz = /^[a-zA-Z]\w{5,}/;
		if(val == ""){
			msg.html("用户名不能为空").css("color","red");
			return false;
		}else if(zz.test(val) == false){
			msg.html("用户名不合法").css("color","red");
			return false;
		}
		msg.html("用户名可用").css("color","green");
		return true;
	}
</script>

十一、jQuery案例

11.1 动态表格

**对动态元素的DOM操作与传统操作不同，需要用的document的on方法，如下代码 **

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<input id="biani" type="button" value="遍历表格"/>
		<input id="add" type="button" value="添加"/>
		<table cellpadding="0" cellspacing="0" border="1" id="tb">
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>125</td>
				<td>1</td>
				<td><input name="del" type="button" value="删除"/></td>
			</tr>
			<tr>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>152</td>
				<td>2</td>
				<td><input name="del" type="button" value="删除"/></td>
			</tr>
			<tr>
				<td>3</td>
				<td>小熊饼干3</td>
				<td>185</td>
				<td>3</td>
				<td><input name="del" type="button" value="删除"/></td>
			</tr>
		</table>
	</body>
</html>
<script>
	$(function(){
		//为便利表格按钮赋予单击事件
		$("#biani").click(function(){
			//首先获取表格对象
			var table = $("#tb");
			//获取表格的所有行
			//注意浏览器默认把tr放在tbody中,所以children()函数获得的是tbody
			//我们要再调用一次children
			var trlist = table.children().children();
			//获取每行的列
			for(var i=0;i<trlist.length;i++){
				var trobj = $(trlist[i]);//将每一行的js对象转换为jQuery对象
				var tdlist = $(trobj.children());//获取当前行中的所有单元格
				var str = "";
				for(var j =0;j<tdlist.length;j++){
					var tdobj = $(tdlist[j]);
					var html = tdobj.html();
					str = str + html;
				}
				console.log(str);
			}
		});
		
		//添加表格单机事件
		$("#add").click(function(){
			//获取表格对象
			var table = $("#tb").children();
			//获取要添加的行对象
			var row = '<tr>'+
				'<td>3</td>'+
				'<td>小熊饼干3</td>'+
				'<td>185</td>'+
				'<td>3</td>'+
				'<td><input name="del" type="button" value="删除"/></td>'+
			'</tr>';
			//在尾部追加行
			table.append(row);
		});
		
		//添加删除事件
		// $("input[name=del]").click(function(){
		// 	var row = $(this).parent().parent();
		// 	row.remove();
		// });
		//这种传统绑定方式对动态添加的元素不生效
		
		//动态添加的元素绑定事件的方法：
		$(document).on("click","input[name=del]",function(){
			var row = $(this).parent().parent();
			row.remove();
		})
	});
</script>

11.2 全选/全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<table cellpadding="0" border="1" cellspacing="0">
			<tr>
				<th>全选<input id="all" type="checkbox" /></th>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>125</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>125</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>3</td>
				<td>小熊饼干3</td>
				<td>125</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
	</body>
</html>
<script>
	$(function(){
		$("#all").click(function(){
			var flag = $("#all").prop("checked");
			var list = $("input[name=one]");
			for(var i =0;i<list.length;i++){
				$(list[i]).prop("checked",flag);
			}
		});
		
		$("input[name=one]").click(function(){
			var list = $("input[name=one]");
			for(var i = 0;i<list.length;i++){
				if($(list[i]).prop("checked")==false){
					$("#all").prop("checked",false);
					return;
				}
			}
			$("#all").prop("checked",true);
		});
	});
</script>

11.3 省市级联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<select id="province">
			<option>--请选择省份--</option>
			<option value="0">北京</option>
			<option value="1">贵州省</option>
			<option value="2">广东省</option>
			<option value="3">浙江省</option>
		</select>
		<select id="city">
			
		</select>
	</body>
</html>
<script>
	$(function(){
		var cityList = new Array();
		cityList[0]=new Array("朝阳区","海淀区","东城区","西域区");
		cityList[1]=new Array("贵阳市","遵义市","凯里市","毕节市");
		cityList[2]=new Array("广州市","深圳市","珠海市","茂名市");
		cityList[3]=new Array("杭州市","宁波市","绍兴市","嘉兴市");
		
		$("#province").change(function(){
			var val = $(this).val();//获取选择的省对应的value值
			//获取省对应的城市集合
			var list = cityList[val];
			//获取到城市下拉框
			var city = $("#city");
			//清空城市下拉框
			city.empty();
			//循环追加城市
			for(var i=0;i<list.length;i++){
				city.append('<option value="+i+">'+list[i]+'</option>');
			}
			
		});
	});
</script>

11.4 动态时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态时间</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script>
			function showTime() {
				var time = new Date();
				var y = time.getFullYear();
				var mon = time.getMonth() + 1; //0-11                
				var d = time.getDate();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				$("#myTime").html(y + "年" + mon + "月" + d + "日    " + h + ":" + m + ":" + s);
			}

			function showTime2() {
				var time = new Date();
				var y = time.getFullYear();
				var mon = time.getMonth() + 1; //0-11               
				var d = time.getDate();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				$("#myTime2").html(y + "年" + mon + "月" + d + "日    " + h + ":" + m + ":" + s);
				clock2 = window.setTimeout("showTime2()", 1000);
			}
			//变量定义的位置：两个函数中都调用了，所以需要定义成全局变量            
			var clock2 = window.setTimeout("showTime2()", 1000);
			//页面加载事件            
			$(function() {
				//定时器                
				var clock1 = window.setInterval("showTime()", 1000);
				$("#btn1").click(function() {
					window.clearInterval(clock1);
				});
				$("#btn2").click(function() {
					window.clearTimeout(clock2);
				});
			});
		</script>
	</head>
	<body> 
		<button id="btn1">停止</button>
		<div id="myTime"> </div> 
		<button id="btn2">停止2</button>
		<div id="myTime2"> </div>
	</body>
</html>