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 Mobile，请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本，因为之前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。 jquery-1.7.2.min.js (minified, ...
jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。...
jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。...
jQuery1.7.1不能正确地设置IE7中克隆元素的tabindex属性 压缩的JS文件包含非ASCII字符 如果body样式设置为display:none，则$（'body'）。show（）无法工作 在IE9中element.css（'filter'）返回不明确 在Android ...
Javascript & jQuery &Ajax&JSON · jquery-1.7.2.js · jquery-1.7.2.min.js · jQuery插件 · EasyUI+v1.3.4官方API中文版 · EasyUI+v1.3.4官方API中文版.rar · jackson-src-1.7.1.zip · ext-3.0.0.zip...
内含四个文件: jquery-1.7.1.js, jquery-1.7.1.min.js, jquery.autocomplete-1.4.2.js, jquery.autocomplete.css
jQuery 是一个JavaScript 库，它有助于简化 JavaScript™ 以及 Asynchronous JavaScript XML (Ajax) 编程。与类似的 JavaScript 库不同，jQuery 具有独特的基本原理，可以简洁地表示常见的复杂代码。学习 jQuery ...
值得注意的是：如果你正在使用jQuery Mobile，请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本，因为之前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。 jquery-1.7.2.min.js (minified, ...
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the ...
包含jar包：ajaxfileupload.js jquery-1.7.1.js jquery-1.10.2.js json2.js
jQuery是JavaScript语言的一个新的资源库(框架) 为...注：如果你正在使用jQuery Mobile，请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本，因为之前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。
With the ongoing importance of Ajax-based development and the rise of full-featured JavaScript libraries, most of the stigma around JavaScript has vanished. The most beginner-friendly library, jQuery...
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the ...
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
内容索引:脚本资源,jQuery,jQueryUI,滑动门,选项卡 jquery-ui.custom实例集，是一个运用jquery可视化ui设计的应用实例集，实例集中包括大家常用的滑动门、折叠菜单、图层控制、选项卡、进度条、提示窗口、拖动条...
无论是jquery还是ajax在今天来讨论已经很落后了，网上也有非常多的这方面的资料，但是依然有不少新手对此很茫然。本文以最简单的方法为新手示范如何使用jquery实现ajax技术（所以本文是专为新手所写，老鸟勿喷，大神...
jquery-1.7.1.min.js samples/ hello.js 其中css和js都按照应用名称（这里是samples）划分文件夹，如果文件较多，还可以再划分子文件夹。 Django通常使用模板来展现html，而且我们通常使用继承的模板，所以需要...
jQuery就是如此强大，你可以轻易地找到DOM中的任何元素，而这也是jQuery设计之初query的真实含义（查询）。 编辑本段Jquery对象 jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象...
[removed]/resources/js/jquery-1.7.1.min.js>[removed] [removed]/resources/js/jquery.loehpagerv1.0.js>[removed] [removed] //回调里面进行业务处理 function loehpagercallback(data) { alert('这里...