AjAx-Jquery总结(20-30)

来源：互联网发布：真·假面骑士知乎编辑：程序博客网时间：2024/06/05 07:17

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>

</head>

<body>

<a onclick="showwin()" href="#">显示浮动窗口</a>

<div id="title">我是标题栏啊！！<span id="close" onclick="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>

</head>

<body>

<ul>

<li><a href="#">我是子菜单1</a></li>

<li><a href="#">我是子菜单2</a></li>

</ul>

<ul>

<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; /*让所有的子菜单都先隐藏*/

}

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>

//注意映入包的问题要正确先后顺序

</head>

<body>

<ul>

<li><a href="#" id ="JqueryAoto.html">我是子菜单1</a></li>

<li><a href="#" id ="JqueryEdit.html">>我是子菜单2</a></li>

</ul>

<ul>

<li><a href="#">我是子菜单3</a></li>

<li><a href="#">我是子菜单4</a></li>

</ul>

</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>

</head>

<body>

<tbody>

<tr>

</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对象