引用：http://hi.baidu.com/coolcat_police/blog/item/fb7b7f458ebde12ccffca3bb.html
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style>
.red{color:red;}
.green{color:green;}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
$(function(){
//为所有a标签添加red样式
$("a").addClass("red");
//为所有a标签添加onclick事件
$("a").click(function(){
alert("你点击了超链接");
});
//为id为bb的元素添加onclick事件
$("#removeRedClass").click(function(){
//为所有a标签删除red样式
$("a").removeClass("red");
});
//为id为orderedlist的li元素添加red样式
$("#orderedlist li").addClass("red");
//迭代id为orderedlist的li元素
$("#orderedlist li").each(function(i){
$(this).html("标签"+i);
});
//为id为orderedlist的最后li元素添加hover事件
$("#orderedlist li:last").hover(function(){$(this).addClass("green");},
function(){$(this).removeClass("green");});
//为id为testAjax的按钮添加Ajax功能
$("#testAjax").click(function(){
$.ajax({
url:'testAjax.xml',
type:'post',
dataType:'text', //xml,json,text
timeout:5000,
error:function(){
alert('找不到url资源！');
},
success:function(xml){
alert(xml);
}
});
});
});
</script>
</head>
<body>
<a href="#">点击触发超链接的onclick事件</a><br/>
<button id="removeRedClass">点击删除a标签的red样式</button><br/>
<ol id="orderedlist">
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ol><br/>
<button id="testAjax">ajax button</button>
</body>
</html>
|