1、点击段落会消失
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“p”).click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
2、鼠标移动进入段落会变红色背景
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“button”).mouseenter(function () {
$(“p”).css(“background-color”, “red”);
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type=”button”>Click me</button>
</body>
</html>
3、JQuery使用Ajax
3.1 load函数使用——可以异步获取服务器资源返回结果
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<script src=”jquery.js”>
</script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).load(“result.asp”);
});
});
</script>
</head>
<body>
<div id=”div1″><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>
</html>
相应的result.asp文件：
<%
response.write(date())
%>
3.2 回调函数的使用——增加对返回结果的进一步处理
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<script src=”jquery.js”>
</script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).load(“result.asp”,function(responseTxt,statusTxt,xhr){
if(statusTxt==”success”)
alert(“外部内容加载成功!”);
if(statusTxt==”error”)
alert(“Error: “+xhr.status+”: “+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id=”div1″><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>
</html>
3.3 get函数使用——实现get方式提交参数并获取结果
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<script src=”jquery.js”>
</script>
<script>
$(document).ready(function () {
$(“button”).click(function () {
$.get(“result.asp”, {fname: “Shuqing”, lname: “Li”}, function(data){
$(“#div1″).html(data);
});
});
});
</script>
</head>
<body>
<div id=”div1”><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>
</html>
相应的result.asp文件：
<%
fname=ucase(request.querystring(“fname”))
lname=ucase(request.querystring(“lname”))
response.write(“Hello! Nice to see you, “+fname+” “+lname+”!”)
%>
3.4 post函数使用——实现post方式提交参数并获取结果
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<script src=”jquery.js”>
</script>
<script>
$(document).ready(function () {
$(“button”).click(function(){
$.post(“result.asp”,
{
fname:”Shuqing”,
lname:”Li”
},
function(data,status){
$(“#div1″).html(data);
});
});
});
</script>
</head>
<body>
<div id=”div1”><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>
</html>
相应的result.asp文件：
<%
fname=ucase(request.form(“fname”))
lname=ucase(request.form(“lname”))
response.write(“Hello! Nice to see you, “+fname+” “+lname+”!”)
%>