jquery项目改造 jquery项目实战

转载

mob64ca13fc220d 2024-05-08 10:18:41

文章标签 jquery项目改造 jQuery html jquery 文章分类 jQuery 前端开发

版权声明

本文原创作者：谷哥的小弟
作者博客地址：

概述

本节教程，介绍jQuery综合应用示例。

利用jQuery序列化表单数据

我们使用ajax给后台传递数据的时候，经常要获取表单的数据。表单数据不多的情况下还好说；但是，如果表单字段非常多，那么无疑是件非常头痛的事。

在此，我们可使用jQuery的serialize( )方法直接序列化表单中的数据再传递到后台。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>jQuery表单序列化</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js"></script>
		<script>
			function getFormData(){
				var serializeResult=$("#userform").serialize();
				alert(serializeResult);
			}
        </script>
	</head>
	<body>
	    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
        <h2 style="color: red;">博客地址：</h2>
		<form id="userform">
			用户：<input type="text" name="username" placeholder="username">
			<span id="tipsSpan"></span>
			<br /><br />
			账号：<input type="text" name="account" placeholder="account">
			<br /><br />
		</form>
		<button type="button" onclick="getFormData()">提交</button>
	</body>
</html>

jquery项目改造 jquery项目实战_jQuery

利用jQuery实现表格隔行换色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>利用jQuery实现表格隔行换色</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			$(function() {
				//获取索引大于0的数据行中的奇数行tr，设置背景色为yellowgreen
				$("tr:gt(0):odd").css("backgroundColor","yellowgreen");
				//获取索引大于0的数据行中的偶数行tr，设置背景色为skyblue
                $("tr:gt(0):even").css("backgroundColor","skyblue");
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：</h2>
		<table border="1" width="900px" align="center" >
			<tr style="background-color:azure;">
				<th>选择</th>
				<th>分类编号</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>0</td>
				<td>小说</td>
				<td>古今中外的小说</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>1</td>
				<td>动漫</td>
				<td>日本和欧美动漫</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2</td>
				<td>科技</td>
				<td>前沿科技的趋势</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>3</td>
				<td>教辅</td>
				<td>考试类教材资料</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>

jquery项目改造 jquery项目实战_jquery_02

利用jQuery实现表格的全选与全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>利用jQuery实现表格的全选与全不选</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			$(function() {
				//获取索引大于0的数据行中的奇数行tr，设置背景色为yellowgreen
				$("tr:gt(0):odd").css("backgroundColor","yellowgreen");
				//获取索引大于0的数据行中的偶数行tr，设置背景色为skyblue
			    $("tr:gt(0):even").css("backgroundColor","skyblue");
			});
			//依据第一个Checkbox的状态设置其它Checkbox
			function selectAllItems(firstCheckbox) {
				$(".itemCheckbox").prop("checked", firstCheckbox.checked);
			}
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：</h2>
		<table border="1" width="900px" align="center">
			<tr style="background-color:azure;">
				<th><input type="checkbox" onclick="selectAllItems(this)"></th>
				<th>分类编号</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemCheckbox"></td>
				<td>0</td>
				<td>小说</td>
				<td>古今中外的小说</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemCheckbox"></td>
				<td>1</td>
				<td>动漫</td>
				<td>日本和欧美动漫</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemCheckbox"></td>
				<td>2</td>
				<td>科技</td>
				<td>前沿科技的趋势</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemCheckbox"></td>
				<td>3</td>
				<td>教辅</td>
				<td>考试类教材资料</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>

jquery项目改造 jquery项目实战_jquery项目改造_03

利用jQuery动态添加和删除表格内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>利用jQuery动态添加和删除表格内容</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			$(function() {
				//添加用户
				$("#addButton").click(function() {
					// 获取输入框中的内容
					var number = $("#number").val();
					var name = $("#name").val();
					var age = $("#age").val();

					var trJQueryObj = $("<tr>" +
						"<td>" + number + "</td>" +
						"<td>" + name + "</td>" +
						"<td>" + age + "</td>" +
						'<td><a href="">Delete</a></td>' +
						"</tr>");

					// 为新添tr中的a标签设置点击事件
					trJQueryObj.find("a").click(function() {
						// this表示当前正在响应事件的dom对象即a标签
						var tr = $(this).parent().parent()
						if (confirm("您确定要删除" + tr.find("td:first").text() + "吗?")) {
							tr.remove();
						}
						return false;
					});
					
					// 将新用户添加至用户表
					trJQueryObj.appendTo($("#userTable"));
				});


				// 为所有a标签绑定单击事件
				$("a").click(function() {
					console.log($("a"))
					// this表示当前正在响应事件的dom对象即a标签
					var tr = $(this).parent().parent();
					if (confirm("您确定要删除" + tr.find("td:first").text() + "吗?")) {
						tr.remove();
					}
					return false;
				});

			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：</h2>

		<table id="userTable" border="1" width="400px">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>1</td>
				<td>lucy</td>
				<td>18</td>
				<td><a href="">Delete</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>tutu</td>
				<td>19</td>
				<td><a href="">Delete</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td>bobo</td>
				<td>20</td>
				<td><a href="">Delete</a></td>
			</tr>
		</table>

		<h4>添加新用户</h4>

		<table border="1">
			<tr>
				<td>编号: </td>
				<td>
					<input type="text" id="number" />
				</td>
			</tr>
			<tr>
				<td>姓名: </td>
				<td>
					<input type="text" id="name" />
				</td>
			</tr>
			<tr>
				<td>年龄: </td>
				<td>
					<input type="text" id="age" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addButton">
						Submit
					</button>
				</td>
			</tr>
		</table>
		
	</body>
</html>

jquery项目改造 jquery项目实战_jquery_04

利用jQuery校验用户名是否已经存在

项目结构

jquery项目改造 jquery项目实战_jquery项目改造_05

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<!--引入jquery文件 -->
		<script src="jQuery/jquery-1.11.3.js"></script>
		<script>
			$(function () {
				   //为用户名输入框绑定blur事件
				   $("#usernameid").blur(function () {
					   var usernameInput = $("#usernameid");
					   var username=usernameInput.val();
					   var url = "/AJAX05/AJAXServlet";
					   var params = {"username": username};
					   $.post(
							   url,
							   params,
							   function (data) {
								   //获取tipsSpan元素
								   var span = $("#tipsSpan");
								   if(data.userIsExsit){
									   span.css("color","red");
									   span.html(data.message);
								   }else{
									   span.css("color","green");
									   span.html(data.message);
								   }
								 },
								"json");
				   }); 
        });

    </script>
	</head>
	<body>
	    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
        <h2 style="color: red;">博客地址：</h2>
		<form>
			用户：<input type="text" id="usernameid" name="username" placeholder="your username">
			<span id="tipsSpan"></span>
			<br /><br />
			密码：<input type="password" name="password" placeholder="your password">
			<br /><br />
			<input type="submit" value="注册">
		</form>
	</body>
</html>

jquery项目改造 jquery项目实战_jquery项目改造_06

AJAXServlet

package cn.com;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 本文作者：谷哥的小弟 
 * 博客地址：
 * 
 * 校验用户名是否已经存在
 */
public class AJAXServlet extends HttpServlet {
	
	private static final long serialVersionUID = -4452579660869800468L;

	@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String method = request.getMethod();
		String username = request.getParameter("username");
		System.out.println("请求方式：" + method);
		System.out.println("请求参数：" +"username="+username);
		if("lucy".equals(username)) {
			//设置响应数据
			String jsonData = "{\"userIsExsit\":true,\"message\":\"用户名已存在\"}";
			//设置响应格式
			response.setContentType("application/json;charset=UTF-8");
			//返回响应内容
			response.getWriter().print(jsonData);
		}else {
			//设置响应数据
			String jsonData = "{\"userIsExsit\":false,\"message\":\"用户名可用\"}";
			//设置响应格式
			response.setContentType("application/json;charset=UTF-8");
			//返回响应内容
			response.getWriter().print(jsonData);
		}
		
    }
    
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	this.doGet(request, response);
    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>AJAX05</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
    <servlet-name>AJAXServlet</servlet-name>
    <servlet-class>cn.com.AJAXServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>AJAXServlet</servlet-name>
    <url-pattern>/AJAXServlet</url-pattern>
  </servlet-mapping>
  
  
</web-app>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。