jQuery是JavaScript框架,jQuery也是JavaScript代码。使用jQuery要比直接使用JavaScript方便很多。
要使用jQuery,首先需要在JSP页面中导入jQuery。jQuery就是一个JS文件而已。
导入jQuery:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
</head>
<body>
</body>
</html>
jQuery 核心函数: $()
事件之文档加载完毕
在JavaScript中<body οnlοad="xxx()"> 意义是:在文档加载完毕后执行xxx()函数。
而在jQuery中也存在相同的功能,即:$(function(){...}).
我们给$()这个函数添加一个参数,参数为一个匿名函数,这个匿名函数会在文档加载完毕时执行。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
alert("文档已经加载完成。")
})
</script>
</head>
<body>
</body>
</html>
选择器
1、ID选择器与text()函数
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
alert("文档加载完毕");
alert($("#top").text());
$("#top").text("This is Top");
alert($("#top").text())
})
</script>
</head>
<body>
Welcome You!
<div id="top">top</div>
<div id="center"><b>center</b></div>
<div id="bottom">bottom</div>
</body>
</html>
2、ID选择器与html()函数
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
alert("文档加载完毕");
var ele = $("#wei");
alert(ele.html());
ele.html("<i>wei</i>")
alert(ele.html());
})
</script>
</head>
<body>
Welcome You!
<div id="top">top</div>
<div id="wei"><b>wei</b></div>
<div id="bottom">bottom</div>
</body>
</html>
3、元素选择器
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
var ele = $("div");
alert(ele.length);
})
</script>
</head>
<body>
Welcome You!
<div id="top">top</div>
<div id="wei"><b>wei</b></div>
<div id="bottom">bottom</div>
</body>
</html>
4、类选择器
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
var ele = $(".top");
alert(ele.text());
ele.text("This is Top")
alert(ele.text());
})
</script>
</head>
<body>
Welcome You!
<div id="top" class="top">top</div>
<div id="wei"><b>wei</b></div>
<div id="bottom">bottom</div>
</body>
</html>
5、属性选择器
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
var ele = $("[name=age]");
ele.val("19");
$("option[selected=selected]").text("wei");
alert($("option[selected=selected]").text());
$(":selected").text("pp");
alert($(":selected").text());
var e = $(":input[name=name]").attr("id");
alert(e);
$(":input[name=name]").attr("value", "张三");
})
</script>
</head>
<body>
用户名:<input type="text" name="name" id="name"><br/>
年 龄:<input type="text" name="age"><br/>
学 历:
<select name="edu">
<option value="1">大学</option>
<option value="2">中学</option>
<option value="3">小学</option>
<option value="4" selected="selected">其它</option>
</select><br/>
<input type="submit" value="登陆">
</body>
</html>
6、样式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
alert("增加样式");
$("#myform").addClass("pp");
alert("去除样式");
$("#myform").removeClass("pp");
})
</script>
<style type="text/css">
.pp {
border: 1px solid red;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<form action="" id="myform">
用户名:<input type="text" name="name" id="name"><br/>
年 龄:<input type="text" name="age"><br/>
学 历:
<select name="edu">
<option value="1">大学</option>
<option value="2">中学</option>
<option value="3">小学</option>
<option value="4" selected="selected">其它</option>
</select><br/>
<input type="submit" value="登陆">
</form>
</body>
</html>
7、遍历
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
$("option").each(function() {
alert($(this).text());
});
})
</script>
<style type="text/css">
.pp {
border: 1px solid red;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<form action="" id="myform">
用户名:<input type="text" name="name" id="name"><br/>
年 龄:<input type="text" name="age"><br/>
学 历:
<select name="edu">
<option value="1">大学</option>
<option value="2">中学</option>
<option value="3">小学</option>
<option value="4" selected="selected">其它</option>
</select><br/>
<input type="submit" value="登陆">
</form>
</body>
</html>
8、点击事件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
alert("你点我了!");
});
$("#btn2").bind("click", function() {
alert("添加样式");
$("#myform").addClass("pp");
alert("去除样式");
$("#myform").removeClass("pp");
});
$("#btn2").unbind("click");
})
</script>
<style type="text/css">
.pp {
border: 1px solid red;
width: 400px;
height: 90px;
}
</style>
</head>
<body>
<form action="" id="myform">
用户名:<input type="text" name="name" id="name"><br/>
年 龄:<input type="text" name="age"><br/>
学 历:
<select name="edu">
<option value="1">大学</option>
<option value="2">中学</option>
<option value="3">小学</option>
<option value="4" selected="selected">其它</option>
</select><br/>
<input type="submit" value="登陆">
</form>
<button id="btn">点我</button><button id="btn2">点我2</button>
</body>
</html>
9、鼠标事件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
$("#myform").addClass("pp");
$("#myform").hover(function(){
$("#name").val("张三来了");
}, function(){
$("#name").val("李四来了");
});
})
</script>
<style type="text/css">
.pp {
border: 1px solid red;
width: 400px;
height: 90px;
}
</style>
</head>
<body>
<form action="" id="myform">
用户名:<input type="text" name="name" id="name"><br/>
年 龄:<input type="text" name="age"><br/>
学 历:
<select name="edu">
<option value="1">大学</option>
<option value="2">中学</option>
<option value="3">小学</option>
<option value="4" selected="selected">其它</option>
</select><br/>
<input type="submit" value="登陆">
</form>
</body>
</html>
10、ajax
package com.acme.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
System.out.println("POST....");
String value = request.getParameter("val");
if (value.equals("wei")) {
response.getWriter().println("{\"name\":\"好人\", \"age\":\"22\"}");
} else {
response.getWriter().println("{\"name\":\"坏人\", \"age\":\"84\"}");
}
}
}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript">
$(function() {
//失去焦点时
$("#name").blur(function(){
var value = $("#name").val();
$.ajax({
url:"/as",//要请求服务器url
data:{val:value},//请求参数
async:true,//是否为异步请求
cache:false,//是否缓存结果
type:"POST",//请求方式
dataType:"json",//服务器返回的数据类型
success:function(result){//服务器执行成功时处理
$("label").text(result.name + ", " + result.age);
}
});
});
})
</script>
</head>
<body>
用户名:<input type="text" name="name" id="name"><label></label><br/>
年 龄:<input type="text" name="age"><br/>
</body>
</html>