JQuery的简单应用

user.js

 

//定义有关分页的操作
var pageSize;// 每页显示的记录数
var countPage;// 总页数
var countRecord;// 总记录
var nowPage=1;// 当前页
var startIndex;// 每页开始的记录数
var endIndex;// 每页结束的记录数
var $pageInfo;
var $showUsers;
// dom载入完毕 触发的匿名函数
$(document).ready(function() {
	// 分页操作
	pageSize=$("#pagesize").val();// 获取默认的pagesize的值
	
	$pageInfo=$("#showPageInfo");
	$showUsers=$("#showUsers");
	// 获取全选input的Dom对象
	var qxDom = $("#cbk")[0];
	// 把checkbox类型的input设置为没有选中的状态
	qxDom.checked = false;

	// 把table 隐藏
	$("#users").css("display", "none");
	// 根据id获取添加的input的jquery对象
	var $name = $("#name");
    var $sex=$("input[type='radio']:checked");
    var $age=$("#age");
    
    /*-----------下面是添加按钮的事件处理------------------*/
	// 注册按钮事件
	$("#addUser").click(function() {
		// 获取table中display样式的值
		var val = $("#users").css("display");
		// 判断是否隐藏
		if ("none" == val) {
			// 显示
			$("#users").show();
		}
		// 获取name值
		var name = $name.val();
		// 获取sex值
		var sex = $sex.val();
		// 获取age值
		var age = $age.val();
		// 创建tr
		var $tr = $("<tr></tr>");
		// 创建td
		var $td1 = $("<td></td>");
		// 创建input
		var $input = $("<input type='checkbox'>");
		/*
		 * $td.append($input); var $input =
		 * 
		 * $("<input>", { "type" : "checkbox" });
		 */

		$td1.append($input);
		// 创建td并且添加name文本节点
		var $td2 = $("<td></td>").append(name);
		// 创建td并且 把sex 对应的文本添加到td中
		var $td3 = $("<td></td>").append(sex);

		var $td4 = $("<td></td>").append(age);
		// 创建删除按钮对象
		var $deleteBtn = $("<input type='button' value='删除'>");
		// 给按钮注册事件
		$deleteBtn.click(function() {
			$(this).parent().parent().remove

();
		});
		var $td5 = $("<td></td>");
		// 把创建的按钮添加到td5中
		$deleteBtn.appendTo($td5);

		// 注册可编辑事件
		$td2.dblclick(clickTd);
		$td3.dblclick(clickTd);
		$td4.dblclick(clickTd);
		
		// 对象的链式操作
		$tr.append($td1).append($td2).append

($td3).append($td4).append($td5);
		// 在tbody中添加tr
		$("#showUsers").append($tr);
		
		// 添加成功后 进行分页操作
		pageInfo();
	});
	/*-----------以上面是添加按钮的事件处理------------------*/
	
	/*-----------下面是全选的事件处理------------------*/
	// 全选的操作
	$("#cbk").click(function() {
		if (this.checked) {
			$("td>input [type='checkbox']").each(function() {
				this.checked = true;
			});
		} else {
			$("td>input [type='checkbox']").each(function() {
				this.checked = false;
			});
		}
	});
	/*-----------以上面是全选的事件处理------------------*/
	
	/*-----------下面是批量删除的事件处理------------------*/
	// 删除的操作
	$("#addUsers").click(function() {
		$("td>input[type='checkbox']").each

(function() {
			// alert("----------------");
			if (this.checked) {
				$(this).parent().parent

().remove();
			}
			qxDom.checked = false;
		});
	});
	/*-----------以上面是批量删除的事件处理------------------*/
	
	// 注册select的事件
	$("#pagesize").change(function(){
		pageSize=

$("#pagesize>option:selected").val();
		pageInfo();
	});
	
	
	
	
	var $firstBtn=$("#firstBtn");
	var $backBtn=$("#backBtn");
	var $nextBtn=$("#nextBtn");
	var $lastBtn=$("#lastBtn");
	
	 $firstBtn.click(pageInfo);
	 $backBtn.click(pageInfo);
	 $nextBtn.click(pageInfo);
	 $lastBtn.click(pageInfo);
});
/*------------下面是表格可编辑的事件处理--------------------------*/
var clickTd = function() {
	// 获取当前对象中 孩子节点为input的几集合对象 判断这个集合对象的长度是否大于0
	if ($(this).children("input").length > 0) {
		// 返回程序
		return false;
	} else {// 否则继续执行
		// 获取点击的td值
		var value = $(this).text();
		// td清空
		$(this).empty();
		// 创建input输入框
		var $cinput = $("<input type='text' value='" + value + "'>");

		// 失去焦点的事件
		$cinput.blur(blurInput);

		// 添加到td中
		$(this).append($cinput);

	}

};
// 失去焦点触发的函数
var blurInput = function() {
	// 获取值
	var value = $(this).val();
	// 给td重新设置文本
	$(this).parent().text(value);
};
/*------------以上面是表格可编辑的事件处理--------------------------*/


