先来看看jquery的一些简单效果
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript">
$(function(){
//绑定鼠标进入添加样式
$("p").on("mouseenter",function(){
$(this).addClass("test");
});
//绑定鼠标离开移除样式
$("p").on("mouseleave",function(){
$(this).removeClass("test");
});
//移动元素
//移动到元素之后
$("p").insertAfter($("#content"));
//移动到元素之前
$("#spanCon").insertBefore($("#content"));
//移动到内容之中
$("#spanMov").appendTo($("#content"));
//复制元素
$("#spanCon").clone().appendTo($("#content"));
//清除内容
//$("#content").empty();
$("<p>插入的内容</p>").insertAfter($("#content"));
//新建一个a标签 并添加到id为content的元素之后
$("<a/>",{
href:"http://www.baidu.com",
html:"插入的超链接",
"class":"test"
}).insertAfter($("#content"));
//数组操作
//重复添加多个元素
var myItems=[];
for(var i=0;i<6;i++)
{
myItems.push("<li>这是第"+i+"个</li>");
}
$("#testUl").append(myItems.join(""));
//属性操作 匿名函数用于返回a标签的href的新值
$("a").attr("href",function(index,href){
return "http://www.google.com";
});
//获取到jquery对象的指定位置的元素 eq获取到jquery object
//get 获取到dom element
//每一个jquery object都是唯一的
console.log($("div").eq(0)==$("div").eq(0));
console.log($("div").get(0)==$("div").get(0));
/* $("div").eq(0).html($("span").eq(0).html()); */
});
</script>
</head>
<body>
<span id="spanMov">this is a span,move to content.</span>
<span id="spanCon">this is span.</span>
<p>This is my JSP page. </p>
<hr/>
<div id="content" style="border:1px solid red">
我是内容选择区
</div>
<ul id="testUl">
</ul>
</body>
</html>
看看效果:
上面展示了一些jquery的事件绑定、插入元素、移动元素、修改元素的属性以及jquery与dom操作的区别
再来分别看看jquery的一些模块:
1.ajax--Asynchronous JavaScript and XML--
不过按照jquery的官方手册所说的那样,虽然名字叫ajax,但是ajax传输数据都是使用纯html文本或者是json
看看测试代码 ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript">
$(function(){
//get数据 异步发送请求
$.get("data.jsp",function(data){
console.log(data);
});
//ajax请求
$.ajax({
url:"data.jsp",
data:{name:"张三"},
type:"get",
dataType:"text",
timeout:"2000",
success:function(response,xhr,status){
console.log("the data is "+response);
},
error:function(xhr,status){
console.log("the request is error.");
} ,
complete:function(xhr,status){
console.log("完成请求");
}
});
$("#loginForm").submit(function(event){
if($("input[name='username']").val().length==0){
alert("用户名不能为空!!");
return false;
}
if($("input[name='password']").val().length==0){
alert("密码不能为空!!");
return false;
}
event.preventDefault(); //阻止表单提交
event.stopPropagation(); //阻止表单冒泡
$.ajax({
url:"jquery/form1.action",
data:$("#loginForm").serialize(),
type:"get",
success:function(response,xhr,sts){
if(response=="true") {
//alert("通过密码验证"+response);
$(window).attr("location","index.jsp");
}
else alert("账号或者密码出错"+response);
}
});
});
});
</script>
</head>
<body>
ajax测试界面
<hr/>
<form id="loginForm" action="jquery/form1.action">
用户名:<input type="text" name="username" />
密码:<input type="text" name="password">
<input type="submit" value="提交"/>
</form>
</body>
</html>
data.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String value=(String)request.getParameter("name");
if("张三".equals(value))
response.getWriter().write("返回数据,数据为"+value);
else
response.getWriter().write("无法返回数据");
%>
看看控制台:
查看上面的控制台输出 你会发现 在ajax.jsp的测试页面 发起了get和ajax两个异步请求 get没有传递参数name 而ajax传递了参数name 所以在控制台的输出不一样 为避免中文乱码的现象产生 将ajax.jsp和data.jsp页面的编码都设为utf-8即可
上面测试代码 还有一个表单的验证与异步提交功能 当输入12和张三后 会跳转到index.jsp界面
struts.xml 的配置代码
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<package name="jquery" namespace="/jquery" extends="struts-default">
<action name="form1" class="com.undergrowth.FormTest" method="execute">
<result name="success">
/index.jsp
</result>
<result name="fail">
/data.jsp
</result>
</action>
<action name="form2" class="com.undergrowth.FormTest" method="trans">
<result name="success">
/index.jsp
</result>
<result name="fail">
/data.jsp
</result>
</action>
</package>
</struts>
action的代码很简单
package com.undergrowth;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
public class FormTest {
private String username;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
private String password;
public void execute()
{
//String retString=null;
String retValueString="";
try {
if("12".equals(username)&&"张三".equals(password))
retValueString="true";
else {
retValueString="false";
}
//System.out.println(username+" "+password);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/text;charset=utf-8");
PrintWriter writer = response.getWriter();
writer.write(retValueString);
writer.flush();
writer.close();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
//return retString;
}
public String trans()
{
String retValueString="";
if("12".equals(username)&&"张三".equals(password))
retValueString="success";
else {
retValueString="fail";
}
return retValueString;
}
}
在用户名和密码框分别输入12和张三 即可跳入到index.jsp界面
上面即使 jquery的ajax的三个测试代码 其实无论是get还是post 都是使用ajax方法来进行交互的 并且ajax方法接受一个plainObject对象 很方便处理
2.effect---效果
看看测试代码 通过不同的方式隐藏元素
<%@ page language="java" contentType="text/html; charset=UTF-8"
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>Insert title here</title>
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript">
$(function(){
//alert($("p").first().width()+" 高度为:"+$("p").first().height());
//隐藏 slow normal fast 500ms
//hide改变高度和宽度
$("p").first().hide(function(){
//alert($("p").first().width()+" 高度为:"+$("p").first().height());
});
// alert($("p").first().width()+" 高度为:"+$("p").first().height());
//slide 改变高度 向上滑动隐藏效果
$("div").first().slideUp(300,function(){
//alert($(this).width()+" 高度为:"+$(this).height());
});
//fade 改变透明度 隐藏元素 通过改变透明度
$("a").first().fadeOut(300);
//toggle 开关显示或者隐藏
// $("p").toggle(1000);
//延时段落
$("p").first().toggle(1000).delay(1000).show(1000);
//停止段落
// $("body *").filter(":animated").stop();
//使用animate自定义动画
$("span").last().animate({
left:"500",
top:"300",
opacity:0.25
},1000,function(){
console.log("完成动画");
});
});
</script>
</head>
<body>
<p>隐藏段落1</p>
<div>
隐藏区块1
</div>
<a href="http://www.baidu.com">隐藏链接</a>
<span>隐藏span1</span>
</body>
</html>效果:
3.event---事件
测试代码 event.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript" src="js/jquery.simulate.js"></script>
<script type="text/javascript">
$(function(){
//hover事件 提供一个函数 则mouseenter和mouseleave都调用这个函数
$("p").first().hover(function(){
$(this).toggleClass("test");
});
//事件委托给document 新添加的元素也能够响应相应的事件
$(document).on("click","span",function(){
console.log($(this).text());
});
//新建一个span 添加到第一个div中 因为上面span的click事件委托给了document 所以这个添加的span也具有click响应事件
$("<span>最后一个span</span>").appendTo($("div").first());
//显示事件相关的内容 传递事件数据给事件处理器
$("div").last().click({name:"qq"},function(eventObject){
var $th=$(this);
//显示事件的详细信息
$th.html($th.text()+"<br/>事件类型为:"+eventObject.type+"<br/>pageX,pageY:"+eventObject.pageX
+","+eventObject.pageY
+"<br/>数据为:"+eventObject.data.name+"<br/>目标dom的内容为:"+$(eventObject.target).text()
+"<br/>时间为:"+eventObject.timeStamp+"<br/>命名空间为:"+eventObject.namespace
+"<br/>按钮为:"+eventObject.which+"<br/>所有事件为:"+eventObject);
console.dir(eventObject);
});
//on绑定多个事件
$("p").first().on("click focus",function(){
console.log($(this).text());
});
//取消a标签的链接
/* $("a").last().click(function(eventObject){
eventObject.preventDefault();
alert($(this).text());
}); */
var pText=$("p").last().text();
window.console.log(pText);
//on绑定事件的另一种写法
$("a").last().on({
mouseenter:function(){
console.log("a标签的悬停");
},
mouseleave:function(){
console.log("a标签的离开");
}
});
//事件委托
/* $("ul").on("mouseenter","li",function(){
//alert($(this).text());
$("a").last().simulate("click");
}); */
//
});
</script>
</head>
<body>
<p>这是事件测试代码</p>
<span>事件一</span>
<span>事件二</span>
<div></div>
<div>显示事件属性</div>
<ul>
<li><a href="http://www.baidu.com">取消链接</a></li>
<li>测试li</li>
</ul>
</body>
</html>效果
其实对于eventObject 在chrome里的控制台都有输出 与界面上的显示一致
4.load事件与ajax的全局事件与对象愿意模型
测试代码 load.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
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>Insert title here</title>
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript">
//对象原意模型 plainObject
var dealFuncObj={
loadComplete:function(response,status,xhr){
console.log("装载完成,状态为:"+status);
},
ajaxComplete:function(event,request,settings){
// alert(settings.url);
// $("#disLoadContent2").html($("#disLoadContent2").html()+"<br/>url:"+settings.url);
console.log("结束ajax");
},
ajaxSuccess:function(data,status,xhr){
$("#disLoadContent3").html($("#disLoadContent3").html()+"<br/>data:"+data);
},
ajaxError:function(event,request,settings){
if(settings.url=="ajax/error.jsp") {
$("div.error").text("该"+settings.url+"不存在");
}
},
ajaxStart:function(){
console.log("开始ajax");
}
};
$(function(){
//给div添加css样式
$("div").css({
border:"1px red solid",
marginTop:"5px"
});
//只会在第一次进行ajax的时候 才调用ajax
$(document).ajaxStart(dealFuncObj.ajaxStart);
//使用load获取页面指定内容 填充到该页面id为disLoadContent的div
$("#disLoadContent").load("loadData.jsp #content");
//传递数据 返回数据 获取整个页面内容
$("#disLoadContent2").load("loadData.jsp",{name:"张三"},dealFuncObj.loadComplete);
//ajaxComplete 全局事件 每一个ajax调用完成 即调用此方法
$(document).ajaxComplete(dealFuncObj.ajaxComplete);
//当ajax出错时 调用
$(document).ajaxError(dealFuncObj.ajaxError);
//global属性将全局的事件屏蔽掉
$.ajax({
url:"loadData.jsp",
data:{name:"张三"},
global:false, //屏蔽全局的ajax事件
type:"get",
success:dealFuncObj.ajaxSuccess
});
$("div.error").load("ajax/error.jsp");
//解析对象或者数组为查询字符串
var dataOri={a:[1,2,3]};
var dataObj={one:1,two:2,three:3};
$("div>span").each(function(){
$(this).text($.param(dataObj)+" "+$.param(dataOri));
});
});
</script>
</head>
<body>
<div id="disLoadContent"></div>
<div id="disLoadContent2"></div>
<div id="disLoadContent3"></div>
<div class="error"></div>
<div>
<span></span>
</div>
</body>
</html>
loadData.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
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>Insert title here</title>
</head>
<body>
<div id="content">显示load的数据</div>
<%
if("张三".equals(request.getParameter("name"))){
%>
<div>显示load的另外数据</div>
<%
}
%>
</body>
</html>效果
5.对象原意模型与模块模型
测试代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
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>Insert title here</title>
<script type="text/javascript" src="js/importJquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript">
//对象原意模型 对象原意模型中的所有成员都是共有的
var objectLiteral={
onReady:function(){
$("p").first().hover(objectLiteral.addBackColor);
$("span").first().on("click",myModulePatt.sayDisPriText);
//添加多个类
$("span").last().text(myModulePatt.disPubText).addClass("selected test");
//添加类匿名函数
$("div").addClass(objectLiteral.addClassByIf);
},
addBackColor:function(){
$(this).toggleClass("test");
},
addClassByIf:function(idx,currClass){
var newClass="selected";
if(currClass.length==0) newClass="test";
return newClass;
}
};
//模块模型编程 只有通过return返回的变量还有函数才是共有的 可以被外部所访问
var myModulePatt=(function(){
var disPriText="显示私有的模块模型编程";
var disPubText="显示公有的模块模型编程";
var sayDisPriText=function(){
console.log(disPriText);
$(this).text(disPriText);
};
return{
disPubText:disPubText,
sayDisPriText:sayDisPriText
};
})();
$(objectLiteral.onReady);
</script>
</head>
<body>
<p>这是对象原意模型测试段落</p>
<span>测试模块模型编程</span><hr/>
<span>测试模块模型编程</span>
<div>测试添加多个类的方法</div>
</body>
</html>效果
6.查找元素与其他
测试
<%@ page language="java" contentType="text/html; charset=UTF-8"
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>Insert title here</title>
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript">
$(function(){
var saveContent=$("#surPar2");
//找到父类 parent找到上一级父类 parents找到上一级所有父类
saveContent.html(saveContent.text()+"<br/>"+$("#childPa").parent().text());
saveContent.html(saveContent.text()+"<br/>"+$("#childPa").parents().length);
/* $("#childPa").parents().each(function(idx,ele){
}); */
//找到最近的父亲
//alert($("#childPa").closest("p").length);
//找到子元素
//find 可以在父类下面多级子类 children只能找下一级的子类
saveContent.html(saveContent.html()+"<br/>"+$("#par1").find("p").html());
//找到兄弟
saveContent.html(saveContent.html()+"<br/>"+$("#par1").next().html()+"<br/>"+$("#par1").prev().length+"<br/>"+$("#par1").nextAll().last().html());
//添加css
$("#surPar2").css({
color:"red",
fontSize:"28px"
});
//data 操作
//$("#par2").data("dataKey",{foo:"red"});
//alert($("#par2").data("dataKey"));
//工具方法
//去除字符串头和尾的空格
// alert($.trim(" qq ").length);
//遍历
/* $.each(["q","w"],function(idx,val){
alert("index:"+idx+" value:"+val);
});
$.each({name:"q",age:15},function(k,v){
alert("key:"+k+" value:"+v);
}); */
//判断是否在数组中
// alert($.inArray(4,[1,2,3,4]));
//attr方法的匹配
//获取集合中匹配的第一个元素
// alert($("img").attr("src"));
//设置集合中的所有元素
$("img").attr({
src:"images/hej.jpg"
});
$("#gi").attr({
title:"华尔街",
alt:"qq",
"100px;",
height:"100px"
});
$("#gi").attr("title",function(idx,val){
return "修改过的"+val;
});
//css方法的匹配
//alert($("#surPar2").css("width"));
//css获取多个属性
var html=["显示内容区域的内容为:"];
$.each($("#surPar2").css(["width","height","backgroundColor"]),function(prop,val){
html.push(prop+":"+val);
});
//将上面获取到的多个属性数组以字符串的形式显示在第一个p中
$("p").eq($("p").length-2).html(html.join("<br/>"));
//一次单击事件 +=表示在原来基础上加上100
$("#gi").one("click",function(){
$(this).css("width","+=100");
});
//获取每一个单词的底板颜色
$("p").last().css("border","1px solid red");
var words=$("p").last().text().split(" ");
var text=words.join("</span> <span>");
$("p").last().html("<span>"+text+"</span>");
$("span").click(function(idx,ele){
$("span").css("backgroundColor","");
$(this).css("backgroundColor","red");
});
//改变最后一个段落的宽度和高度
$("p").last().click(function(){
$(this).css({
function(idx,val){
return parseFloat(val)*1.1;
},
height:function(idx,val){
return parseFloat(val)*1.8;
}
});
});
//val的值可以接受一个函数
$("input").val(function(idx,val){
return "index:"+idx+" value:"+val;
});
//获取到元素属性的集合
$("div").last().html($("div").last().html()+" ");
/* alert($("p").map(function(idx,ele){ //ele为dom元素 需要转换为jquery object
return $(ele).html();
}).get().join("<br/>")); */
$("p").last().css("display","none");
//判断一个元素是否隐藏 若是隐藏 则显示
if($("p").last().is(":hidden")){
$("p").last().show();
}
//动画
//$("#gi:visible").animate({ "+=200px"},2000,function(){alert("动画完成");});
//禁用、使能元素
/* $("input").prop("disabled",true);
$("div").on("click",function(){
//alert("ok");
$("input").prop("disabled",false);
}); */
//选择复选框 单选框
$("#cb").prop("checked",true);
$("#dx").prop("checked",false);
//获取select的value和text
//alert($("#selId").val()+$("#selId").text());
});
</script>
</head>
<body>
<div id="par2">
祖父元素
<hr/>
<div id="par1">
父元素
<p id="childPa">子元素</p>
</div>
<hr/>
<div id="surPar1">
父兄弟元素
</div>
</div>
<hr/>
<div id="surPar2">
祖父兄弟元素
</div>
<img id="gi" src="images/hej.jpg" alt="图片1" />
<!-- <img id="td" src="images/td.jpg" alt="图片2" /> -->
<p></p>
<p>
this is a css param,if you click one, you will find more
</p>
<input type="text" value="测试input" />
<input type="checkbox" id="cb" >选择
<br/>
<input type="radio" id="dx" >单选
<select id="selId">
<option value="1">第一个</option>
</select>
</body>
</html>效果
