-----------------------------------------------------------------------------------------
1、弹出菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
width: 160px;
}
ul,li{
padding:0;
margin:0;
border-bottom: 1px solid #fff;
}
li>span{
display: block;
background-color: pink;
}
li>div{
height: 120px;
background-color: yellow;
display: none;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
$("span").click(function(){
if($(this).next().is(":visible"))
$(this).next().slideUp();
else
$(this).next().slideDown().parent().siblings().children("div").slideUp();
})
})
</script>
</head>
<body>
<ul>
<li>
<span>标题1</span>
<div>我是弹出来的div1</div>
</li>
<li>
<span>标题2</span>
<div>我是弹出来的div2</div>
</li>
<li>
<span>标题3</span>
<div>我是弹出来的div3</div>
</li>
<li>
<span>标题4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</body>
</html>
-----------------------------------------------------------------------------------------
2、一级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,
li {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
#wrap {
width: 330px;
margin: 30px auto 0;
height: 30px;
background-color: blue;
border-radius: 5px;
padding: 0 5px;
}
#wrap>ul {
height: 30px;
}
#wrap>ul>li {
float: left;
width: 100px;
background-color: yellow;
height: 30px;
line-height: 30px;
margin: 0 5px;
}
a {
text-decoration: none;
color: red;
}
#wrap .uu {
background-color: pink;
display: none;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
$("#wrap>ul>li").mouseenter(function() {
$(this).children("ul").show();
}).mouseleave(function() {
$(this).children("ul").hide();
})
});
</script>
</head>
<body>
<div id="wrap">
<ul>
<li>
<a href="javascript:;">一级菜单1</a>
<ul class="uu">
<li>二级菜单11</li>
<li>二级菜单12</li>
<li>二级菜单13</li>
</ul>
</li>
<li>
<a href="javascript:;">一级菜单2</a>
<ul class="uu">
<li>二级菜单21</li>
<li>二级菜单22</li>
<li>二级菜单23</li>
</ul>
</li>
<li>
<a href="javascript:;">一级菜单3</a>
<ul class="uu">
<li>二级菜单21</li>
<li>二级菜单22</li>
<li>二级菜单23</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------
3、学校概况
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>折叠菜单2</title>
<style type="text/css">
ul,li{margin:0;padding:0}
body{font-size:12px;}ul,li{list-style: none;}
a:link,a:visited{text-decoration:none;}
div.list{width:210px;margin:40px auto 0 auto;}
.list a{display:block;font-weight:bold; height:36px;line-height:36px;}
.list ul li{background-color:#467ca2; border-bottom:solid 1px #316a91;}
.list ul li a{padding-left:10px;color:#fff;}
.list ul li ul{display:none;}
.list ul li ul li {background-color:#6196bb;border-bottom:solid 1px #467ca2;}
.list ul li ul li ul{display:none;}
.list ul li ul li a{ padding-left:20px; color:#9FC;}
.list ul li ul li ul li { background-color:#d6e6f1; border-bottom:solid 1px #6196bb; }
.list ul li ul li ul li a{ padding-left:30px;color:#316a91;}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
$("a.inactive").click(function(){
if($(this).next("ul").is(":visible"))
$(this).next("ul").hide();
else $(this).next("ul").show().parent().siblings().find("ul").hide();
})
})
</script>
</head>
<body>
<div class="list">
<ul class="yiji">
<li><a href="#" class="inactive">学校概况</a>
<ul>
<li><a href="#" class="inactive">科大简介</a>
<ul >
<li><a href="#">校园分布</a></li>
<li><a href="#">校园风光</a></li>
</ul>
</li>
<li><a href="#">现任领导</a></li>
<li><a href="#" class="inactive">组织机构</a>
<ul>
<li><a href="#">党委机关</a></li>
<li><a href="#">团委机关</a></li>
<li><a href="#">行政机关</a></li>
<li><a href="#">群团组织</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="inactive">教育教学</a>
<ul >
<li><a href="#">本科生教育</a></li>
<li><a href="#">研究生教育</a></li>
<li><a href="#">继续教育</a></li>
</ul>
</li>
<li><a href="#" class="inactive">招生就业</a>
<ul >
<li><a href="#">本科生招生</a></li>
<li><a href="#">研究生招生</a></li>
<li><a href="#">继续教育招生</a></li>
<li><a href="#">就业信息网</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------
4、微博发布
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>微博发布</title>
<style>
.box {
width: 600px;
margin: 20px auto;
border: 1px solid #000;
padding: 10px;
}
#txt {
width: 400px;
height: 150px;
}
ul,
li {
padding: 0;
margin: 0;
}
ul {
list-style: none;
margin: 0 126px 0 65px;
}
li {
border-bottom: 1px dashed #ccc;
}
</style>
<script src="jquery-1.12.4.js" type="text/javascript">
</script>
<script>
$(function() {
$("#btn").click(function() {
var tt = $("#txt").val();
$("#txt").val("");
var $li = $("<li>" + tt + "<li>");
$("ul").prepend($li);
});
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<button id="btn">发布</button>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<ul id="ul"> </ul>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------
5、苹果橘子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $li = $("<li>哈密瓜</li>");
$("li:eq(2)").after($li);
$("li:lt(2)").clone().appendTo("ul");
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li>雪梨</li>
</ul>
</body>
</html>
-----------------------------------------------------------------------------------------
6、课题专业添加删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
float: left;
}
.divC {
padding-top: 80px;
margin: 0 30px;
}
select {
width: 122px;
height: 200px;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
$("#btn1").click(function() {
$("#sel1>option:selected").appendTo("#sel2");
})
$("#btn2").click(function() {
$("#sel1").append($("#sel2>option:selected"));
})
})
</script>
</head>
<body>
<h2>课题专业选择</h2>
<div class="divL">
<span>课题适合专业</span><br>
<select name="se1" id="sel1" multiple size="10">
<option value="软件工程">软件工程</option>
<option value="软件工程(专升本)">软件工程(专升本)</option>
<option value="自动化">自动化</option>
<option value="电子信息">电子信息</option>
<option value="光学电子">光学电子</option>
<option value="物联网">物联网</option>
</select>
</div>
<div class="divC">
<button id="btn1">添加-->></button><br><br>
<button id="btn2">删除<<--</button>
</div>
<div class="divR">
<span>已选专业</span><br>
<select name="se1" id="sel2" multiple size="10">
</select>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------
7、黑白块,国际象棋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
border: 3px solid #000;
}
td{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
$("tr:nth-child(odd)>td:nth-child(even)").css("background-color","#000");
$("tr:nth-child(even)>td:nth-child(odd)").css("background-color","#000");
})
</script>
</head>
<body>
<table align="center" cellspacing="0">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
</table>
</body></html>
-----------------------------------------------------------------------------------------
8、围巾
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精品展示</title>
<style>
ul,li{
padding: 0;
margin:0;
list-style: none;
}
.wrapper {
width: 298px;
height: 243px;
margin: 100px auto 0;
border: 1px solid pink;
}
#left, #center, #right {
float: left;
height: 243px;
}
#left,#right{
width: 80px;
}
#center{
width:138px;
height: 243px;
}
#left li, #right li {
background-color:rgba(200,200,200,0.3);
height: 27px;
}
#left li a, #right li a {
display: block;
height: 26px;
border-bottom: 1px solid pink;
line-height: 26px;
text-align: center;
color:red;
text-decoration: none;
font-size: 12px;
}
#left li a:hover, #right li a:hover {
color: blue;
background-color:yellow;
text-decoration: underline;
}
#center li{
height: 243px;
background-color:rgba(255,255,0,0.3);
}
#center li a{
display: block;
height: 243px;
line-height:243px;
text-align: center;
font-size: 40px;
text-decoration: none;
color:#000;
}
#center>li{display: none;}
#center>li:nth-child(1){
display:block;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
$("#left>li").mouseenter(function(){
var index=$(this).index();
$("#center>li:eq("+index+")").show().siblings().hide();
})
$("#right>li").mousedown(function(){
var index=$(this).index()+9;
$("#center>li:eq("+index+")").show().siblings().hide();
})
})
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男靴</a></li>
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男靴</a></li>
</ul>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------
9、全选/全不选
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>复选框级联效果</title>
<style type = "text/css">
caption{
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
td{
text-align:center;
font-size:16px;
line-height:16px;
}
input{
display: inline-block;
width: 16px;
height: 16px;
}
input[type=button]{
width: 100px;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
//点击全选按钮后,根据全选按钮的选中状态来控制下面所有子复选框的状态
$("#all").click(function() {
var ch = this.checked;
$("input[name=product]").each(function() {
this.checked = ch;
})
})
$("input[name=product]").click(function() {
if ($("input[name=product]:checked").length == $("input[name=product]").length)
$("#all")[0].checked = true;
else
$("#all")[0].checked = false;
})
})
</script>
</head>
<body>
<table border = "1" cellspacing = "0" cellpadding = "0" width = "600px;" id="tb1" >
<caption>河科大软件学院Web前端课程开设情况表</caption>
<tr>
<td>
<input type = "checkbox" id = "all" value = "全选" />全选
</td>
<td>开设课程</td>
<td>开设学期</td>
</tr>
<tr>
<td><input type = "checkbox" name = "product" /></td>
<td>网页设计基础</td>
<td>第2学期</td>
</tr>
<tr>
<td><input type = "checkbox" name = "product" /></td>
<td>JavaScript程序设计</td>
<td>第3学期</td>
</tr>
<tr>
<td><input type = "checkbox" name = "product" /></td>
<td>JQuery程序设计</td>
<td>第4学期</td>
</tr>
<tr>
<td><input type = "checkbox" name = "product" /></td>
<td>Vue.js前端开发</td>
<td>第4学期</td>
</tr>
<tr>
<td><input type = "checkbox" name = "product" /></td>
<td>移动开发技术</td>
<td>第5学期</td>
</tr>
</table>
</body>
</html>
10、衬衫
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>折叠菜单2</title>
<style type="text/css">
ul,li{margin:0;padding:0}
body{font-size:20px;}ul,li{list-style: none;}
a:link,a:visited{text-decoration:none;}
div.list{width:210px;margin:40px auto 0 auto;}
.list a{display:block; height:50px;line-height:50px;}
.list ul li{ border:1px solid #9fe7fd;}
.list ul li a{padding-left:10px;color: rgb(76, 130, 180);}
.list ul li ul{display:none;}
.list ul li ul li {height:40px;line-height:40px;border: 0px;padding-left:10px;}
.selected{
background: rgb(92, 170, 233);
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
$("a.inactive").click(function(){
$(this).addClass("selected").parent().siblings().children("a").removeClass("selected");
if($(this).next("ul").is(":visible")){
$(this).next("ul").hide();
$(this).removeClass("selected");
}
else{
$(this).next("ul").show().parent().siblings().find("ul").hide()
}
})
})
</script>
</head>
<body>
<div class="list">
<ul class="yiji">
<li><a href="#" class="inactive">衬衫</a>
<ul>
<li><a href="#">衬衫1</a></li>
<li><a href="#">衬衫2</a></li>
<li><a href="#">衬衫2</a></li>
</ul>
</li>
<li><a href="#" class="inactive">卫衣</a>
<ul >
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
<li><a href="#">运动卫衣</a></li>
<li><a href="#">童装卫衣</a></li>
</ul>
</li>
<li><a href="#" class="inactive">裤子</a>
<ul >
<li><a href="#">裤子1</a></li>
<li><a href="#">裤子2</a></li>
<li><a href="#">裤子3</a></li>
<li><a href="#">裤子4</a></li>
</ul>
</li>
</ul>
</div>
</body>
-----------------------------------------------------------------------------------------
11、时事体育娱乐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,
li {
margin: 0;
padding: 0;
}
.tab {
width: 240px;
margin: 50px;
}
.tab_menu {
overflow: hidden;
}
.tab_menu li {
float: left;
text-align: center;
cursor: pointer;
list-style: none;
padding: 1px 6px;
margin-right: 4px;
background: #F1F1F1;
border: 1px solid #898989;
border-bottom: none;
}
.tab_menu li.selected {
color: #FFF;
background: #6D84B4;
}
.tab_box {
border: 1px solid #898989;
height: 100px;
font-size: 40px;
}
.hide {
display: none
}
</style>
</head>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
var $div_li = $("div.tab_menu ul li");
$div_li.click(function() {
$(this).addClass("selected")//当前<li>元素高亮
.siblings().removeClass("selected");//去掉其他同辈<li>元素的高亮
var index = $(this).index();//获取当前点击的<li>元素 在其兄弟元素中的索引
$("div.tab_box>div")//选取子节点 不选取子节点的花,会引起错误,如果里面还有div
.eq(index).show()//显示<li>元素对应的<div>元素
.siblings().hide();//隐藏其他几个同辈的<div>元素
})
})
</script>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------
12、隔行变色 多选
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
table{ border:0;border-collapse:collapse;}
td{padding:2px;width:100px;}
th{text-align:left;padding:4px;border-bottom:1px solid #333;}
.odd{background:#FFF38F;} /* 奇数行样式*/
.even{background:#EEEEEE;} /* 偶数行样式*/
.selected{background:#FF6500;color:#fff;} /* 被选中行样式*/
</style>
<script src="jquery-1.12.4.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
//奇数行添加“.odd”样式
$("tbody>tr:even").addClass("odd");
//偶数行添加“.even”样式
$("tbody>tr:odd").addClass("even");
//复选框选中的行添加“.selected”样式
$("tr:contains('王五')").addClass("selected");
$('tbody>tr').click(function(){
if ($(this).hasClass('selected')){
$(this).removeClass('selected').find(':checkbox').prop('checked',false);
}else {
$(this).addClass('selected').find(':checkbox').prop('checked',true);
}
});
})
</script>
</head>
<body>
<table>
<thead>
<tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="choice" value=""/></td>
<td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>
<td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>赵六</td><td>男</td><td>浙江温州</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
</body>
</html>
</body>
</html>
13、隔行变色同上 单选
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
table{ border:0;border-collapse:collapse;}
td{padding:2px;width:100px;}
th{text-align:left;padding:4px;border-bottom:1px solid #333;}
.odd{background:#FFF38F;} /* 奇数行样式*/
.even{background:#EEEEEE;} /* 偶数行样式*/
.selected{background:#FF6500;color:#fff;} /* 被选中行样式*/
</style>
<script src="jquery-1.12.4.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
//输入代码
$("tbody>tr:even").addClass("odd");
$("tbody>tr:odd").addClass("even");
$(":radio:checked").parent().parent().addClass("selected");
$("tbody>tr").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected").find(":radio").prop("checked",false);
}else{
$(this).addClass("selected").find(":radio").prop("checked",true);
$(this).siblings().removeClass("selected")
}
})
})
</script>
<body>
<table>
<thead>
<tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td><input type="radio" name="choice" value=""/></td>
<td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td><input type="radio" name="choice" value="" /></td>
<td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr><td><input type="radio" name="choice" value="" checked='checked' /></td>
<td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr><td><input type="radio" name="choice" value="" /></td>
<td>赵六</td><td>男</td><td>浙江温州</td></tr>
<tr><td><input type="radio" name="choice" value="" /></td>
<td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr><td><input type="radio" name="choice" value="" /></td>
<td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
</body>
</head>
</html>
-----------------------------------------------------------------------------------------
14、爱好的运动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.12.4.js" type="text/javascript">
</script>
<script>
$(function() {
$("#CheckedAll").click(function() {
$(":checkbox").prop("checked", true);
})
$("#CheckedNo").click(function() {
$(":checkbox").prop("checked", false);
})
$("#CheckedRev").click(function() {
//each()方法是实现对jQuery对象中封装的原生对象的遍历
$(":checkbox").each(function() {
//this就代表当前遍历到的那个原生对象
this.checked = !this.checked;
})
})
$("#send").click(function() {
var str = "你选中的是:\n";
$(":checkbox:checked").each(function() {
str = str + $(this).val() + "\n";
})
alert(str);
})
})
</script>
</head>
<body>
<form>
你爱好的运动是?<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>
-----------------------------------------------------------------------------------------
15、添加景点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for指令</title>
<style>
table {
border: 3px solid red;
border-collapse: collapse;
}
td,
th {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<button @click="add">添加景点</button>
<table>
<tr>
<th>序号</th>
<th>省份</th>
<th>城市</th>
<th>旅游景点</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in list" ::key="item.id">
<td>{{item.id}}</td>
<td>{{item.province}}</td>
<td>{{item.city}}</td>
<td>{{item.spot}}</td>
<td><button @click="del(index)">删除</button></td>
</tr>
</table>
</div>
<!--导入vue.js-->
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 创建vue实例
var myVue = new Vue({
el: "#app",
data: {
list: [ {
id: 1,
province: "河南省",
city: "郑州市",
spot: "少林寺"
}, {
id: 2,
province: "河南省",
city: "洛阳市",
spot: "龙门石窟"
}, {
id: 3,
province: "湖北省",
city: "长沙市",
spot: "橘子洲头"
}, {
id: 4,
province: "湖南省",
city: "武汉市",
spot: "黄鹤楼"
} ]
},
methods: {
add() {
var len = this.list.length + 1;
var str = {
id: len,
province: "山东省",
city: "青岛市",
spot: "日照"
};
this.list.push(str);
},
del(x) {
this.list.splice(x, 1);
}
}
})
</script>
</body>
</html>
-----------------------------------------------------------------------------------------
16、简易计算器(vue.js的应用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc" >
<input type="text" v-model="result">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
n1:0,
n2:0,
result:0,
opt:'+'
},
methods:{
calc:function(){
switch(this.opt){
case"+":
this.result=parseInt(this.n1)+parseInt(this.n2);
break;
case"-":
this.result=parseInt(this.n1)-parseInt(this.n2);
break;
case"*":
this.result=parseInt(this.n1)*parseInt(this.n2);
break;
case"/":
this.result=parseInt(this.n1)/parseInt(this.n2);
break;
}
}
}
})
</script>
</body>
</html>
-----------------------------------------------------------------------------------------
17、图片切换((vue.js的应用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例3-图片切换</title>
<style>
#app{
width: 400px;
margin:0 auto;
position: relative;
}
h1{
text-align: center;
}
#app>img{
width: 100%;
height:300px;
/*overflow: hidden; 消除误差*/
display: block; /*消除误差*/
}
a>img{
width: 30px;
height: 50px;
position: absolute;
}
a>.imgl{
left:0;
top:125px;
}
a>.imgr{
right:0;
top:125px;
}
</style>
</head>
<body>
<h1>洛阳牡丹甲天下,花开时节动京城</h1>
<div id="app">
<img :src="imgArr[index]">
<a href="javascript:;" @click="left" v-show="index!=0"><img class="imgl" src="images/left.png"></a>
<a href="javascript:;" @click="right" v-show="index<imgArr.length-1"><img class="imgr" src="images/right.png"></a>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var myVue=new Vue({
el:"#app",
data:{
imgArr:["images/mudan1.jpg",
"images/mudan2.jpg",
"images/mudan3.jpg",
"images/mudan4.jpg",
"images/mudan5.jpg",
"images/mudan6.jpg",
"images/mudan7.jpg",
"images/mudan8.jpg",
"images/mudan9.jpg",
"images/mudan10.jpg"],
index:0,
},
methods:{
left:function(){
this.index--;
},
right:function(){
this.index++;
}
}
})
</script>
</body>
</html>
-----------------------------------------------------------------------------------------
18、迷你记事本 (vue.js的应用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>记事本举例</title>
<style>
body,
h2,
ul,
li {
padding: 0;
margin: 0;
}
body {
margin-top: 50px;
background-color: #eee;
}
#app {
width: 300px;
margin: 20px auto 0 auto;
/*border:1px solid #ccc;*/
background-color: #fff;
border-radius: 5px;
}
h2 {
text-align: center;
margin-bottom: 10px;
color: red;
}
div.write>input {
height: 35px;
width: 290px;
border: none;
border-bottom: 1px solid #ccc;
padding-left: 10px;
font-size: 20px;
font-style: italic;
outline: none;
}
ul {
list-style: none;
background-color: #fff;
padding-left: 10px;
padding-right: 10px;
}
ul>li {
line-height: 38px;
color: #000;
font-size: 20px;
border-bottom: 1px solid #ccc;
position: relative;
}
ul>li>img {
width: 24px;
position: absolute;
right: 0;
top: 9px;
display: none;
cursor: pointer;
}
ul>li:hover>img {
display: block;
}
/* ul>li:last-child{
border: none;
}*/
div.count {
height: 18px;
color: #000;
font-size: 12px;
padding: 8px 10px 0 10px;
position: relative;
}
div.count>span.right {
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<h2>迷你记事本</h2>
<div id="app">
<!-- 写区域 -->
<div class="write">
<input type="text" placeholder="请输入任务......" v-model="inputValue" @keyup.enter="add">
</div>
<!-- 显示区域 -->
<ul>
<li v-for="(item,index) in list"> {{index+1+": "}}{{item}}
<img src="images/delect.png" @click="remove(index)">
</li>
</ul>
<!-- 统计区域 -->
<div class="count">
<span class="left" v-text="list.length+' items'" v-if="list.length"></span>
<span class="right" @click=" clear" v-if="list.length">Clear</span>
</div>
</div>
<script src="vue.js"></script>
<script>
var myVue = new Vue({
el: "#app",
data: {
list: ["学习", "吃饭", "购物"],
inputValue: "",
},
methods: {
add:function(){
this.list.push(this.inputValue);
this.inputValue="";
},
remove:function(x){
this.list.splice(x,1);
},
clear:function(){
this.list=[];
}
}
})
</script>
</body>
</html>
-----------------------------------------------------------------------------------------
19、品牌显示案例(vue.js的应用)宝马奔驰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:600px;
border-collapse: collapse;
margin-top:30px;
}
th,td{
border: 1px solid pink;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div >
<div >
<h3 >添加品牌</h3>
</div>
<div >
<label for="">
序号:
<input type="text" v-model="id">
</label>
<label for="">
名称:
<input type="text" v-model="name" @keyup.insert="add">
</label>
<!-- 在Vue中,使用事件绑定机制,为元素制定处理函数的时候,如果加了小括号,就可以给函数传参数了 -->
<input type="button" value="添加" @click="add">
搜索关键字:<input type="text" v-model="keyWords">
</div>
</div>
<table >
<thead>
<tr>
<td>序号</td>
<td>名称</td>
<td>时间</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<!-- 之前,v-for中的数据都是从 data上的list中直接渲染过来的-->
<!-- 现在,我们定义一个search方法,把关键字通过传参的形式,传递给search方法 -->
<!-- 在search方法内部,通过执行for循环,把所有符合搜索关键字的数据,保存到一个新数组中返回 -->
<tr v-for="item in search(keyWords)" :key="item.id">
<td>{{item.id}}</td>
<!-- 在v-text,v-bind中不能写插值表达式 -->
<td v-text="item.name"></td>
<td>{{item.ctime|dateFormat}}</td>
<td>
<!-- 阻止默认行为 -->
<a href="###" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="libs/vue.js" type="text/javascript"></script>
<script>
// 自定义全局按键修饰符
Vue.config.keyCodes.insert=45;
// 全局的过滤器,进行时间的格式化
Vue.filter('dateFormat',function(dateStr){
// 根据给定的时间字符串,得到特定的时间
// var dt=new Date(dateStr)
var dt=dateStr;
//yyyy-mm-dd
var y=dt.getFullYear();
var m=(dt.getMonth()+1).toString().padStart(2,"0");
var d=dt.getDate().toString().padStart(2,"0");
var hh=dt.getHours().toString().padStart(2,"0");
var mm=dt.getMinutes().toString().padStart(2,"0");
var ss=dt.getSeconds().toString().padStart(2,"0");
return y+'-'+m+'-'+d+' '+hh+':'+mm+':'+ss;
// return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
})
var vm=new Vue({
el:"#app",
data:{
id:'',
name:'',
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()},
{id:3,name:'奥迪',ctime:new Date()},
{id:4,name:'大众',ctime:new Date()}
],
keyWords:""//搜索关键字
},
methods:{
add(){
// 获取到id和name,直接从data上面获取
// 组织一个对象
//把这个对象,调用数组的相关方法,添加到tata的list中
//在Vue中已经实现了数据的双向绑定,当修改data中的数据,Vue会默认监听到数据的改动,自动把最新的数据应用到页面上
//更多的是在进行VM中Model数据的操作,同时在操作Model数据的时候,制定业务逻辑操作
var car={id:this.id,name:this.name,ctime:new Date()};
this.list.push(car)
},
del(id){
// 1.如何根据ID,找到要删除这一项的索引
// 2.找到索引,直接调用数组的splice方法
var _this=this;
// this.list.forEach(function(item,index){
// if(item.id==id){
// _this.list.splice(index,1);
// 不能终止
// }
// })
//
// // this.list.some(function(item,index){
// if(item.id==id){
// _this.list.splice(index,1);
// return true; 可以终止
// }
// })
var index=this.list.findIndex(function(item){
if(item.id==id)
return true;
})
_this.list.splice(index,1);
},
// 根据关键字实现数组的过滤
search(keyWords){
var newList=[];
// this.list.forEach(function(item){
// // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
// // 对于空字符串包含于任何字符串,结果为0
// if(item.name.indexOf(keyWords)!=-1)
// newList.push(item);
// })
// return newList;
// forEach、some、filter、findIndex都是数组的方法,都会对数组进行遍历执行相关操作
newList=this.list.filter(function(item){
if(item.name.includes(keyWords))
return item;
})
return newList;
}
}
});
</script>
</body>
</html>
<!-- 过滤器调用时候的格式 :{{name|nameope(过滤器的名称)}}当在显示name时,先通过nameope处理一下-->