lvp
- 浏览: 116003 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
zxjlwt：
学习了。http://surenpi.com
JSP 编译和运行过程与JSP源码简单分析 -
KevinDai007：
KevinDai007 写道这个项目是不是我问题?我在我电脑上 ...
AJAX无刷新聊天室实现(压缩包附件下载) -
KevinDai007：
这个项目是不是我问题?我在我电脑上运行时，找开第二个窗口后，那 ...
AJAX无刷新聊天室实现(压缩包附件下载) -
shuixiafeiqiao：
JSP 无数据库型简单聊天室 附件源码 -
shuixiafeiqiao：
...
JSP 无数据库型简单聊天室 附件源码
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文件即可
- jQueryAPI-100214.rar (218.5 KB)
- 下载次数: 10
分享到：
发表评论
-
JQuery 第二天 - 表单对象属性过滤选择器
2010-03-30 11:51 2135<%@ page language="java ... -
JQuery 第二天 - 属性过滤选择器
2010-03-30 11:21 1660<%@ page language="java ... -
JQuery 第二天 - 内容过滤选择器
2010-03-30 11:07 1288<%@ page language="java ... -
JQuery 第二天 - 过滤选择器
2010-03-30 10:34 1224[size=x-small]<%@ page langu ... -
JQuery 第二天 - 层次选择器
2010-03-30 10:13 1199<%@ page language="ja ... -
AJAX无刷新聊天室实现(压缩包附件下载)
2009-04-12 18:28 11894之前也写了一个小的聊 ... -
Ajax无刷新表格行内编辑源码带数据库
2009-04-04 18:27 10158Ajax 页面无刷新完整 表格编辑 姓名验证 增 删 改 查 ...
相关推荐
好了开始我的Jquery第一天。 我也是从Hello wrod!开始的。关于jquery 的引用我直接一笔带过。如下： 代码如下: <html> <head> <title>jquery 链式操作</title> [removed][removed] [removed...
传智播客的JQuery第一天的第一部分视频
在“（三天熟练jQuery）第一天”的课程中，我们主要会接触到jQuery的基础知识，这是一个非常流行的JavaScript库，极大地简化了DOM操作、事件处理、动画效果和AJAX交互等任务。jQuery的易用性和广泛的社区支持使其...
传智播客JQuery第一天第二部分
【标题】：“学习jQuery MVC第一天，Hello” 这篇文章的标题表明了作者正开始探索jQuery与MVC（Model-View-Controller）架构的结合使用。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果以及...
JQuery对象是一个集合，包含一个或多个DOM元素，提供了一系列的方法来操作这些元素。 5. **静态方法与实例方法**： - 静态方法（如`$.each()`）是直接通过类名调用的，不依赖于特定的实例。 - 实例方法（如`$(.....
标题"一天弹一次jquery.cookie插件.zip"指的是一个专门设计的jQuery插件，这个插件的核心功能是控制弹窗（通常是指网页中的提示、广告或通知）只在用户首次访问或者关闭后的一天内显示一次。这种功能在网页用户体验...
**第5天至第10天：jQuery进阶** 1. **插件开发**：学习如何编写和使用jQuery插件，扩展jQuery的功能。 2. **遍历与过滤**：掌握`.each()`, `.siblings()`, `.children()`, `.parent()`, `.closest()`等遍历和过滤...
jQuery是由John Resig创建的一个轻量级、高性能的JavaScript库，它的核心理念是“写得更少，做得更多”。jQuery通过提供一套简洁的API，极大地减少了开发者编写JavaScript代码的复杂度，提高了开发效率。 **使用...
在这个场景下，`jquery.cookie` 插件的应用可以帮助我们实现一个更智能的弹窗策略：用户关闭弹窗后，一天内不再显示。接下来，我们将详细讲解如何使用 `jquery.cookie` 插件以及实现这个功能的具体步骤。 首先，`...
在深入探讨jQuery第4天的学习知识点之前，先简要介绍一下jQuery。jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务，极大地提高了开发者的效率。今天我们将主要关注...
链式编程是jQuery设计的一大亮点，它允许开发者在一个语句中连续调用多个方法。因为每次方法调用都会返回一个jQuery对象（通常是原始或修改后的对象），所以可以继续调用其他方法。例如： ``` $('p').addClass('...
#### 第0天：认识jQuery - **What**：jQuery是一个优秀的JavaScript库，能够让我们仅用少量的代码就能创造出美观的页面效果。它的出现让JavaScript变得更加有趣和易于使用。 - **Why**：为什么应该考虑使用jQuery...
在“（三天熟练jQuery）第二天”的课程中，我们主要聚焦于深入理解jQuery库的基础知识，以及如何有效地利用它来提升Web开发效率。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和...
第一天：jQuery基础 - jQuery引入：学习如何在HTML文档中引入jQuery库，了解CDN和本地引入的区别。 - 选择器：掌握jQuery中的基本选择器（ID选择器、类选择器、元素选择器等）以及组合选择器，用于高效地定位DOM元素...
在第一天的学习中，我们将了解jQuery的基本概念，包括如何引入jQuery库到HTML文档中，以及使用"$"符号来调用jQuery方法。我们还将学习选择器，这是jQuery中最基本的部分，用于选取HTML元素，如ID选择器、类选择器和...
尚硅谷_佟刚_jQuery_第一天小结【】12.尚硅谷_佟刚_jQuery_选择器的练习【】13.尚硅谷_佟刚_jQuery_创建节点及插入节点【】14.尚硅谷_ 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
第一天：jQuery基础 1. jQuery引入：了解如何在HTML文档中引入jQuery库，包括CDN链接和本地文件引入。 2. jQuery选择器：学习基本的选择器（ID、类、元素），组合选择器，属性选择器等，以及如何利用它们高效地选取...
jQuery UI 是 jQuery 库的一个插件库，提供了许多实用的功能，例如动画效果、交互组件、部件等。下面将详细介绍 jQuery UI 的一些重要知识点。 一、 Effect（效果） jQuery UI 的 Effect 模块提供了许多有用的...