1、模拟员工信息管理系统
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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: #00FFFF;
}
input[type='text']{
width: 130px;
}
</style>
<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></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="添加新员工" onclick="addEmp()" />
</div>
<hr >
<table border="1" >
<tr>
<th><input type="checkbox" id="all" onclick="checkAll()"/></th>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>工资</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>李白</td>
<td>2345@163.com</td>
<td>1000</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>张飞</td>
<td>2345@163.com</td>
<td>4000</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>杜甫</td>
<td>222@qq.com</td>
<td>200</td>
</tr>
</table>
<h4><a href="javascript:void(0);" id="del" onclick="delEmp()">删除选中的员工</a></h4>
<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="根据ID修改员工信息" onclick="updEmp()"/>
</div>
<script type="text/javascript">
//1、添加员工的方法
function addEmp(){
//1、获取要添加的员工信息 id，name，。。。
let id = $("#box1 input[name='id']").val().trim();
let name = $("#box1 input[name='name']").val().trim();
let email = $("#box1 input[name='email']").val().trim();
let salary = $("#box1 input[name='salary']").val().trim();
//2、校验数据 ，添加员工信息，各个属性的值不能为空
if(id=="" || name==""||email==""||salary==""){
alert("添加失败！信息不能为空");
return;//返回上一步
}
//添加的员工，ID不能重复
let flag = false;//标记，员工ID不存在为false，存在为true
$("table tr").each(function(){
//通过遍历当前的tr，获取这一行信息中，员工的ID - 根据下标1，找到td中的文本
let empId = $(this).find("td").eq(1).text();
if(id == empId){
flag = true;//员工ID已存在
alert("添加失败！员工ID已存在");
}
});
if(flag == true){
return;
}
//如果不重复，就将员工信息插入到表格中
let tr = $("<tr></tr>");//创建了一个tr元素
tr.append("<td><input type='checkbox'/></td>");
tr.append("<td>"+id+"</td>");
tr.append("<td>"+name+"</td>");
tr.append("<td>"+email+"</td>");
tr.append("<td>"+salary+"</td>");//在新增的一行中添加员工信息
//把这一行添加到table中
$("table").append(tr);
}
//2、删除选中的员工信息
function delEmp(){
//获取被选中的多选框，得到上级元素td，得到上级元素tr，将整行移除
$(":checkbox:checked").parent("td").parent("tr").remove();
}
//3、全选列表中所有员工信息
function checkAll(){
// 获取当前多选框的状态
let state = $("#all").prop("checked");
//将当前多选框的状态，给到所有多选框
$(":checkbox").prop("checked",state);
}
//全选多选框，点击切换为全不选的状态
$(":checkbox:not(#all)").click(function(){
//得到所有除了全选勾选框的，勾选框被勾选的个数
let count = $(":checkbox:not(#all):checked").length;
$("#all").attr("checked",count == $("input:not(#all)").length );
let sum = 0;
$("input:not(#all)").each(function(){
if($(this).prop("checked")){//如果遍历到当前的对象是选中状态
sum++;
}
});
$("#all").prop("checked",sum == $(":checkbox:not(#all)").length );
console.log(sum);
});
//修改指定id的员工信息
function updEmp(){
/**
* 1、根据用户输入的员工ID，修改信息
* 判断输入的信息是否为空
* 判断输入的ID是否存在
*/
let id = $("#box2 input[name='id']").val().trim();
let name = $("#box2 input[name='name']").val().trim();
let email = $("#box2 input[name='email']").val().trim();
let salary = $("#box2 input[name='salary']").val().trim();
if(id=="" || name=="" || email=="" ||salary==""){
alert("修改失败！信息不能为空");
return;
}
let flag = true;
$("table tr").each(function(){
if(id==$(this).find("td").eq(1).text()){
$(this).find("td").eq(2).text(name);
$(this).find("td").eq(3).text(email);
$(this).find("td").eq(4).text(salary);
flag = false;
}
});
if(flag==true){
alert("员工ID不存在");
}
}
</script>
</body>
</html>
2、轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div,img{
width: 200px;
height: 250px;
}
div{
position: relative;
overflow: hidden;
/**
* overflow 属性 ：设置当内容溢出元素框时发生的事情。
* 只在指定高度的显示，默认值是visible ，内容不会被修剪
* 属性值：
* hidden —— 设置内容可以被修剪，并且其余的内容是不可见的
* scroll —— 设置内容可以被修剪，但是浏览器会显示滚动条，查看溢出内容
* auto —— 如果内容被修剪，则浏览器会显示滚动条查看溢出内容
* inherit —— 规定应该从父级元素继承overflow属性的值
*/
}
img{
position: absolute;
}
</style>
<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<img src="img/1.png" >
<img src="img/2.png" >
<img src="img/3.png" >
</div>
<script type="text/javascript">
//遍历得到所有图片
$("img").each(function(i){
$(this).css("left",i*200+"px");
});
function change(){
//开启移动图片的定时器
let timer = setInterval(function(){
//先得到之前的left - 左边距，是一个值
$("img").each(function(){
let left = parseInt($(this).css("left"));
left-=10;//平行左移
if(left<= -200){//一张图片彻底移出后放到最右边
left = 400;
clearInterval(timer);
}
//将变小的left赋值回去
$(this).css("left",left+"px");
});
},10);
}
let changeTimer = setInterval(change,2000);
//加入鼠标移入图片事件
$("div").mouseover(function(){
clearInterval(changeTimer);
});
//加入鼠标移出图片事件
$("div").mouseout(function(){
changeTimer = setInterval(change,2000);
});
</script>
</body>
</html>
3、动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: #CD5C5C;
}
</style>
<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="button" value="隐藏div" onclick="hideFn()"/>
<button type="button" onclick="showFn()">显示div</button>
<button type="button" onclick="toggleFn()">切换显示和隐藏状态</button>
<div id="show">
我是被操控的div
</div>
<script type="text/javascript">
//点击按钮隐藏div的方法
function hideFn(){
// $("#show").hide(5000,"linear",function(){
// alert("div已隐藏")
// });
// $("#show").slideUp(5000,"linear");
$("#show").slideUp(5000,"linear");
/**显示的动画效果
* show() 参数：
* 参数1：speed 动画的速度，
* 有三个预定义的值 "slow" ,"normal" , "fast" 速度比较快
* 或者是设置表示动画时长的毫秒值 如1000
*
* 参数2 easing 用来指定切换的效果，默认值是swing ，
* swing：动画执行时的效果，是先慢，中间快，后慢
* linear：动画执行的时候匀速执行
*
* 参数3：fn 在动画效果完成时执行的函数，每个元素执行一次
*
*
*/
/**
* 隐藏的动画效果
* hide() - 参数同上
*
* 切换隐藏和显示状态的动画效果
* toggle() - 参数同上
*/
/**
* 可以设置动画效果为滑动或者淡入淡出
* 1、滑动隐藏、显示、和切换
* slideDown() - 显示
* slideUp() - 隐藏
* slideToggle() - 切换
*
* 2、淡入淡出的隐藏，显示，和切换
* fadeIn() - 显示
* fadeOut() - 隐藏
* dadeToggle() - 切换
*
*/
}
function showFn(){
// $("#show").show("fast","swing",function(){
// alert("div已显示");
// });
$("#show").slideDown(2000,"swing");
}
function toggleFn(){
//$("#show").toggle("3000","swing");
$("#show").fadeToggle("3000","swing");
}
</script>
</body>
</html>
4、jQuery遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
/**
* js的遍历方式 - for(初始值；结束条件；步长)
*
* jq的遍历方式 ：
* 1、jq对象.each(函数);
* 语法：jq对象.each(function( index , element ){});
* 参数 ：
* index —— 元素在集合中的索引
* element—— 集合中的每个元素对象
* this —— 集合中的每个元素对象，等同于element
*
* 2、回调函数返回值
* true：如果当前function函数返回值为false，则结束循环 等同于break
* false：如果当前function函数返回值为true，则结束本次循环，
* 进入下一次循环，等同于continue
*
* 3、$.each(object,[函数]);
* 4、for..of 是jQuery3.0版本之后提供的方式
* for(元素对象 of 容器对象)
*
*/
$(function(){
var citys = $("#city li");
// //遍历li
// for(var i = 0; i<citys.length;i++){
// }
//3、
$.each(city,function(){
alert("sss");
});
//4、
for(li of citys){
alert("dddd ");
}
});
</script>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>杭州</li>
<li>深圳</li>
</ul>
</body>
</html>
5、事件绑定和切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
/**
* 事件绑定和切换
* 1、标准形式
* 2、on off 的形式
* 3、事件切换的形式
*
*/
//1、标准方式
$(function(){
$("#i1").click(function(){
alert("点击了输入框");
});
//获得鼠标焦点
$("#i1").focus(function(){
console.log("正在输入。。。");
});
$("#i2").focus(function(){
console.log("对方正在输入。。。");
});
/**
* 鼠标移入 mouseover()
* 鼠标移出 mouseout()
*/
//2、 on off 方式
/**
* on() 函数 绑定事件
* 参数1 - 事件名称
* 参数2 - 执行的函数
*
* off() 函数 移除绑定的事件
* 参数 —— 事件名称
*/
//使用 on() 函数给按钮1绑定单击事件 click
$("#b1").on("click",function(){
alert("点击了按钮1");
});
//使用off() 函数解除按钮的绑定事件
$("#b2").click(function(){
$("#b1").off("click");//可以移除指定按钮的事件绑定
$("#i1").off();//如果不写参数，将组件上的所有事件全部移除
});
//3、事件切换 toggle
/**
* toggle() 函数
* 参数1 - function1
* 参数2 - function2
* 当第一次点击组件时执行function1 ， 第二次点击执行function2
*/
$("#b3").toggle(function(){
$("#d1").css("background-color","green");
},function(){
$("#d1").css("background-color","red");
});
});
</script>
<input type="text" id="i1" value="绑定点击事件" />
<input type="text" id="i2" value="" />
<br>
<button type="button" id="b1">按钮1</button>
<button type="button" id="b2">按钮2</button>
<br>
<div id="d1" style="width: 100px; height: 200px; ">
</div>
<button type="button" id="b3">按钮3</button>
</body>
</html>
6、案例-广告显示和隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 500px;
height: 500px;
font-size: 80px;
color: #0000FF;
font-style: italic;
display: none;/* 设置显示状态为隐藏状态 */
}
</style>
<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
/**
* 需求：
* 1、当页面加载完成后，延时3秒，自动显示广告
* 2、广告显示5秒后，自动消失
*
* show/hide
*/
$(function(){
let timer = setTimeout(function(){
// alert("延时3秒");
$("#d1").slideDown(0,"linear");
let timer2 = setTimeout(function(){
$("#d1").slideUp();
},5000);
},3000);
});
</script>
<div id="d1" >
广告！！！
</div>
</body>
</html>
7、案例2-抽象演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
width: 300px;
height: 300px;
}
#d2{
width: 100px;
height: 100px;
}
</style>
<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
/**
* 需求：
* 1、给开始抽奖的按钮绑定单击事件
* 1、定义循环定时器
* 2、切换小相框的src属性
* 2、给结束按钮绑定单击事件
* 1、停止定时器
* 2、给大相框设置src属性
*/
//图片路径数组
var imgs = ["img/1.png","img/2.png","img/3.png","img/4.png"
,"img/5.png" ,"img/6.png","img/7.png","img/8.png","img/9.png"
];
var startId;//开始定时器的id
var index;//下标
$(function(){
//先获取开始按钮和结束按钮的状态，是否可用
$("#b1").prop("disabled",false);//可用
$("#b2").prop("disabled",true);//不可用
$("#b1").click(function(){
//点击开始按钮，开始循环定时器任务，每200毫秒执行一次
startId = setInterval(function(){
$("#b1").prop("disabled",true);//不可用，不能再点开始
$("#b2").prop("disabled",false);//可用 ，可以点击结束
//使用随机数，随机生成一个数组下标，得到图片路径src
index = Math.floor(Math.random()*imgs.length);
$("#img1").prop("src",imgs[index]);//改变src属性的状态
},200);
});
//给结束按钮绑定点击事件，
$("#b2").click(function(){
//确定按钮是否可用
$("#b1").prop("disabled",false);//可用
$("#b2").prop("disabled",true);//不可用
//停止定时器任务
clearInterval(startId);
//延时1秒显示
$("#img2").prop("src",imgs[index]).hide();
$("#img2").show(1000);
});
});
</script>
<div id="d1">
<img src="" id="img1" style="width: 100%;">
</div>
<div id="d2">
<img src="img/1.png" id="img2" >
</div>
<button type="button" id="b1">开始抽奖</button>
<button type="button" id="b2">结束</button>
</body>
</html>
8、jQuery的插件机制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
/**
* 插件机制 - 本质是增强jQuery的功能
* 实现方式有两种
* 1、$.fn.extend(Object) 对象级别插件
* 通过增强 jQuery获取的对象 的功能来实现的 例如：$("#id")
*
* 2、$.extend(Object) 全局级别插件
* 增强jQuery对象自身的功能
*/
//使用jq插件，给jq对象添加两个方法
//按钮1选中复选框，按钮2取消复选框
//1、定义jq的对象插件
$.fn.extend({
//定义了一个check()方法，让所有的jq对象都能调用该方法
check : function(){
this.prop("checked",true);
},
//定义一个取消选中的uncheck()方法
uncheck:function(){
this.prop("checked",false);
}
});
//定义一个全局插件
//全局插件提供两个方法，min() 求两个值的最小值 max() 求两个值的最大值
$.extend({
max : function(a,b){
//三目表达式
/**
* 格式
* 判断式 ? 值1 : 值2
* true 返回值1
* false 返回值2
*/
return a>=b ? a : b ;
},
min : function(a,b){
return a<=b ? a : b ;
}
});
var max = $.max(23,12);
console.log(max);
var min = $.min(23,12);
console.log(min);
$(function(){
//按钮点击事件
$("#b1").click(function(){
//jq对象 调用插件中提供的方法
$("input[type='checkbox']").check();
});
$("#b2").click(function(){
$("input[type='checkbox']").uncheck();
});
});
</script>
<button type="button" id="b1">点击选中复选框</button>
<button type="button" id="b2">点击取消复选框</button>
<br>
<input type="checkbox" value="football" />足球
<input type="checkbox" value="basketball" />篮球
<input type="checkbox" value="volleyball" />排球
</body>
</html>
扫一扫
3074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
