用jquery查询html元素是利用jquery的选择器实现的。
几点说明：
jQuery 选择器允许程序员对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于jquery的选择器</title>
<script src="./jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide()
})
})
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
运行结果:
1、显示一个button和两段文字：
2、点击button后段落消失
动态的Ajax分页，代码如下：<%@ page language="java" contentType="text/html charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath()
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>" />
<meta http-equiv="Content-Type"
content="text/html charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>
<script type="text/javascript">
var list // the list of data
var totalPages // the total of pages
var pageSize = 5 // each size of page
var pageIndex = 1 // the index of current page
$(function(){
send()
})
function send() {
$.ajax({
url: "DistrictServlet",
type: "POST",
data: {"function":"list"},
dataType: "json",
success: function(data) {
// list = data
var records = data.length
if (records % pageSize == 0) {
totalPages = records / pageSize
} else {
totalPages = Math.round(records / pageSize)
}
$("#pageIndex").html(pageIndex)
$("#totalPages").html(totalPages)
binding(data)
}
})
}
function changePage() {
$.ajax({
url: "DistrictServlet",
type: "post",
data: {"function":"list"},
dataType: "json",
success: function(data) {
binding(data)
}
})
}
function binding(data) {
var start = (pageIndex - 1) * pageSize
var end = pageIndex * pageSize
var html = ""
$.each(data, function(index, district) {
if (index >= start && index < end) {
// show data
html += "<tr><td>" + district["id"]+ "</td><td>" +district["name"]+"</td></tr>" // .........
}
})
$("table").html(html)
$("#pageIndex").html(pageIndex)
}
function nextPage() {
pageIndex += 1
if (pageIndex > totalPages) {
pageIndex = totalPages
return
}
changePage()
}
function lastPage() {
pageIndex -= 1
if (pageIndex < 1) {
pageIndex = 1
return
}
changePage()
}
function skipPage(index) {
pageIndex = index
changePage()
}
</script>
</head>
<body>
<div><span id="pageIndex"></span>/<span id="totalPages"></span></div>
<div>
<a href="javascript: lastPage()">last</a>
<a href="javascript: nextPage()">next</a>
</div>
<div id="list"><table></table></div>
</body>
</html>
项目根目录的1文件夹下新建index.php
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>查询</title>
</head>
<body>
<form method="post">
<input type="text" name="keyword" value="">
<input type="submit" value="查询">
</form>
<?php
if (isset($_POST['keyword']) && !empty($_POST['keyword'])) {
$host = "localhost"
$username = "root"
$password = "123456"
$database = "test"
$mysqli = new mysqli($host, $username, $password, $database)
if ($mysqli->connect_errno) {
echo '数据库连接错误'
exit
}
//设置数据库编码格式
$mysqli->set_charset("UTF8")
/*编写sql获取分页数据 SELECT*FROM 表名 LIMIT 起始位置，显示条数*/
$keyword = $_POST['keyword']
$sql = "select b.id,b.name from account a,name b where a.id=b.userid and a.user='" . $keyword . "'"
/*把sql语句传送到数据库*/
$query = $mysqli->query($sql)
echo "<table border='#CCF solid 1px'>"
echo "<tr><td>ID</td><td>NAME</td></tr>"
while ($row = $query->fetch_assoc()) {
echo "<tr><td>" . $row['id'] . "</td><td>" . $row['name'] . "</td></tr>"
}
echo "</table>"
$mysqli->close()
}
?>
</body>
</html>
效果
