9159金沙游艺场

图片 9
Win32病毒入门(二)

windows自带记事本导致文本文件(UTF-8编码)开头三个字符乱码问题

jQuery搜索框自动补全功能插件实现-autocomplete.js

最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单用着方便。留下记录

登录界面 login.jsp:

第四章 jQuery中的事件,第四章jQuery事件

  1.加载DOM

  jQuery中,在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,此时可能元素的关联文件未下载完。

  jQuery中的
load()方法,会在元素的onload事件中绑定一个处理函数。比如$(window).load(function(){…}),等价于JavaScript中的window.onload=function(){…},该方法需要等网页所有元素都加载完(包括管理文件)。

  2.事件绑定

  在文档装载完之后,可以为元素绑定事件来完成一些操作。可以使用bind()方法来对匹配元素进行特定的事件绑定。

  语法: bind(type,[data],fn);

9159金沙游艺场 1<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-2-3</title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <link rel=”stylesheet”
type=”text/css” href=”../../css/style.css” /> <script
type=”text/javascript”> $(function(){ $(“#panel
h5.head”).bind(“click”,function(){ var $content = $(this).next();
if($content.is(“:visible”)){ $content.hide(); }else{ $content.show(); }
}) }) </script> </head> <body> <div id=”panel”>
<h5 class=”head”>什么是jQuery?</h5> <div
class=”content”>
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig
创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div> </div> </body> </html> View Code
9159金沙游艺场 2<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-2-4</title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <link rel=”stylesheet”
type=”text/css” href=”../../css/style.css” /> <script
type=”text/javascript”> $(function(){ $(“#panel
h5.head”).bind(“mouseover”,function(){ $(this).next().show(); });
$(“#panel h5.head”).bind(“mouseout”,function(){ $(this).next().hide();
}) }) </script> </head> <body> <div id=”panel”>
<h5 class=”head”>什么是jQuery?</h5> <div
class=”content”>
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig
创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div> </div> </body> </html> View Code

  3.合成事件

  jQuery中有2个合成事件,hover()方法与toggle()方法。

  hover() 语法:hover(enter,leave);  用来模拟光标悬停事件。

9159金沙游艺场 3<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-3-1</title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <link rel=”stylesheet”
type=”text/css” href=”../../css/style.css” /> <script
type=”text/javascript”> $(function(){ $(“#panel
h5.head”).hover(function(){ $(this).next().show(); },function(){
$(this).next().hide(); }) }) </script> </head> <body>
<div id=”panel”> <h5 class=”head”>什么是jQuery?</h5>
<div class=”content”>
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig
创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div> </div> </body> </html> View Code

  toggle()语法:toggle(fn1,fn2,…fnN); 用来模拟鼠标连续单击事件。

9159金沙游艺场 4<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-3-3</title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <link rel=”stylesheet”
type=”text/css” href=”../../css/style.css” /> <script
type=”text/javascript”> $(function(){ $(“#panel
h5.head”).toggle(function(){ $(this).next().toggle(); },function(){
$(this).next().toggle(); }) }) /*$(function(){ $(“#panel
h5.head”).click(function(){ $(this).next().toggle(); }) })*/
</script> </head> <body> <div id=”panel”> <h5
class=”head”>什么是jQuery?</h5> <div class=”content”>
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig
创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div> </div> </body> </html> View Code

  4.事件冒泡

  意思就是说,页面上有多个元素响应同一个事件。事件会按照DOM的层次结构像水泡一样不断往上至顶。

