1.端口案例改进，操作更灵活
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.model{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 350px;
margin-top: -200px;
margin-left: -250px;
background-color: aliceblue;
z-index: 10;
}
.model p,h3{
text-align: center;
}
.model p input[type="text"]{
width: 300px;
height: 28px;
}
.model p input[type="button"]{
width: 150px;
height: 35px;
}
.shadow{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addModel();">添加</a>
<table border="1">
<thead>
<tr>
<th>地址</th>
<th>端口</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td name="host">1.1.1.11</td>
<td name="port">80</td>
<td><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
<tr>
<td name="host">1.1.1.12</td>
<td name="port">80</td>
<td><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
<tr>
<td name="host">1.1.1.13</td>
<td name="port">80</td>
<td><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
</tbody>
</table>
<div class="model hide">
<p><h3>操作</h3></p>
<p>地址：<input type="text" name="host"/></p>
<p>端口：<input type="text" name="port"/></p>
<p><input type="button" value="取消" onclick="removeModel();"/></p>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
//打开添加框
function addModel() {
$('.model,.shadow').removeClass('hide');
$('.model p input[type="text"]').val('');
}
//关闭添加框
function removeModel() {
$('.model,.shadow').addClass('hide');
}
//点击编辑时执行函数
$('.edit').click(function () {
$('.model,.shadow').removeClass('hide');
//获取当前点击元素的父级标签的所有兄弟标签
var tds=$(this).parent().prevAll();
tds.each(function () {
// $('.model input[name="?"]')获取name=？的输入框
//$(this).attr('name')获取被点击td标签的name值并带入？
//val(）赋值
//$(this).text()h获取被点击td标签的html文本
$('.model input[name='+$(this).attr('name')+']').val($(this).text());
})
})
</script>
</body>2.菜单切换内容
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
margin: 0 auto;
height: 35px;
line-height: 35px;
width: 400px;
background-color:#999999;
}
.menu .menu-item{
float: left;
width: 65px;
border-right: 1px solid #fdfdfd;
text-align: center;
color: #ffffff;
cursor: pointer;
}
.content{
margin: 0 auto;
height: 200px;
width: 398px;
border: 1px dashed #999999;
border-top: 0px;
}
.hide{
display: none;
}
.active{
background-color: #ff6600;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item active">菜单一</div>
<div class="menu-item">菜单二</div>
<div class="menu-item">菜单三</div>
</div>
<div class="content">
<div>内容一</div>
<div class="hide">内容二</div>
<div class="hide">内容三</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function () {
//被点击div的样式添加active，其他兄弟div样式去掉div
$(this).addClass('active').siblings().removeClass('active');
//获取被点击div的index索引
var index=$(this).index('.menu-item');
//根据索引找到content内容孩子中的对应div并移除样式hide，其他兄弟div添加h样式ide
$('.content').children().eq(index).removeClass('hide').siblings().addClass('hide');
})
</script>
</body>3.点赞按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
padding: 45px;
border-bottom:1px dashed #ff6600;
}
.item{
width: 35px;
position: relative;
}
</style>
</head>
<body>
<div class="content">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="content">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="content">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//当点击.item时执行
$('.item').click(function () {
AddFavor(this);
})
//点赞函数
function AddFavor(self) {
var fontSize=15;
var top=0;
var right=0;
var opacity=1;
//创建+1标签
var tag=document.createElement('span');
$(tag).text('+1');
$(tag).css('color','#ff6600');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize+'px');
$(tag).css('top',top+'px');
$(tag).css('right',right+'px');
$(tag).css('opacity',opacity);
$(self).append(tag);
//计时器每35mm执行一次
var obj=setInterval(function () {
fontSize+=5;
top-=5;
right-=5;
opacity-=0.1;
$(tag).css('fontSize',fontSize);
$(tag).css('top',top);
$(tag).css('right',right);
$(tag).css('opacity',opacity);
//当tag透明度小于零时，移除计数器并移除tag
if(opacity<0){
clearInterval(obj);
$(tag).remove();
}
},35)
}
</script>
</body>
</html>4.登陆验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.error{
color:red;
}
</style>
<body>
<form id="f1" action="https://www.baidu.com/" method="post">
<p>用户:<input type="text" name="user" msg="用户名" /></p>
<p>密码:<input type="password" name="password" msg="密码" /></p>
<P>邮箱:<input type="text" name="email" msg="邮箱" /></P>
<p>电话:<input type="text" name="tel" msg="电话" /></p>
<input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
//当页面框架加载完成后执行
$(function () {
$(':submit').click(function () {
$('.error').remove()
var flag=true;
//遍历input
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v=$(this).val();
var n=$(this).attr('msg');
//如果为空
if(v.length<=0){
flag=false;
var tag=document.createElement('span')
tag.className="error";
tag.innerHTML=n+"为必填";
$(this).after(tag);
//return false;
}
})
return flag;
})
})
</script>
</body>
</html>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
