讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
本节教程，介绍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;">博客地址：http://blog.csdn.net/lfdfhl</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实现表格的全选与全不选
<!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;">博客地址：http://blog.csdn.net/lfdfhl</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动态添加和删除表格内容
<!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;">博客地址：http://blog.csdn.net/lfdfhl</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>
校验用户名是否已经存在
项目结构
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;">博客地址：http://blog.csdn.net/lfdfhl</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>
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;
/**
* 本文作者：谷哥的小弟
* 博客地址：http://blog.csdn.net/lfdfhl
*
* 校验用户名是否已经存在
*/
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>