9159金沙游艺场 5<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-4-1</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } #content { width: 220px; border: 1px solid #0050D0;
background: #96E555; } span { width: 200px; margin: 10px; background:
#666666; cursor: pointer; color: white; display: block; } p { width:
200px; background: #888; color: white; height: 16px; } </style>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { // 为span元素绑定click事件
$(‘span’).bind(“click”, function () { var txt = $(‘#msg’).html() +
“<p>内层span元素被点击.<p/>”; $(‘#msg’).html(txt); }); //
为div元素绑定click事件 $(‘#content’).bind(“click”, function () { var
txt = $(‘#msg’).html() + “<p>外层div元素被点击.<p/>”;
$(‘#msg’).html(txt); }); // 为body元素绑定click事件
$(“body”).bind(“click”, function () { var txt = $(‘#msg’).html() +
“<p>body元素被点击.<p/>”; $(‘#msg’).html(txt); }); })
</script> </head> <body> <div id=”content”>
外层div元素 <span>内层span元素</span> 外层div元素
</div> <div id=”msg”> </div> </body>
</html> View Code

  停止冒泡

9159金沙游艺场 6<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Panel</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } #content { width: 220px; border: 1px solid #0050D0;
background: #96E555; } span { width: 200px; margin: 10px; background:
#666666; cursor: pointer; color: white; display: block; } p { width:
200px; background: #888; color: white; height: 16px; } </style>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { // 为span元素绑定click事件
$(‘span’).bind(“click”, function (event) { var txt = $(‘#msg’).html() +
“<p>内层span元素被点击.<p/>”; $(‘#msg’).html(txt);
event.stopPropagation(); // 阻止事件冒泡 }); // 为div元素绑定click事件
$(‘#content’).bind(“click”, function (event) { var txt =
$(‘#msg’).html() + “<p>外层div元素被点击.<p/>”;
$(‘#msg’).html(txt); event.stopPropagation(); // 阻止事件冒泡 }); //
为body元素绑定click事件 $(“body”).bind(“click”, function () { var txt =
$(‘#msg’).html() + “<p>body元素被点击.<p/>”;
$(‘#msg’).html(txt); }); }) </script> </head> <body>
<div id=”content”> 外层div元素
<span>内层span元素</span> 外层div元素 </div> <div
id=”msg”> </div> </body> </html> View Code
9159金沙游艺场 7<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-4-4</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } #content { width: 220px; border: 1px solid #0050D0;
background: #96E555; } span { width: 200px; margin: 10px; background:
#666666; cursor: pointer; color: white; display: block; } p { width:
200px; background: #888; color: white; height: 16px; } </style>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { // 为span元素绑定click事件
$(‘span’).bind(“click”, function (event) { var txt = $(‘#msg’).html() +
“<p>内层span元素被点击.<p/>”; $(‘#msg’).html(txt); return
false; }); // 为div元素绑定click事件 $(‘#content’).bind(“click”,
function (event) { var txt = $(‘#msg’).html() +
“<p>外层div元素被点击.<p/>”; $(‘#msg’).html(txt); return
false; }); // 为body元素绑定click事件 $(“body”).bind(“click”, function
() { var txt = $(‘#msg’).html() + “<p>body元素被点击.<p/>”;
$(‘#msg’).html(txt); }); }) </script> </head> <body>
<div id=”content”> 外层div元素
<span>内层span元素</span> 外层div元素 </div> <div
id=”msg”> </div> </body> </html> View Code

  阻止默认行为

9159金沙游艺场 8<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(“#sub”).bind(“click”,
function (event) { var username = $(“#username”).val(); //获取元素的值
if (username == “”) { //判断值是否为空
$(“#msg”).html(“<p>文本框的值不能为空.</p>”); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 ) } }) })
</script> </head> <body> <form
action=”test.html”> 用户名:<input type=”text” id=”username” />
<br /> <input type=”submit” value=”提交” id=”sub” />
</form> <div id=”msg”> </div> </body>
</html> View Code
9159金沙游艺场 9<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(“#sub”).bind(“click”,
function (event) { var username = $(“#username”).val(); //获取元素的值
if (username == “”) { //判断值是否为空
$(“#msg”).html(“<p>文本框的值不能为空.</p>”); //提示信息
return false; } }) }) </script> </head> <body>
<form action=”test.html”> 用户名:<input type=”text”
id=”username” /> <br /> <input type=”submit” value=”提交”
id=”sub” /> </form> <div id=”msg”> </div>
</body> </html> View
Code

  5.事件对象的属性

  jQuery对事件对象常用的属性进行了封装。

  (1)event.type 可以获取事件的类型

9159金沙游艺场 10<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head>
<title></title> <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ /> <!– 引入jQuery –>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script> $(function () {
$(“a”).click(function (event) { alert(event.type); //获取事件类型 return
false; //阻止链接跳转 }); }) </script> </head> <body>
<a href=’ me .</a> </body>
</html> View Code

  (2)event.target 可以获取出发事件的元素

9159金沙游艺场 11<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head>
<title></title> <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ /> <!– 引入jQuery –>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script> $(function () {
$(“a[href= (event) {
alert(event.target.href); //获取触发事件的<a>元素的href属性值
return false; //阻止链接跳转 }); }) </script> </head>
<body> <a href=’ me .</a>
</body> </html> View
Code

  (3)event.pageX和event.pageY 可以获取光标相对于页面的x坐标与y坐标。

9159金沙游艺场 12<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head>
<title></title> <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ /> <!– 引入jQuery –>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script> $(function () {
$(“a”).click(function (event) { alert(“Current mouse position: ” +
event.pageX + “, ” + event.pageY); //获取鼠标当前相对于页面的坐标 return
false; //阻止链接跳转 }); }) </script> </head> <body>
<a href=’ me .</a> </body>
</html> View Code

  (4)event.which
可以在鼠标单击事件中获取鼠标的左中右键,也可以获取键盘键。

9159金沙游艺场 13<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head>
<title></title> <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ /> <!– 引入jQuery –>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script> $(function(){
$(“a”).mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 =
鼠标中键; 3 = 鼠标右键 return false;//阻止链接跳转 }) }) </script>
</head> <body> <a href=’ me
.</a> </body> </html> View Code
9159金沙游艺场 14<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head>
<title></title> <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ /> <!– 引入jQuery –>
<script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script> $(function () {
$(“input”).keyup(function (e) { alert(e.which); }) }) </script>
</head> <body> <input /> </body> </html>
View Code

  6.移除事件

  unbind([type],[data])方法用来移除事件。

9159金沙游艺场 15<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-6-2</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } p { width: 200px; background: #888; color: white;
height: 16px; } </style> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(‘#btn’).bind(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数1</p>”);
}).bind(“click”, function () {
$(‘#test’).append(“<p>我的绑定函数2</p>”); }).bind(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数3</p>”);
}); $(‘#delAll’).click(function () { $(‘#btn’).unbind(“click”); }); })
</script> </head> <body> <button id=”btn”>
点击我</button> <div id=”test”> </div> <button
id=”delAll”> 删除所有事件</button> </body> </html>
View Code
9159金沙游艺场 16<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Panel</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } p { width: 200px; background: #888; color: white;
height: 16px; } </style> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(‘#btn’).bind(“click”,
myFun1 = function () {
$(‘#test’).append(“<p>我的绑定函数1</p>”); }).bind(“click”,
myFun2 = function () {
$(‘#test’).append(“<p>我的绑定函数2</p>”); }).bind(“click”,
myFun3 = function () {
$(‘#test’).append(“<p>我的绑定函数3</p>”); });
$(‘#delTwo’).click(function () { $(‘#btn’).unbind(“click”, myFun2);
}); }) </script> </head> <body> <button
id=”btn”> 点击我</button> <div id=”test”> </div>
<button id=”delTwo”> 删除第二个事件</button> </body>
</html> View Code

  one(type,[data],fn)方法可以为元素绑定处理函数,当处理函数触发一次后立即删除。

9159金沙游艺场 17<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>4-6-4</title> <style type=”text/css”> * {
margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%;
padding: 60px; } p { width: 200px; background: #888; color: white;
height: 16px; } </style> <script
src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(‘#btn’).one(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数1</p>”);
}).one(“click”, function () {
$(‘#test’).append(“<p>我的绑定函数2</p>”); }).one(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数3</p>”);
}); }) </script> </head> <body> <button
id=”btn”> 点击我</button> <div id=”test”> </div>
</body> </html> View
Code

  7.模拟操作

  jQuery中可以使用trigger()方法完成模拟操作。

9159金沙游艺场 18<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”> * { margin:
0; padding: 0; } body { font-size: 13px; line-height: 130%; padding:
60px; } p { width: 200px; background: #888; color: white; height: 16px;
} </style> <script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(‘#btn’).bind(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数1</p>”);
}).bind(“click”, function () {
$(‘#test’).append(“<p>我的绑定函数2</p>”); }).bind(“click”,
function () { $(‘#test’).append(“<p>我的绑定函数3</p>”);
}); $(‘#btn’).trigger(“click”); }) </script> </head>
<body> <button id=”btn”> 点击我</button> <div
id=”test”> </div> </body> </html> View Code
9159金沙游艺场 19<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”> * { margin:
0; padding: 0; } body { font-size: 13px; line-height: 130%; padding:
60px; } p { width: 200px; background: #888; color: white; height: 16px;
} </style> <script src=”../../scripts/jquery-1.3.1.js”
type=”text/javascript”></script> <script
type=”text/javascript”> $(function () { $(‘#btn’).bind(“myClick”,
function (event, message1, message2) { $(‘#test’).append(“<p>” +
message1 + message2 + “</p>”); }); $(‘#btn’).click(function () {
$(this).trigger(“myClick”, [“我的自定义”, “事件”]);
}).trigger(“myClick”, [“我的自定义”, “事件”]); }) </script>
</head> <body> <button id=”btn”> 点击我</button>
<div id=”test”> </div> </body> </html> View Code

 PS:参考文献《锋利的jQuery》

源码如下:

 

jquery中的事件 通过prepend添加的内容可以获取匹配事件不

你好!
9159金沙游艺场,1.
对于prepend()添加的元素,或者动态生成的元素,一般使用live()进行事件指定;2.
对于元素的toggle()事件,使用live()绑定事件时,可以通过先为其指定click()事件,然后在click()事件中设置该元素的toggle()事件,最后只要自动触发一次click()事件就可以了。这个过程大概是这样的:live()—>指定click()事件—>实现该元素的toggle()事件的逻辑(此时click()事件无法触发toggle()中的任何函数)—>trigger(“click”),触发toggle()中的函数。
$(“#list .message input”).live(“click”,function(){ $(this).toggle(
function(){
$(this).parent(this).after(“<div>评论列表</div>”); },
function(){ $(this).parent(this).next(this).remove(); }
).trigger(‘click’);});
 

 

[java] view
plain copy

jquery 事件中的事件问题

试一下在tr的事件里加一个判断,看<a>有没有焦点.有就返回.
 

jQuery中的事件,第四章jQuery事件 1.加载DOM
jQuery中,在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,此时可能元素的关…

 

 

<!doctype html>
<html lang=”en-US”>
<head>
  <meta http-equiv=”Content-Type”
content=”text/html;charset=utf-8″>
  <title>Input Autocomplete Suggestions Demo</title>
  <link rel=”stylesheet” type=”text/css” media=”all”
href=”style.css”>
  <script type=”text/javascript”
src=”js/codedata.js”></script>
  <script type=”text/javascript”
src=”js/jquery-1.9.1.min.js”></script>
  <script type=”text/javascript”
src=”js/jquery.autocomplete.min.js”></script>
  <script type=”text/javascript”
src=”js/currency-autocomplete.js”></script>
</head>

  1. <%@ page language=”java” import=”java.util.*” contentType=”text/html; charset=utf-8″%>  
  2. <%  
  3.    String path = request.getContextPath();  
  4.    String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;  
  5. %>  
  6. <html>  
  7.     <head>  
  8.         <!– Page title –>  
  9.         <title>imooc – Login</title>  
  10.         <!– End of Page title –>  
  11.         <!– Libraries –>  
  12.         <link type=”text/css” href=”css/login.css” rel=”stylesheet” />      
  13.         <link type=”text/css” href=”css/smoothness/jquery-ui-1.7.2.custom.html” rel=”stylesheet” />     
  14.         <script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>  
  15.         <script type=”text/javascript” src=”js/easyTooltip.js”></script>  
  16.         <script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js”></script>  
  17.         <!– End of Libraries –>   
  18.     </head>  
  19.     <body>  
  20.     <div id=”container”>  
  21.         <div class=”logo”>  
  22.             <a href=”#”><img src=”logo.png” alt=”” /></a>  
  23.         </div>  
  24.         <div id=”box”>  
  25.             <form action=”dologin.jsp” method=”post”>  
  26.             <p class=”main”>  
  27.                 <label>用户名: </label>  
  28.                 <input name=”username” value=”” />   
  29.                 <label>密码: </label>  
  30.                 <input type=”password” name=”password” value=””>    
  31.             </p>  
  32.             <p class=”space”>  
  33.                 <input type=”submit” value=”登录” class=”login” style=”cursor: pointer;”/>  
  34.             </p>  
  35.             </form>  
  36.         </div>  
  37.     </div>  
  38.     </body>  
  39. </html>  

<body>
  <div id=”w”>
    <div id=”content”>
      <h1>World Currencies Autocomplete Search</h1>
      <p>Just start typing and results will be supplied from the
JavaScript. Check out <a
href=”
Autocomplete</a> on Github.</a></p>
      
      <div id=”searchfield”>
        <form><input type=”text” name=”currency”
class=”biginput” id=”autocomplete”></form>
      </div><!– @end #searchfield –>
      
      <div id=”outputbox”>
        <p id=”outputcontent”>Choose a currency and the results
will display here.</p>
      </div>
    </div><!– @end #content –>
  </div><!– @end #w –>
</body>
</html>

对登录的响应 dologin.jsp:

 

 

 

 

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图