var pageInfo=function(){
	// 获取总记录
	countRecord=$("#showUsers tr").size();
	// 计算总页数
	countPage=Math.ceil(countRecord/pageSize);
	
	// 点击按钮的判断
	if(this.nodeType==1){
		// 首先获取点击的按钮的id值
		var idValue=$(this).attr("id");
		// 判断是否是首页
		if("firstBtn"==idValue){
			nowPage=1;
		}else if("backBtn"==idValue){
			if(nowPage>1){
				nowPage--;
			}
		}else if("nextBtn"==idValue){
			if(nowPage<countPage){
				nowPage++;
			}
		}else if("lastBtn"==idValue){
			nowPage=countPage;
		}
	}
	// 获取每页开始的记录
	startIndex=(nowPage-1)*pageSize+1;
	// 获取每页结束的记录
	endIndex=nowPage*pageSize;
    
	// 如果结束的记录数大于总记录数
	if(endIndex>=countRecord){
		// 让结束的记录数等于总记录数
		endIndex=countRecord;
	}
	// 如果总的记录数 小于每页显示的记录数
	if(countRecord<=pageSize){
		// 让结束的记录数等于总记录数
		endIndex=countRecord;
	}
	
	// 显示操作
	$("#showUsers tr:gt("+(startIndex-1)+")").show();
	$("#showUsers tr:lt("+(endIndex-1)+")").show();
	

	// 隐藏操作
	$("#showUsers tr:lt("+(startIndex-1)+")").css

("display","none");
	$("#showUsers tr:gt("+(endIndex-1)+")").css

("display","none");
    
	$pageInfo.html("当前从"+startIndex+"记录到"+endIndex+"记录结束，共"+countRecord+"记录，当前是"+nowPage+"页，共"+countPage+"页");
};

jquery8.html

 

 

<!DOCTYPE html>
<html>
<head>
<title>jquery8.html</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">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./js/1.js"></script>
<script type="text/javascript" src="./js/user.js"></script>
</head>

<body>
	<div align="center">
		<input type="button" id="addUsers" value="删 除所有用户" />
		<table id="users" border="1px" cellpadding="0" cellspacing="0">
			<thead>
				<th><input type="checkbox" id="cbk" /></th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>操作</th>
			</thead>
			<tbody id="showUsers"></tbody>
		</table>
		<div id="pagination">
			<select id="pagesize">
				<option value="3" selected="selected">3</option>
				<option value="5">5</option>
				<option value="8">8</option>
			</select>
			<input  type="button" id="firstBtn" value="首页"/>
		    <input  type="button" id="backBtn" value="上一页"/>
		    <input  type="button" id="nextBtn" value="下一页"/>
		    <input  type="button" id="lastBtn" value="末页"/>
		    <span id="showPageInfo">从1到3记录 共5条记录</span>
		</div>

		<br> <br>
		<div>
			姓名：<input type="text" id="name" /><br> <br> 性别：<input
				type="radio" name="sex" value="男" />男 <input type="radio"
				name="sex" checked="checked" value="女" />女<br> <br> 年龄：<input
				type="text" id="age" /><br> <br> <input type="button"
				id="addUser" value="添加用户" />
		</div>
	</div>
</html>