jQuery simpleDemo

来源：互联网发布：手机警报器软件编辑：程序博客网时间：2024/05/22 13:58

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