JQuery 第一天
demo01.jsp 基本步骤
demo02.jsp JQuery获取元素对象 以及方法级联
demo03.jsp Dom对象和Jquery对象的转化
demo04.jsp Dom对象和 Jquery对象事件操作对比
demo05.jsp JQuery对象访问元素更改CSS样式
demo06.jsp JQuery访问CSS样式 类选择器,ID选择器,标签选择题
另外,所学的课件太大了无法上传
有JQuery API帮助文档 chm 格式,便于学习其中的方法,很方便.至于JQuery如何去配置,网上都有的,引入js文件即可
<%@ 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>JQuery DEMO 01</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="styles.css">
-->
<!--引入 jquery.js 文件-->
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //等待Dom元素加载完毕
alert("Hello world!");
});
$(document).ready(function(){ //等待Dom元素加载完毕
alert("Hello JQuery!");
});
//省略的写法
$(function(){alert("Hello $!");});
</script>
</head>
<body>
<a href="index.jsp">Back to Index Page</a>
</body>
</html>
demo02.jsp 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>JQuery DEMO 02</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="styles.css">
-->
<style type="text/css">
#menu{width:200px;}
.sub_menu{background-color:#273883;cursor:hand;}
.high_light{color:white;background:black;}
div{padding:0px;margin:10px 0;}
div a{display:none;float:left;width:200px;background-color:white;color:blue;}
</style>
<!--引入 jquery.js 文件-->
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$(".sub_menu").click(function(){
//alert("Hello world!");
$(this).addClass("high_light") //为当前元素添加 high_light 类选择器
.children("a").show().end() //将对象子节点的 a 元素显示出来 end-重新定位到上次操作的元素
.siblings().removeClass("high_light") //将相邻的兄弟节点 去掉 high_light 选择器
.children("a").hide(); //将兄弟节点下的 a 元素隐藏掉
}
);
})
</script>
</head>
<body>
<a href="index.jsp">Back to Index Page</a>
<div id="menu">
<div class="sub_menu">
<span>BLOG PAGE</span>
<a href="demo02.jsp">blog article</a>
<a href="demo02.jsp">blog photo</a>
<a href="demo02.jsp">blog bbs</a>
<a href="demo02.jsp">blog manager</a>
</div>
<div class="sub_menu">
<span>BLOG PAGE</span>
<a href="demo02.jsp">blog article</a>
<a href="demo02.jsp">blog photo</a>
<a href="demo02.jsp">blog bbs</a>
<a href="demo02.jsp">blog manager</a>
</div>
<div class="sub_menu">
<span>BLOG PAGE</span>
<a href="demo02.jsp">blog article</a>
<a href="demo02.jsp">blog photo</a>
<a href="demo02.jsp">blog bbs</a>
<a href="demo02.jsp">blog manager</a>
</div>
</div>
</body>
</html>
demo03.jsp Dom对象和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>JQuery DEMO 03</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="styles.css">
-->
<style type="text/css">
</style>
</head>
<body >
<a href="index.jsp">Back to Index Page</a>
<h1 id="bd"><font color="red">Page Demo 03</font></h1>
</body>
<!--引入 jquery.js 文件-->
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
//dom 的操作
var str_html1=document.getElementById("bd").innerHTML;
alert("Dom method:"+str_html1);
//JQuery 操作的方式
var str_html2=$("#bd").html();
alert("JQuery method:"+str_html2);
//dom 对象可以转化为JQuery对象
var objBD = document.getElementById("bd");
alert("objdb:"+objBD.innerHTML);
//转换为JQuery对象
var $bd = $(objBD);
alert("objdb"+$bd.text());
</script>
</html>
demo04.jsp Dom对象和 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>JQuery DEMO 04</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="styles.css">
-->
<style type="text/css">
</style>
<!--引入 jquery.js 文件-->
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){ //等待 dom 元素加载完毕
var $cr = $("#cr"); //JQuery对象
var cr = $cr[0]; //Dom对象,或者 $cr.get(0);
//点击时
$cr.click(function (){
// if(cr.checked){ //Dom操作方式
// alert("感谢你的支持！");
// }
if($cr.is(":checked")){
alert("感谢你的支持！"); //JQuery操作方式
}else{
alert("一定要支持！");
}
});
});
</script>
</head>
<body>
<a href="index.jsp">Back to Index Page</a>
<form action="#" method="post">
是否同意协议:<input type="checkbox" id="cr"><label>我已经阅读了上面的协议</label>
</form>
</body>
</html>
demo05.jsp JQuery对象访问元素更改CSS样式
<%@ 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>JQuery DEMO</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="styles.css">
-->
<style type="text/css">
#sp {
font-size: 40px;
font-weight: 300;
color: blue;
}
</style>
<!--引入 jquery.js 文件-->
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js">
</script>
<script type="text/javascript">
$(function(){
$("#sp").click(function(){
alert("Hello JQuery!");
//在alert之后 要把这个对象的CSS样式加以改变
$("#sp").css("font-size", "20px");
$("#sp").css("color", "red");
});
});
</script>
</head>
<body>
<a href="index.jsp">Back to Index Page</a>
<span id="sp">This is a Span Area!</span>
</body>
</html>
demo06.jsp JQuery访问CSS样式 类选择器,ID选择器,标签选择题
<%@ 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>JQuery DEMO</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="styles.css">
-->
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Arial;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<!--引入 jquery.js 文件-->
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js">
</script>
<script type="text/javascript">
$(function(){
//所有class为one的元素的背景颜色改变
$(".one").css("background","#eeeeee");
//所有id为one的元素的字体颜色改变
$("#one").css("color","blue");
//改变所有标签为 div
$("div").css("font-size","12px");
//所有元素
$("*").css("border","1px inset red");
//改变所有id为two,标签span的元素
$("#two,span").css("background-color","yellow");
});
</script>
</head>
<body>
<a href="index.jsp">Back to Index Page</a>
<div class="one" id="one">
id 为 one,class为one的div
<div class="mini">
class 为 mini 的 div
</div>
</div>
<div class="one" id="two" title="test">
id 为 two,class为one的div,title为test 的div
<div class="mini" title="other">
class 为 mini 的 div,title为other的div
</div>
<div class="mini" title="test">
class 为 mini 的 div,title为test的div
</div>
</div>
<div class="one">
<div class="mini">
class 为 mini 的 div
</div>
<div class="mini">
class 为 mini 的 div
</div>
<div class="mini">
class 为 mini 的 div
</div>
<div class="mini">
</div>
</div>
<div class="one">
<div class="mini">
class 为 mini 的 div
</div>
<div class="mini">
class 为 mini 的 div
</div>
<div class="mini">
class 为 mini 的 div
</div>
<div class="mini" title="test">
class为mini,title为 test 的div
</div>
</div>
<div style="display:none" class="none">
style的display为 none的 div
</div>
<div class="hide">
class为 hide的 div
</div>
<div>
包含 input type为 hidden的 div<input type="hidden" size="8"/>
</div><span id="mover">正在执行动画的span元素</span>
</body>
</html>
另外,所学的课件太大了无法上传
有JQuery API帮助文档 chm 格式,便于学习其中的方法,很方便.至于JQuery如何去配置,网上都有的,引入js文件即可