JAVA AJAXJQUERY DAY04
1 jQuery处理事件
1.1 问题
如何使用jQuery进行事件处理。
1.2 方案
通过jQuery提供的与事件有关的API进行事件绑定、获取事件源、完成合成事件等操作。
1.3 步骤
步骤一：事件绑定及获取事件源
新建e1.html页面：
图– 1
添加事件：
图– 2
运行结果：
图 - 3
获取事件对象：
新建e2.html页面：
图 - 4
添加事件：
图 - 5
运行结果：
点击第一个链接后的结果：
图– 6
点击第二个链接后的结果：
图– 7
1.4 完整代码
e1.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/jav
ascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('#a1').bind('click',function(){
$('#d1').html('hello java');
});
});
</script>
</head>
<body>
<!-- 绑定事件处理函数 -->
<!--
$obj.bind(事件类型，事件处理函数);
比如：$obj.bind('click' , fn ) ;
-->
<div id="d1">hello jQuery</div>
<a href="javascript:;" id="a1">绑定事件处理函数</a>
</body>
</html>
e2.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(e){
//通过事件对象找到事件源
var obj = e.target; //返回值是一个dom对象
alert(obj.innerHTML);
//获得鼠标点击的坐标
alert(e.pageX + ' ' + e.pageY);
});
});
</script>
</head>
<body>
<!-- 获取事件对象 -->
<a href="javascript:;">第一个链接</a><br/>
<a href="javascript:;">第二个链接</a>
</body>
</html>
2 事件冒泡
2.1 问题
取消子节点向上抛出事件。
2.2 方案
使用事件的stopPropagation（）方法。
2.3 步骤
新建e3.html文件：
图 - 8
添加事件：
图 - 9
运行结果：
如果不添加e.stopPropagation()方法，则运行结果如下所示。
图 - 10
添加e.stopPropagation()方法后，运行结果如下所示。
图– 11
2.4 完整代码
e3.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('div').click(function(e){
alert('你点击了一个div');
});
$('a').click(function(e){
alert('你点击了一个链接');
//取消事件冒泡
e.stopPropagation();
});
});
</script>
</head>
<body>
<!-- 事件冒泡 -->
<!--
什么是事件冒泡?子节点产生的事件会依次向上抛给父节点
-->
<div style="width:200px;height:200px;
border:1px solid red;">
<a href="javascript:;">hello jQuery</a>
</div>
</body>
</html>
3 合成事件
3.1 问题
多个事件状态的组合事件。
3.2 方案
使用hover()、toggle()方法实现合成事件。
3.3 步骤
步骤一：新建e4.html文件：
图 - 12
添加事件：
图 - 13
运行结果：
图 - 14
步骤二：模拟连续单击动作
新建e5.html文件：
图 - 15
添加事件：
图 - 16
查看运行结果：
随着点击超链接，会出现div交替的显示和隐藏。
3.4 完整代码
e4.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.s1{
width:100px;
height:100px;
border:1px solid red;
}
.s2{
border:10px solid red;;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
/*
$('.s1').mouseenter(function(){
$(this).addClass('s2');
});
$('.s1').mouseleave(function(){
$(this).removeClass('s2');
});
*/
$('.s1').hover(function(){
$(this).addClass('s2');
},function(){
$(this).removeClass('s2');
});
});
</script>
</head>
<body>
<!-- 合成事件 :hover(mouseenter ， mouseleave)
模拟光标悬停事件
-->
<div class="s1">
</div>
</body>
</html>
e5.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('a').toggle(function(){
//$('div').show('slow');
$(this).html('修改后的HTML内容');
},function(){
//$('div').hide('fast');
$(this).html('第二部分内容');
});
});
</script>
</head>
<body>
<!-- toggle（fn1，fn2，fn3 。。）模拟连续单击事件 -->
<a href="javascript:;">连续单击</a>
<div style="display:none;">隐藏的Div</div>
</body>
</html>
4 模拟操作
4.1 问题
模拟页面元素发生得到焦点事件。
4.2 方案
使用trigger()等方法实现。
4.3 步骤
步骤一：新建e6.html文件：
图 - 17
添加事件：
图 - 18
运行结果：
图 - 19
4.4 完整代码
e6.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('#b1').click(function(){
//$('#username').trigger('focus');
$('#username').focus();
});
});
</script>
</head>
<body>
<!-- 模拟操作 -->
<!--
a，正式写法 $obj.trigger(事件类型）
如 $obj.trigger("focus");
b，简写形式 $obj.focus( ) ;
-->
username:<input name="username"
id="username"/><br/>
name:<input name="name"/>
<input type="button" value="模拟操作" id="b1"/>
</body>
</html>
5 jQuery动画
5.1 问题
jQuery中的动画函数介绍。
5.2 方案
使用jQuery中与动画有关的API实现显示、隐藏、淡入、淡出、自定义动画的效果。
5.3 步骤
步骤一：显示/隐藏
新建a1.html文件：
图- 20
添加事件：
图- 21
显示效果：
页面加载完毕，DIV是显示的。点击btn2 之后，DIV消失，并在消失后弹出消息框，显示文本。点击btn1之后，DIV显示。
添加事件：
图- 22
显示效果：
DIV显示时，以自上而下的方式呈现。DIV隐藏时，以自下而上的方式消失。
步骤二：淡入/淡出
新建a2.html文件：
图– 23
添加事件：
图– 24
运行效果：div会以改变透明度的方式，变浅或变深的显示和隐藏。
步骤三：自定义动画
新建a3.html文件：
图- 25
添加事件：
图– 26
图- 27
图- 28
图- 29
运行效果：DIV在页面中沿着坐标指定的方向移动。图-26的路线为向右平移，图-27的路线为向右下方平移，图-28的路线为向右平移后向下平移，图-29的路线为向右下方平移后消失。
5.4 完整代码
a1.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
div{
width:450px;
height:40px;
background-color:#fff8dc;
border:1px solid black;
display:block;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
//$('div').show(3000);
$('div').slideDown(3000);
});
$('#btn2').click(function(){
//$('div').hide(
// 'normal',
// function(){alert('消失了');}
//);
$('div').slideUp(3000);
});
});
</script>
</head>
<body>
<!-- show（） / hide（） -->
<!--
a，作用：通过同时改变元素的宽度和高度来实现显示或者隐藏。
b，用法： $obj.show ( 执行时间，回调函数 ) ;
执行时间：'slow' 'normal' 'fast' 或者用毫秒数
回调函数：当动画执行完毕之后执行的函数。
-->
<!-- slideDown（） / slideUp（） -->
<!--
a，作用：通过改变高度来实现显示或者隐藏的效果。
b，用法：同 $obj.show()。
-->
<input type="button" id="btn1" value="显示DIV"/>
<input type="button" id="btn2" value="隐藏DIV"/>
<div>显示或隐藏的内容。</div>
</body>
</html>
a2.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#d1{
width:200px;
height:200px;
border-color:red;
display:none;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
$('div').fadeIn(3000);
});
$('#btn2').click(function(){
$('div').fadeOut();
});
});
</script>
</head>
<body>
<!-- fadeIn（）淡入 / fadeOut（）淡出 -->
<!-- 作用：通过改变不透明度opacity来实现显示或者隐藏 -->
<input type="button" id="btn1" value="淡入"/>
<input type="button" id="btn2" value="淡出"/>
<div id="d1">淡入或淡出的内容。</div>
</body>
</html>
a3.html文件代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#d1{
width:100px;
height:100px;
background-color:red;
left:100px;
top:80px;
position:absolute;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('#d1').click(function(){
//1.直着走
//$(this).animate({'left':'500px'},2000);
//2.斜着走
//$(this).animate(
// {'left':'500px','top':'200px'},2000);
//3.先直着走，再斜着走（动画队列）
//$(this).animate({'left':'500px'},2000);
//$(this).animate({'top':'200px'},2000);
//4.走完后消失
$(this).animate(
{'left':'500px','top':'300px'},2000)
.fadeOut('slow');
});
});
</script>
</head>
<body>
<!-- animate（js对象，执行时间，回调函数）；
js对象： { } 描述动画执行之后，元素的样式。
比如 $obj.animate({'left':'200px'}
-->
<div id="d1"></div>
</body>
</html>
6 jQuery遍历操作
6.1 问题
使用jQuery实现对数组的遍历操作。
6.2 方案
使用jQuery的length属性、each()、eq()、get()、index()方法对类似数组的元素进行操作。
6.3 步骤
步骤一：新建array/a1.html文件
图- 30
步骤二：使用length属性获取个数
图- 31
步骤三：使用each（fn）遍历
图- 32
步骤四：使用eq（index）取jQuery对象
图- 33
步骤五：使用get（index）取DOM对象或DOM数组
图- 34
步骤六：使用index（obj）获取DOM或jQuery的下标
图- 35
6.4 完整代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('#b1').click(function(){
/*
var $obj = $('ul li');
//alert($obj.length);
$obj.each(function(i){
//i:正在被遍历的dom对象的下标
if(i == 1){
//this:正在被遍历的dom对象
$(this).css('font-size','80px');
}
});
*/
//var $obj = $('ul li');
//var $o = $obj.eq(1);
//$o.css('font-size','60px');
//var o = $obj.get(1);
//o.innerHTML = 'hello jQuery';
//var $obj = $('ul li');
//var o = $obj.get(1);
//var index = $obj.index(o);
//alert(index);
var $obj = $('ul li');
var arr = $obj.get();
alert(arr[1].innerHTML);
});
});
</script>
</head>
<body>
<!-- 类数组操作 -->
<!--
a，length属性：dom对象的个数。
b，each（fn）用来遍历类数组。fn用来处理dom对象。
在fn函数里面this表示正在被遍历的那个dom对象，
另外fn函数可以添加一个参数，
比如i，表示正在被遍历的那个dom对象的下标（下标从0开始）
c，eq（index）：将下标等于index的dom对象取出来，并且封装成一个jquery对象。
d，get（index）：将下标等于index的dom对象取出来。
e，get（）：返回一个dom对象组成的数组。
f，index（obj）：返回dom或jquery对象在类数组中的下标
-->
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<input type="button" value="类数组操作" id="b1"/>
</body>
</html>
7 jQuery对Ajax的支持
7.1 问题
jQuery对Ajax的实现。
7.2 方案
使用$.load(),$.get(),$.post(),$.ajax()方法发送异步请求。
7.3 步骤
步骤一：$.load()方法
新建emps.jsp页面
图- 36
添加异步请求代码：
图- 37
新建ActionServlet类：
图- 38
运行查看结果：
图- 39
步骤二：$.get()/$.post()方法
新建stock.jsp页面
图– 40
图- 41
新建Stock.java文件：
图- 42
修改ActionServlet类：
图- 43
发送post请求的代码：
图- 44
运行查看结果：
图– 45
每隔四秒钟，信息就会更新一次，在不断的变化。
修改post请求为get请求时，相关参数不变，只有在IE浏览器下会存在缓存的问题，所以在请求地址后面追加一个随机数就可以欺骗IE浏览器，让其认为请求的数据有变化。运行结果同图-45相同。
步骤三：$.ajax()方法
新建stock2.jsp页面
基本结构和CSS样式和stock.jsp页面内容一致。
添加异步请求代码：
图- 46
运行查看结果：
与图-45结果相同
7.4 完整代码
emps.jsp文件代码如下：
<%@page pageEncoding="utf-8"
contentType="text/html;charset=utf-8" %>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('.s1').click(function(){
var eId =
$(this).parent().siblings().eq(0).text();
$(this).next().load('salary.do','eId=' + eId);
});
});
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0"
width="50%" border="1">
<tr><td>员工号</td><td>员工姓名</td><td> </td>
</tr>
<tr>
<td>T10001</td><td>张三</td><td>
<a href="javascript:;"class="s1">
显示工资明细</a>
<div></div>
</td>
</tr>
<tr><td>T10002</td><td>李四</td><td>
<a href="javascript:;"class="s1">
显示工资明细</a>
<div></div>
</td>
</tr>
</table>
</body>
</html>
stock.jsp文件代码如下:
<%@page pageEncoding="utf-8"
contentType="text/html;charset=utf-8" %>
<html>
<head>
<style>
#d1{
width:450px;
height:280px;
background-color:black;
margin-left:400px;
margin-top:50px;
}
#d2{
color:white;
background-color:purple;
height:35px;
}
table{
color:white;
font-size:24px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
setInterval(quoto,4000);
});
function quoto(){
$.post('quoto.do',function(data){
//data:服务器返回的数据,如果
//是json字符串，会自动转换成相应的
//javascript对象。
$('#tb1').empty();
for(i=0;i<data.length;i++){
var s = data[i];
$('#tb1').append(
'<tr><td>' + s.code
+ '</td><td>' + s.name
+ '</td><td>' + s.price
+ '</td></tr>');
}
},'json');
}
</script>
</head>
<body style="font-size:30px;font-style:italic;">
<div id="d1">
<div id="d2">股票实时行情</div>
<div id="d3">
<table width="100%" cellpadding="0"
cellspacing="0">
<thead>
<tr><td>代码</td><td>名称</td>
<td>价格</td></tr>
</thead>
<tbody id="tb1">
</tbody>
</table>
</div>
</div>
</body>
</html>
stock2.jsp文件代码如下：
<%@page pageEncoding="utf-8"
contentType="text/html;charset=utf-8" %>
<html>
<head>
<style>
#d1{
width:450px;
height:280px;
background-color:black;
margin-left:400px;
margin-top:50px;
}
#d2{
color:white;
background-color:red;
height:35px;
}
table{
color:white;
font-size:24px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
setInterval(quoto,4000);
});
function quoto(){
$.ajax({
url:"quoto.do",
type:"post",
dataType:"json",
success:function(data){
$('#tb1').empty();
for(i=0;i<data.length;i++){
var s = data[i];
$('#tb1').append(
'<tr><td>' + s.code
+ '</td><td>' + s.name
+ '</td><td>' + s.price
+ '</td></tr>');
}
},
error:function(){
//服务器出错之后的处理逻辑。
}
});
}
</script>
</head>
<body style="font-size:30px;font-style:italic;">
<div id="d1">
<div id="d2">股票实时行情</div>
<div id="d3">
<table width="100%" cellpadding="0"
cellspacing="0">
<thead>
<tr><td>代码</td><td>名称</td><td>价格</td></tr>
</thead>
<tbody id="tb1">
</tbody>
</table>
</div>
</div>
</body>
</html>
Stock.java文件代码如下：
package bean;
public class Stock {
private String code;
private String name;
private double price;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
}
ActionServlet.java文件代码如下:
package web;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import bean.Stock;
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String uri = request.getRequestURI();
String action =
uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(action.equals("/salary")){
String flight = request.getParameter("eId");
if(flight.equals("T10001")){
out.println("实际工资：￥10000<br/>个税:￥2500");
}else{
out.println("实际工资：￥20000<br/>个税:￥5000");
}
}else if(action.equals("/quoto")){
Random r = new Random();
List<Stock> stocks =
new ArrayList<Stock>();
for(int i=0;i<8;i++){
Stock s = new Stock();
s.setCode("60001" +r.nextInt(10));
s.setName("中国国贸" + r.nextInt(10));
DecimalFormat df = new DecimalFormat("0.00");
double price = Double.parseDouble(
df.format(100 * r.nextDouble()));
s.setPrice(price);
stocks.add(s);
}
JSONArray jsonArr =
JSONArray.fromObject(stocks);
String jsonStr = jsonArr.toString();
System.out.println(jsonStr);
out.println(jsonStr);
}
out.close();
}
}