jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

1.仿QQ列表分组

<!DOCTYPE HTML>

<html>

<head>

body{

font-family: "微软雅黑";

}

table {

border:#0099FF 1px solid;

100px;

border-collapse:collapse;

margin:15px 10px;

10%;

}

table td{

border:#0066FF 1px solid;

background-color:#6f5f3e;

text-align:center;

padding: 5px 0px;

}

table td div {

background-color:#FFFF99;

text-align:left;

line-height: 24px;

padding-left: 14px;

}

table td a:link, table td a:visited {

color:#00ffFF;

text-decoration:none;

}

table td a:hover {

color:#00CC00;

}

使用display属性:如果取值为none就是隐藏标签。

table td div { display:none; }

</style>

/* --通过jQuery实现访QQ列表好友分组-- */

function openDiv(thisobj){

//1.关闭其他行的div

$(thisobj).parents("tr").siblings().find("div").hide();

//2.展开或关闭点击a标签的兄弟div

$(thisobj).next().toggle();

}

/*//thisobj --> 被点击的A标签

//在显示当前div之前, 先隐藏其他div

$(thisobj).parents("tr").siblings().find("div").hide();

$(thisobj).next().toggle();*/

/* --通过js实现访QQ列表好友分组--

function openDiv(thisobj){

var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];

var aDiv = document.getElementsByTagName("div");

//判断当前分组div是展开还是关闭

if(oDiv.style.display == "block"){

//如果当前div是打开的, 只需关闭该div即可

oDiv.style.display = "none";

}else{

//如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的

for(var i=0;i<aDiv.length; i++){

aDiv[i].style.display = "none";

}

oDiv.style.display = "block";

}

</script>

</head>

<body>

<table>

<tr>

<td>

<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>

<div>

秦始皇<br />

刘邦<br />

李世民<br />

康熙<br />

</div>

</td>

</tr>

<tr>

<td>

<div>

刘备<br />

关羽<br />

张飞<br />

赵云<br />

</div>

</td>

</tr>

<tr>

<td>

<div>

西施<br />

貂蝉<br />

杨贵妃<br />

王昭君<br />

</div>

</td>

</tr>

<tr>

<td>

<div>

马云<br />

李开复<br />

俞敏洪<br />

黎活明<br />

</div>

</td>

</tr>

</table>

</body>

</html>

2.二级联动下拉框

<!DOCTYPE HTML>

<html>

<head>

<title>二级联动下拉框</title>

var data = {

"北京市": ["海淀区","朝阳区","丰台区"],

"河北省": ["石家庄","唐山","秦皇岛"],

"辽宁省": ["沈阳","大连","鞍山"],

"山东省": ["青岛","济南","烟台"]

}

/* --通过jQuery实现二级联动下拉框 -- */

