本文介绍了通过JavaScript和jQuery实现在网页中动态加载内容及实现简单交互效果的方法，包括URL参数解析、请求发送、响应处理及窗口弹出、菜单展开等应用场景。详细展示了如何使用jQuery轻松实现淡入淡出效果的浮动窗口，并提供了代码示例。
String name = (String)enu.nextElement();
if(!name.equals("url")){
if(total == 0){
param.append(name).append("=").append(URLEncoder.encode(request.getParameter(name),"UTF-8"));
} else{
param.append("&").append(name).append("=").append(URLEncoder.encode(request.getParameter(name),"UTF-8"));
}
total++;
}
}
PrintWriter out = response.getWriter();
if(url != null){
URL connect = new URL(url.toString());
URLConnection connection = connect.openConnection();
connection.setDoOutput(true);
OutputStreamWriter paramout = new OutputStreamWriter(connection.getOutputStream());
paramout.write(param.toString());
paramout.flush();
BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream(),"GB2312"));
String line;
while((line = reader.readLine()) != null){
out.println(line);
}
paramout.close();
reader.close();
}
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, java.io.IOException {
response.setContentType("text/html;charset=GB2312");
StringBuffer url = new StringBuffer();
url.append(request.getParameter("url"));
Enumeration enu = request.getParameterNames();
int total = 0;
while(enu.hasMoreElements()){
String name = (String)enu.nextElement();
if(!name.equals("url")){
if(total == 0){
url.append("?").append(name).append("=").append(URLEncoder.encode(request.getParameter(name),"UTF-8"));
} else{
url.append("&").append(name).append("=").append(URLEncoder.encode(request.getParameter(name),"UTF-8"));
}
total++;
}
}
PrintWriter out = response.getWriter();
if(url != null){
URL connect = new URL(url.toString());
BufferedReader reader = new BufferedReader(new InputStreamReader(connect.openStream(),"GB2312"));
String line;
while((line = reader.readLine()) != null){
out.println(line);
}
reader.close();
}
http://www.sohu.com/index.html?name=123&id=000
Proxy?url=http://www.sohu.com/index.html&name=123&id=000
url=http://www.sohu.com/index.html&name=123&id=000
http://www.sohu.com/index.html?id=000&name=123
//我们
}
}
DOM的内容
Jquery实现淡入淡出的效果：
JqueryWindow.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>itcast.cn的JQuery实例1：浮动窗口</title>
<!--链接外部的js文件-->
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jquerywin.js"></script>
<!--链接外部的css文件-->
<link type="text/css" rel="stylesheet" href="css/win.css" />
</head>
<body>
<a οnclick="showwin()" href="#">显示浮动窗口</a>
<!--如何表示页面中的一个弹出窗口?可以使用div来表示-->
<!--目前怎么看都不是一个窗口，因此需要用css来改变一下这个div的样子-->
<!--出现标题栏和内容区域-->
<div id="win">
<div id="title">我是标题栏啊！！<span id="close" οnclick="hide()">X</span></div>
<div id="content">我是一个窗口哦！！</div>
</div>
</body>
</html>
jquerywin.js
//显示浮动窗口的方法
function showwin() {
//lert("准备显示弹出窗口啦！！！");
//1.找到窗口对应的div节点
var winNode = $("#win");
//2.让div对应的窗口显示出来
//方法1,修改节点的css值，让窗口显示出来
//winNode.css("display","block");
//方法2，利用Jqeury的show方法
//winNode.show("slow");
//方法3，利用JQuery的fadeIn方法
winNode.fadeIn("slow");
}
//隐藏窗口的方法
function hide() {//方式方法要对应
//1.找到窗口对应的节点
var winNode = $("#win");
//2.将窗口隐藏起来
//方法1，修改css
//winNode.css("display","none");
//方法2，利用hide方法
//winNode.hide("slow");
//方法3，利用fadeOut方法
winNode.fadeOut("slow");
}
win.css
/*id选择器*/
#win {
/*希望窗口有边框*/
border: 1px red solid;
/*希望窗口宽度和高度固定，不要太大*/
width: 300px;
height: 200px;
/*希望控制窗口的位置*/
position: absolute; /*绝对定位*/
top: 100px;
left: 350px;
/*希望窗口开始时不可见*/
display: none;
}
/*控制标题栏的样式*/
#title {
/*控制标题栏的背景色*/
background-color: blue;
/*控制标题栏中文字的颜色*/
color: yellow;
/*控制标题栏的左内边距*/
padding-left:3px;
}
/*控制内容区域的样式*/
#content {
padding-left: 3px;
padding-top: 5px
}
/*控制关闭按钮的位置*/
#close {
/*使关闭按钮向右侧移动*/
margin-left: 158px;
/*让鼠标进入时可以显示小手，告知用户可以点击操作*/
cursor: pointer;
}
菜单的实现：
JQueryMenu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>itcast.cn的JQuery应用示例：弹出菜单</title>
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jquerymenu.js"></script>
</head>
<body>
<ul>
<a href="#">我是菜单1</a>
<li><a href="#">我是子菜单1</a></li>
<li><a href="#">我是子菜单2</a></li>
</ul>
<ul>
<a href="#">我是菜单2</a>
<li><a href="#">我是子菜单3</a></li>
<li><a href="#">我是子菜单4</a></li>
</ul>
</body>
</html>
menu.css
/*如何让所有的li都不显示小圆点，可以使用css的标签选择器*/
li {
list-style: none; /*使li前面的小圆点消失*/
margin-left: 18px; /*让子菜单向右移动一段距离，达到缩进的效果*/
display: none; /*让所有的子菜单都先隐藏*/
}
a{
text-decoration: none; /*让链接的下划线消失*/
}
jquerymenu.js
//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏
//需要编写代码，在页面装载时，给所有的主菜单添加onclick的事件
//保证主菜单点击时可以显示或隐藏子菜单
//注册页面装载时执行的方法
$(document).ready(function() {
//这里需要首先找到所有的主菜单
//然后给所有的主菜单注册点击事件
//找到ul中的节点注意是标签查找
var as = $("ul > a");
// var lis = $("ul ").children("a");
as.click(function() {
//这里需要找到当前ul中的li，然后让li显示出来
//获取当前被点击的a节点
var aNode = $(this);
//找到当前a节点的所有li兄弟字节点
// var lis = aNode.children("li");//拿到子节点
var lis = aNode.nextAll("li");
//让子节点显示或隐藏
lis.toggle("show");
});
});
对上面连接的更进 菜单响应
JQueryMenu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>itcast.cn的JQuery应用示例：弹出菜单</title>
<link type="text/css" rel="stylesheet" href="css/menu.css" />
//注意映入包的问题要正确先后顺序
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jquerymenu.js"></script>
</head>
<body>
<ul>
<a href="#">我是菜单1</a>
<li><a href="#" id ="JqueryAoto.html">我是子菜单1</a></li>
<li><a href="#" id ="JqueryEdit.html">>我是子菜单2</a></li>
</ul>
<ul>
<a href="#">我是菜单2</a>
<li><a href="#">我是子菜单3</a></li>
<li><a href="#">我是子菜单4</a></li>
</ul>
<div id="content"></div>
</body>
</html>
jquerymenu.js
//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏
//需要编写代码，在页面装载时，给所有的主菜单添加onclick的事件
//保证主菜单点击时可以显示或隐藏子菜单
//注册页面装载时执行的方法
$(document).ready(function() {
//这里需要首先找到所有的主菜单
//然后给所有的主菜单注册点击事件
//找到ul中的节点
var as = $("ul > a");
as.click(function() {
//这里需要找到当前ul中的li，然后让li显示出来
//获取当前被点击的a节点
var aNode = $(this);
//找到当前a节点的所有li兄弟字节点
var lis = aNode.nextAll("li");
// var lis = aNode.children("li");
//让子节点显示或隐藏
lis.toggle("show");
});
$("li>a").click(function() {
$("#content").load($(this).attr("id")) ;
} ) ;
});
编辑框的实现
JQueryEdit.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>itcast.cn的JQuery示例：可以编辑的表格</title>
<!--<link type="text/css" rel="stylesheet" href="css/edit.css" />-->
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
<!--一个最简单的表格.一行两列，我们需要让表格中的数据点击时可以修改-->
<table border="1px">
<tbody>
<tr>
<td>123123</td>
<td>456456</td>
</tr>
</tbody>
</table>
</body>
</html>
edit.css
table {//加逗号再加标签名就能够实现多个标签使用相同样式了
border-collapse: collapse; /*让相邻边框合并*/
border: 1px solid black; /*边框1个像素*/
}
jqueryedit.js
//在页面装载时，让所有的td都拥有一个点击事件
$(document).ready(function() {
//找到所有的td节点
var tds = $("td");
//给所有的td节点增加点击事件
tds.click(tdclick);
});
//td被点击的事件
function tdclick() {
//0.保存当前的td节点
var td = $(this);
//1.取出当前td中的文本内容保存起来
var text = td.text();
//2.清空td里面的内容
td.html(""); //也可以用td.empty();
//3.建立一个文本框，也就是input的元素节点
var input = $("<input>");//有尖括号就是创建当前节点
//4.设置文本框的值是保存起来的文本内容
input.attr("value", text);//设置属性的方法
//4.5让文本框可以响应键盘按下并弹起的事件，主要用于处理回车确认
input.keyup(function(event) {
//0.获取当前用户按下的键值
//解决不同浏览器获取事件对象的差异
var myEvent = event || window.event;
var kcode = myEvent.keyCode;
//1.判断是否是回车按下
if (kcode == 13) {
var inputnode = $(this);
//2.保存当前文本框的内容
var intputext = inputnode.val();
//3.清空td里面的内容
var tdNode = inputnode.parent();
//4。将保存的文本框的内容填充到td中
tdNode.html(intputext);
//5.让td重新拥有点击事件
tdNode.click(tdclick);
}
});
//5.将文本框加入到td中
td.append(input); //也可以用input.appendTo(td)
//5.5让文本框里面的文字被高亮选中
//需要将jquery的对象转换成dom对象
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
