关闭

jQuery simpleDemo

标签: jqueryjavascript
496人阅读 评论(0) 收藏 举报
分类:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工管理---</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="em.js"></script>
</head>
<body>
<center>
	<br> <br> 添加新员工 <br> <br> 
	name: <input type="text" name="name" id="name" />   
	email: <input type="text" name="email" id="email" />   
	salary: <input type="text" name="salary" id="salary" /> <br> <br>
	<button id="addEmpButton">Submit</button>
	<br> <br>
	<hr>
	<br> <br>
	<table  border="1" cellpadding="5" cellspacing=0>
		<tbody id="employeetable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="deleteEmp?id=1">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=2">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=3">Delete</a></td>
			</tr>
		</tbody>

	</table>
</center>
</body>
</html>
em.js

$(function(){
	//<button id="addEmpButton">Submit</button>
	$("#addEmpButton").click(function(){
		var name = $("#name").val();
		var email = $("#email").val();
		var salary = $("#salary").val();
		
		/*
		 	<tr>
				<td>name</td>
				<td>email</td>
				<td>salary</td>
				<td><a href="deleteEmp?id=3">Delete</a></td>
			</tr>
		 */
		var id = $("tr").size();
		alert(id);
		//方法链调用
		var $tr = $("<tr>").append("<td>"+name+"</td>")
					.append("<td>"+email+"</td>")
					.append("<td>"+salary+"</td>")
					.append('<td><a href="deleteEmp?id='+id+'">Delete</a></td>');
		$tr.find("a").click(deleteEmp);
		
		$("tbody").append($tr);
	});
	
	var deleteEmp = function(){
		alert("-----");
		//this: 代表发生事件的标签
		$(this).parent().parent().remove();
		
		return false;//让链接失效
	};
	
	//给所有<a>添加点击事件
	$("a").click(deleteEmp);
	
});

html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>选择爱好</title>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="checkbox.js"></script>
	</head>
<body>
	<form method="post" action="">
	   	<h3>你爱好的运动是?</h3>
	   	<input type="checkbox" id="checkedAll_2"/>全选/全不选
	   	<br/>
	    <input type="checkbox" name="items" value="足球"/>足球
		<input type="checkbox" name="items" value="篮球"/>篮球
		<input type="checkbox" name="items" value="羽毛球"/>羽毛球
		<input type="checkbox" name="items" value="乒乓球"/>乒乓球
	   	<br/>
	    <input type="button" id="CheckedAll" value="全 选"/>
	    <input type="button" id="CheckedNo" value="全不选"/>
	    <input type="button" id="CheckedRev" value="反 选"/> 
	
		<input type="button" id="send" value="提 交"/> 
	</form>
</body>
</html>
checkbox.js

$(function(){
	//给"全选"添加点击事件
	$("#CheckedAll").click(function(){
		//alert("=========");
		//checked=true
		$(":checkbox[name=items]").attr("checked", true);
		
		$("#checkedAll_2").attr("checked", true);
	});
	
	//给"全不选"添加点击事件
	$("#CheckedNo").click(function(){
		//alert("=========");
		//checked=true
		$(":checkbox[name=items]").attr("checked", false);
		$("#checkedAll_2").attr("checked", false);
	});
	
	//给"反选"添加点击事件
	$("#CheckedRev").click(function(){
		//var check = this.checked;//得到当前选中的状态
		//遍历
		$(":checkbox[name=items]").each(function(){
			var check = this.checked;//得到当前选中的状态
			//alert(check);
			$(this).attr("checked", !check);
		});
		
		//如果没有被选中的选项个数为0,就是选中
		$("#checkedAll_2").attr("checked",$(":checkbox[name=items]:not(:checked)").size()==0 );
	});
	
	//给"全选/全不选"添加点击事件
	$("#checkedAll_2").click(function(){
		var check = this.checked; //当前点击的"全选/全不选"的状态
		$(":checkbox[name=items]").attr("checked", check);
	});
});




0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

provider模式学习——simpledemo

y一个小的demo,呈现provider模式的整个运作流程。
  • Shiyaru1314
  • Shiyaru1314
  • 2015-04-15 19:05
  • 505

jquery的$是什么意思与相关的

转载的  转载出http://keleyi.com/a/bjad/6ogakng2.htm jQuery中的“$” 在jQuery中,最频繁使用的符号“$”。$提供了各种各样丰富的功能, ...
  • u012102536
  • u012102536
  • 2016-01-17 21:47
  • 2016

几个简单的jQuery使用方法

jQuery是JavaScript的一个集成库,语法简洁,它紧密集成了DOM,提供了方便的ajax的辅助方法、令人震撼的界面效果,以及可插拔的体系结构。 下面将介绍一些jQuery的关键特性:一、j...
  • xiaozhu123412
  • xiaozhu123412
  • 2016-08-07 17:58
  • 6498

开发自己的JQuery框架

模仿Jquery一步步实现自己的Jquery框架,并分析个步骤中改进的原因以及解决的问题;构造函数的返回值对new一个对象的影响等
  • hsd2012
  • hsd2012
  • 2016-06-14 22:10
  • 2808

初识JavaScript,Ajax,jQuery,并比较三者关系

一、基本认识   1、JavaScript   定义:           javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言...
  • caozhangyingfei0109
  • caozhangyingfei0109
  • 2013-08-26 08:12
  • 32927

jQuery—为什么要有个$

初识jQuery时知道了一个“$”,只要用这个就可以执行function来完成一些功能,当时很多人说只要知道会用就可以了,今天无意之间又与"$"进行了一次邂逅 1、为什么会有“$” document....
  • Ljm15832631631
  • Ljm15832631631
  • 2016-12-04 22:24
  • 355

jQuery中this与$(this)的区别总结

这里就谈谈this与$(this)的区别。1、jQuery中this与$(this)的区别 $("#textbox").hover( function() { ...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016-07-19 22:02
  • 3563

学会jQuery 不用买书

市面上关于jQuery的书很多,但在我看来,为了学jQuery买书,就像买一本《傻瓜相机操作指南》。如果有必要,只会证明jQuery作为一个JavaScript库,写得不够好。而jQuery恰恰是设计...
  • starrow
  • starrow
  • 2013-07-31 10:55
  • 17801

通过Jquery计算加减乘除

 下面就把这些方法摘录下来,以供遇到同样问题的朋友参考:  程序代码 //除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比...
  • Lian_Jun
  • Lian_Jun
  • 2016-08-21 22:05
  • 12068

jquery几种书写格式

几种书写格式,记录一下 //原始 $(document).ready(function(){ document.write("test1", ""); }); //缩写 ...
  • cjj3930337
  • cjj3930337
  • 2013-03-01 10:39
  • 3247
    个人资料
    • 访问:300615次
    • 积分:6392
    • 等级:
    • 排名:第4417名
    • 原创:326篇
    • 转载:45篇
    • 译文:0篇
    • 评论:117条
    文章分类