function selectCity(thisobj){

//thisobj是第一个下拉框选中的option对象

var province = $(thisobj).val();

var cities = data[province];

//添加数据前先清空一次下拉框

$("#city").html("");

//循环添加城市信息

//获取第二个下拉框，在其中添加城市信息

for(var i=0;i<cities.length;i++){

$("#city").append("<option>"+cities[i]+"</option>")

}

/*//获取用户选中的省份

var prov = $(thisobj).val();

//获取省份对应的市区数据

var citys = data[prov];

//先清空之前的数据

$("#city").html("<option>--选择城市--</option>");

//循环遍历取出每一个城市作为option选项填充到第二个下拉框中

for(var i=0; i<citys.length; i++){

$("#city").append("<option>"+citys[i]+"</option>");

}*/

/* --通过js实现二级联动下拉框--

function selectCity(thisobj){

//获取用户选中的省份

var prov = thisobj.value;

//再根据省份获取对应的市区

var citys = data[prov];

//获取第二个下拉列表

var oCitySele = document.getElementById("city");

//清空之前的数据

//oCitySele.innerHTML = "<option>--选择城市--</option>";

var opts = oCitySele.getElementsByTagName("option");

var len = opts.length;

for(var i=1; i< len; i++){

oCitySele.removeChild(opts[1]);

}

//循环遍历, 将每一个城市依次填充到第二个下拉列表中

for(var i=0; i<citys.length; i++){

var oOption = document.createElement("option");

oOption.innerHTML = citys[i];

//将option挂载到select上

oCitySele.appendChild(oOption);

}

</script>

<!--

js实现注意问题:

ie10以下的浏览器不支持 select,table上的innerHTML属性

删除option时，由于删除后，options长度发生了变化，所以直接用for循环会有漏删的情况，可以由后向前删除，可以避免这样的问题

-->

</head>

<body>

</select>

<hr/>

<br>

</select>

</select>

</span>

</div>

</body>

</html>

3.模拟员工信息管理系统

<!DOCTYPE HTML>

<html>

<head>

<title>table练习</title>

body{

font-family: "微软雅黑"

}

h2, h4{ text-align: center; }

div#box1, div#box2 {

text-align:center;

}

hr{

margin: 20px 0;

}

table{

margin: 0 auto;

70%;

text-align: center;

border-collapse:collapse;

}

td, th{padding: 7px; 20%;}

th{

background-color: #DCDCDC;

}

</style>

//html文档加载完执行

$(function(){

$("#add").click(function(){

//添加员工信息

//$.trim()可以去除当前值的开始部分和结束部分的空白格

var id = $.trim($("#box1 input[name='id']").val());

var name = $.trim($("#box1 input[name='name']").val());

var email = $.trim($("#box1 input[name='email']").val());

var salary = $.trim($("#box1 input[name='salary']").val());

//非空校验

if(id == "" || name == ""|| email == "" || salary == ""){

alert("用户信息不能为空");

return;

}

var flag = false;

//id是否存在的校验

$("table tr").each(function(){

if($(this).find("td:eq(1)").text() == id){

alert("iD已存在");

flag = true;

//return;

}

});

if(flag){

return;

}

//邮箱格式校验

var reg = /w+@w+(.w+)+/;

if(!reg.test(email)){

alert("邮箱格式不正确");

return;

}

//添加数据

var $check = $("<td><input type='checkbox'/></td>")

var $id = $("<td>"+id+"</td>");

var $name = $("<td>"+name+"</td>");

var $email = $("<td>"+email+"</td>");

var $salary = $("<td>"+salary+"</td>");

var $tr = $("<tr></tr>");

$tr.append($check).append($id).append($name).append($email).append($salary);

$("table").append($tr);

});

//全选

$("#all").click(function(){

var check = $(this).attr("checked");

$("table input[type='checkbox']").attr("checked",check);

});

//删除

$("#del").click(function(){

//获取被选中的checkbox 删除其所在行

$("table input:checked:not(input[id='all'])").parents("tr").remove();

});

})

</script>

</head>

<body>

<h2>添加新员工</h2>

ID：<input type="text" name="id"/>

姓名：<input type="text" name="name"/>

邮箱：<input type="text" name="email"/>

工资：<input type="text" name="salary"/>

</div>

<hr/>

<tr>

<th>

</th>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

<hr/>

ID：<input type="text" name="id"/>

姓名：<input type="text" name="name"/>

邮箱：<input type="text" name="email"/>

工资：<input type="text" name="salary"/>

</div>

</body>

</html>

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>好友列表</title><style type="text/css">body{font-family: "微软雅黑";}table {border:#0099FF 1px solid;100px;border-collapse:collapse;margin:15px 10px;10%;}table td{border:#0066FF 1px solid;background-color:#6f5f3e;text-align:center;padding: 5px 0px;}
table td div {background-color:#FFFF99;text-align:left;line-height: 24px; padding-left: 14px;}table td a:link, table td a:visited {color:#00ffFF;text-decoration:none;}table td a:hover {color:#00CC00;}/*使用display属性:如果取值为none就是隐藏标签。*/table td div { display:none; }

</style><script src="jquery-1.4.2.js"></script><script type="text/javascript">/* --通过jQuery实现访QQ列表好友分组-- */function openDiv(thisobj){//1.关闭其他行的div$(thisobj).parents("tr").siblings().find("div").hide();//2.展开或关闭点击a标签的兄弟div$(thisobj).next().toggle();}/*//thisobj --> 被点击的A标签//在显示当前div之前, 先隐藏其他div$(thisobj).parents("tr").siblings().find("div").hide();$(thisobj).next().toggle();*//* --通过js实现访QQ列表好友分组--function openDiv(thisobj){var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];var aDiv = document.getElementsByTagName("div");
//判断当前分组div是展开还是关闭if(oDiv.style.display == "block"){//如果当前div是打开的, 只需关闭该div即可oDiv.style.display = "none";}else{//如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的 for(var i=0;i<aDiv.length; i++){aDiv[i].style.display = "none";}oDiv.style.display = "block";}} */</script></head><body><table><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a><div>秦始皇<br />刘邦<br />李世民<br />康熙<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a><div>刘备<br />关羽<br />张飞<br />赵云<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a><div>西施<br />貂蝉<br />杨贵妃<br />王昭君<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a><div>马云<br />李开复<br />俞敏洪<br />黎活明<br /></div></td></tr></table></body></html>