Jquery1.7.1实例教程
——作者：Angel
目录
1. 个性化不同的链接样式 2
1.1 问题的提出 2
1.2 问题的分析 2
1.3 问题的假设 3
1.4 问题的求解 3
2. 轮换图片展览 12
2.1 问题的提出 12
2.2 问题的分析 13
2.3 问题的假设 13
2.4 问题的求解 13
3. 模仿WordPress后台评论管理面板 18
3.1 问题的提出 18
3.2. 问题的分析 18
3.3 问题的假设 18
3.4 问题的求解 18
4. 简单的下拉面板 19
4.1 问题的提出 19
4.2 问题的分析 19
4.3 问题的假设 19
4.4 问题的求解 19
5. 简单的隐藏效果 19
5.1 问题的提出 19
5.2 问题的分析 19
5.3 问题的假设 19
5.4 问题的求解 20
. Jquery之Ajax 20
.1 问题的提出 20
.2 问题的分析 20
.3 问题的假设 20
.4 问题的求解 20
说明：
》该材料主要是用实例讲解jquery的使用，但讲解的过程当中会有少部分的理论知识，要是有朋友需要理论学习的可以在百度上进行查找学习，谢谢合作。
》该资料版权归作者所有，可以进行转载互相学习。
》开发工具MyEclipse8.5，Dreamwaver cs4
》操作系统win7/xp
》服务器Apach-tomcat 6.0.18
4.1 问题的提出
现在我们有这么一个需求：我们要做一个用户的登录页面，并且在用户进行登录的时候，要判断该用户所输入的数据是否合理。
4.2 问题的分析
根据我们的提出的问题，首先很明显我们需要一个登录页面，登录页面所需要的元素按道理应该有：文本提示，输入框，提交数据按钮。在Ajax技术是需要将数据提交到服务器端的，所以我们需要建立的是一个web应用程序，而不是简单的网页。
4.3 问题的假设
假设现在的情况如下：
①在页面中有 用户名输入框，和 密码输入框；
②在页面中还有一个登陆按钮；
③ js处理代码写在页面中，开发时候应该放在外部文件。
4.4 问题的求解
① 建立工程
首先我们用MyEclipse开发工具建立一个Web工程，具体的操作步骤如下：
【右键】--【New】--【Web Project】--输入【Project Name】（假设为jquery1）--【Finish】--【Yes】
图片操作：
当前文件结构：
② 编写登陆页面
接下来让我们在写登陆页面：首先在【WebRoot】下新建【login.html】文件，login.html文件的源码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户登录</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#loginButton").click(function(){/*点击登录按钮执行的方法*/
//----------传输数据-=-----
var json=
{ userName:$('#userName').val(),
pwd:$("#pwd").val()
}
//*****************************向服务器发出请求*****start********
$.ajax({
type: "POST",// 请求方式
url: "servlet/LoginServlet",//url地址
data:json,//数据
success:function(data){//callback
if(data != null){
alert(data);
}else {
alert("登陆成功.无模拟进行跳转.");
}
}
});
//*****************************向服务器发出请求********end*****
});
});
</script>
</head>
<body>
用户名:<input type="text" id="userName"/>用户名不能为空<br/>
密码:<input type="password" id="pwd"/>密码不能为空,且长度位数要大于3<br/>
<input type="button" id="loginButton" value="登录"/>
</body>
</html>
注：记得导入jquery库。
当前文件结构：
当前文件结构：
③编写servlet
当我们点击【登陆】按钮的时候，我们将数据提交给
url: "servlet/LoginServlet",//url地址
进行处理了，所以我们需要在包servlet下建立LoginServlet.java文件。操作如下：
》【右键】--【New】---【Servlet】
》输入【Package】--输入【LoginServlet】--【Next】
》【Finish】
④ 编写LoginServlet.java代码
这部分的代码主要是接收接收前台传输的数据，然后进行处理。
代码如下：
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public LoginServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String userName = request.getParameter("userName");
String pwd = request.getParameter("pwd");
//假设用户名是admin，密码是admin
Map<String,String> map = new HashMap<String,String>();
if(!"admin".equals(userName)){
out.println("用户名有误");
}
if(!"admin".equals(pwd)){
out.println("密码有误");
}
out.flush();
out.close();
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}
最后在浏览器输入：http://127.0.0.1:8080/jquery1 进行访问。
<!--EndFragment--> <!--EndFragment-->
分享到：
相关推荐
《jQuery 1.7.1：深入理解与应用》 jQuery是JavaScript库中的巨头，以其简洁易用的API和强大的功能赢得了全球开发者的喜爱。在本文中，我们将深入探讨jQuery 1.7.1版本，这是一个广泛使用的稳定版本，包含了丰富的...
在这个标题为“jquery1.7 API”的压缩包中，包含的是jQuery 1.7.1版本的两个主要文件：`jquery-1.7.1.min.js` 和 `jquery-1.7.1.js`，以及一个API文档`jquery1.7_20111204.chm`。 1. **`jquery-1.7.1.min.js` 和 `...
《jQuery 1.7.1：JavaScript 动态交互的核心》 在JavaScript的世界里，jQuery是一个不可或缺的库，它极大地简化了DOM操作、事件...无论你是前端开发新手还是经验丰富的专家，jQuery 1.7.1都是值得深入研究的经典之作。
**jQuery 1.7.1** 是一个历史悠久但仍然具有影响力的JavaScript库，它极大地简化了网页的DOM操作、事件处理、动画制作以及Ajax交互。在2011年发布时，它是jQuery的最新版本，提供了许多增强的功能和性能优化。 **...
《jQuery 1.7.1.min.js与jQuery 1.7.1.min-vsdoc.js深入解析》 在JavaScript的世界里，jQuery是一个广泛使用的库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。这里我们将聚焦于两个重要的文件：...
本压缩包包含了jQuery 1.7.1的三个关键文件：`jquery-1.7.1.js`（完整版），`jquery-1.7.1-vsdoc.js`（Visual Studio文档版本），以及`jquery-1.7.1.min.js`（压缩和优化版）。这些文件分别服务于开发、文档参考和...
在这个压缩包“jQuery1.7.1.js+jQuery1.7.1中文API.zip”中，包含了三个核心文件，分别是jQueryAPI_1.7.1_CN.chm（jQuery 1.7.1的中文API帮助文档）、jQuery-1.7.1-min.js（压缩版的jQuery 1.7.1库）以及jQuery-...
标题中的“Jquery1.7.1----2.轮换图片展览”指的是使用jQuery库的1.7.1版本实现一个图片轮播展示的效果。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在1.7.1这...
本篇将深入探讨jQuery 1.7.1版本，以及与之相关的VSdoc文件。 一、jQuery 1.7.1简介 jQuery 1.7.1是jQuery库的一个重要版本，发布于2011年。这个版本修复了一些1.7.0版本中的bug，并引入了若干改进和优化，使得...
此外，jQuery 1.7.1在AJAX方面的强大功能不容忽视。`.ajax()`、`.get()`、`.post()`等方法简化了异步数据获取和提交，使开发者可以快速构建动态交互的应用。配合JSONP和CORS（跨域资源共享）支持，jQuery 1.7.1可以...
《jQuery 1.7.1：JavaScript 动态交互的核心》 jQuery，作为一款轻量级的JavaScript库，因其简洁的API和强大的功能而深受开发者喜爱。本篇将重点解析`jquery-1.7.1.js`这个版本，它是jQuery历史上的一个重要里程碑...
在实际开发中，我们首先需要将 "jquery-1.7.1.min.js" 引入页面，它是 jQuery 的核心库，提供了基础的DOM操作、事件处理和Ajax等功能。然后引入 "jquery-ui-1.8.18.custom.min.js" 和相应的CSS文件，以启用jQuery UI...
jQuery是世界上最流行的JavaScript库之一，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本文中，我们将深入探讨jQuery的1.7.1至1.9.0这几个版本之间的关键变化和改进，帮助开发者了解...
4. **错误修复** - 此次更新的主要目标之一是修复了1.7.0 RC版本中发现的若干bug。这些修复确保了jQuery在各种环境和场景下的正确运行，减少了开发者遇到的问题。 ### 中文手册的重要性 对于中国开发者而言，...
jQuery选择器是其核心功能之一，它基于CSS选择器语法，用于在DOM树中定位元素。例如，`$("#id")`选择ID为指定值的元素，`$(".class")`选择所有具有指定类名的元素，而`$("tagname")`则选择所有特定类型的元素。 二...
在本项目中，我们将探讨如何使用jQuery 1.7.1来模仿WordPress后台的评论管理面板。这个项目主要关注前端实现，旨在帮助开发者理解和构建类似的交互式用户界面。通过学习这个项目，我们可以深入理解jQuery库的功能，...
jQuery1.7.1不能正确地设置IE7中克隆元素的tabindex属性 压缩的JS文件包含非ASCII字符 如果body样式设置为display:none，则$（'body'）。show（）无法工作 在IE9中element.css（'filter'）返回不明确 在Android ...
jQuery 1.7.1 是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互，为Web开发提供了强大的工具。该版本包含了几个关键的组成部分，使得开发者能够更高效地构建动态网页应用。 首先，我们...
jQuery 1.7.1是jQuery历史上的一个重要版本，它对选择器、事件、动画、Ajax以及DOM操作等方面进行了优化和增强。以下是一些关键知识点： 1. **选择器**：jQuery的选择器是其强大之处，如`$("#id")`用于选取ID为指定...