jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）
1.仿QQ列表分组
<!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;
width:100px;
border-collapse:collapse;
margin:15px 10px;
width: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的js库-->
<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>
2.二级联动下拉框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script>
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 name="country" onchange="getCountry()" >
<option value="none">--选择国家--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
<br><br>
<hr/>
<br>
<div id="seleDiv">
<select id="province" onchange="selectCity(this)">
<option>--选择省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<span id="citySpan">
<select id="city">
<option>--选择城市--</option>
</select>
</span>
</div>
</body>
</html>
3.模拟员工信息管理系统
<!DOCTYPE HTML>
<html>
<head>
<title>table练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
font-family: "微软雅黑"
}
h2, h4{ text-align: center; }
div#box1, div#box2 {
text-align:center;
}
hr{
margin: 20px 0;
}
table{
margin: 0 auto;
width: 70%;
text-align: center;
border-collapse:collapse;
}
td, th{padding: 7px; width:20%;}
th{
background-color: #DCDCDC;
}
</style>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//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>
<div id="box1">
ID：<input type="text" name="id"/>
姓名：<input type="text" name="name"/>
邮箱：<input type="text" name="email"/>
工资：<input type="text" name="salary"/>
<input type="button" id="add" value="添加"/>
</div>
<hr/>
<table border="1">
<tr>
<th>
<input type="checkbox" id="all"/>
<!--全选-->
</th>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>工资</th>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>1</td>
<td>宋江</td>
<td>sj@163.com</td>
<td>12000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>2</td>
<td>武松</td>
<td>ws@163.com</td>
<td>10500</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>3</td>
<td>孙二娘</td>
<td>sen@163.com</td>
<td>11000</td>
</tr>
</table>
<h4><a href="#" id="del">删除选中</a></h2>
<hr/>
<div id="box2">
ID：<input type="text" name="id"/>
姓名：<input type="text" name="name"/>
邮箱：<input type="text" name="email"/>
工资：<input type="text" name="salary"/>
<input type="button" id="upd" value="修改"/>
</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;width:100px;border-collapse:collapse;margin:15px 10px;width: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的js库--><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>
jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）的更多相关文章
- (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
- jquery+html三级联动下拉框
jquery+html三级联动下拉框及详情页面加载时的select初始化问题 html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...
- JQuery Easyui/TopJUI 创建多级联动下拉框（纯HTML实现！！！）
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...
- JQuery 插件之Ajax Autocomplete（ajax自动完成）搜索引擎自动显示下拉框
平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...
- jquery input 下拉框(模拟select控件)焦点事件
本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...
- jquery+html三级联动下拉框及详情页面加载时的select初始化问题
html写的三个下拉框,如下: <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel ...
- jquery+ligerform三级联动下拉框
如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...
- jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...
- 一款基于jQuery的联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
随机推荐
- 18-09-16如何从pychram的第三方包导入设计器
1 在pychrm 中的操作 2 找到pycharm 中找到对应的包 3 找到设计器中文件夹 后进行复制即可
- 对接https数据（3des加密）
private void checkThread() { Urls urls = new Urls(type);//根据唯一识别类型初始化参数,可根据实际情况修改此构造函数 //访问国家平台接口,取出 ...
- 马凯军201771010116《面向对象与程序设计Java》第十六周知识学习总结
一:理论知识部分 1.线程的概念: 程序是一段静态的代码,它是应用程序执行的蓝 本. ‐进程是程序的一次动态执行,它对应了从代码加 载.执行至执行完毕的一个完整过程. 多线程是进程执行过程中产生的多条 ...
- crtontab定时执行任务
1.crontab介绍:crontab命令用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和执行. 2.查看当前用户的定时任务:cronta ...
- 使用Bash Bunny从被锁定的系统抓取登陆凭据
在今年早些时候,FB就对Bash Bunny做了相关的报导.这款号称“世界上最先进的USB攻击工具”的Bash Bunny,是否真的像其所说的一样是款渗透神器呢?下面,我将通过实例演示如何利用Bash ...
- Python笔记4——字典的一些基本操作
#字典 key-value #添加 my_family= {"father": "weihaiqing", "mother": " ...
- less &进行选择判断css的样式
先说&在less写 .parent{ .child{} &.and{} }在css就是 .parent.child{}//父子关系 .parent.and{}//并关系 用到这个方法是 ...
- 服务器搭建lamp环境
使用的例子:服务器版本内核centos 7.04 Xshell连接到您的服务器上,使系统处于最新状态执行以下命令, yum update -y 利用yum命令安装Apache执行命令, ...
- Android 底部导航栏的xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...
- 给PostgreSQL添加MySQL的unix_timestamp与from_unixtime函数
MySQL的2个常用函数unix_timestamp()与from_unixtime PostgreSQL并不提供,但通过PostgreSQL强大的扩展性可以轻松的解决问题. 话说远在天边,尽在眼前, ...