【练习】jQuery
作业要求：
参考下图，点击展示不同内容。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
} .header{
background-color: whitesmoke;
width: 100%;
height: 50px;
border-bottom: 2px solid red;
position: relative;
} .action {
height: 50px;
color: #696969;
font-size: 22px;
font-weight: 200;
line-height: 50px;
padding: 1px 30px 1px 30px;
}
.shopping_car a{
text-decoration: none;
height: 50px;
color: white;
font-size: 13px;
font-weight: 200;
padding: 0px 15px 0 15px;
background-color: #ee0f23;
line-height: 50px;
position: absolute;
left:1500px;
top:0px;
} .img_cont img{
margin-top: 52px; } .a1 {
position: absolute;
left:0;
top:0;
} .a2{
position: absolute;
left:150px;
top:0;
} .a3{
position: absolute;
left:300px;
top:0;
} .a4{
position: absolute;
left:450px;
top:0;
} .a5{
position: absolute;
left:680px;
top:0;
} .hide{
display: none;
} .change {
background-color: #ee0f23;
color: #F5F5F5;
} </style>
</head>
<body>
<script src="jquery-3.2.1.min.js"></script> <div class="header">
<div class="item">
<div class="action a1">商品介绍</div>
<div class="img_cont hide">
<img src="商品介绍.jpg" alt="">
</div>
</div> <div class="item">
<div class="action a2">规格与包装</div>
<div class="img_cont hide">
<img src="规格包装.jpg" alt="">
</div>
</div> <div class="item">
<div class="action a3">售后保障</div>
<div class="img_cont hide">
<img src="售后保障.jpg" alt="">
</div>
</div> <div class="item">
<div class="action a4">商品评价(3.8万+)</div>
<div class="img_cont hide">
<img src="商品评价.jpg" alt="">
</div>
</div> <div class="item">
<div class="action a5">社区互动</div>
<div class="img_cont hide">
<img src="社区互动.jpg" alt="">
</div>
</div> <span class="shopping_car">
<a href="">加入购物车</a>
</span>
</div> <script>
$(".action ").click(function () {
$(this).addClass("change");
$(this).next().removeClass("hide");
$(this).parent().siblings().children(".action").removeClass("change");
$(this).parent().siblings().children(".img_cont").addClass("hide"); }) </script> </body>
</html>
案例
作业要求：
表格的编辑，添加和删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/bootstrap.css"> <style>
*{
margin:0;
} .shade1{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: gray;
opacity: 0.6;
} .model1{
position: fixed;
left:300px;
top:100px;
width: 600px;
height: 300px;
background-color: white;
} .hide1{
display: none;
}
</style>
</head>
<body> <button class="btn-primary btn-lg">添加</button> <div class="container">
<div class="row">
<div class="col-md-10"> <table class="table table-bordered table-hover">
<thead>
<tr class="info">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead> <tbody id="bb1">
<tr>
<td>Tom</td>
<td>18</td>
<td>男</td>
<td>101</td>
<td><button class="btn-danger">删除</button> <button class="btn-success">编辑</button></td>
</tr> <tr>
<td>Jack</td>
<td>19</td>
<td>男</td>
<td>102</td>
<td><button class="btn-danger">删除</button> <button class="btn-success">编辑</button></td> </tr> <tr>
<td>Jerry</td>
<td>20</td>
<td>女</td>
<td>103</td>
<td><button class="btn-danger">删除</button> <button class="btn-success">编辑</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div> <div class="shade1 hide1"></div>
<div class="model1 hide1">
<h3 class="text-center">添加学生信息</h3> <form action="" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">姓名</label>
<div class="col-sm-6">
<input class="col-sm-2 form-control item" type="text" >
</div>
</div> <div class="form-group">
<label class="col-sm-3 control-label">年龄</label>
<div class="col-sm-6">
<input class="col-sm-2 form-control item" type="text" >
</div>
</div> <div class="form-group">
<label class="col-sm-3 control-label">性别</label>
<div class="col-sm-6">
<input class="col-sm-2 form-control item" type="text" >
</div>
</div> <div class="form-group">
<label class="col-sm-3 control-label">班级</label>
<div class="col-sm-6">
<input class="col-sm-2 form-control item" type="text" >
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" class="btn btn-default" id="subBtn" value="submit">
</div>
</div>
</form>
</div> <script src="jquery-3.1.1.js"></script> <script> // 删除及委派
$("#bb1").on("click",".btn-danger",function(){
$(this).parent().parent().remove()
}) //添加
$(".btn-primary").click(function(){
$(".shade1").show();
$(".model1").show();
}) $("#subBtn").click(function(){
// 关闭对话框
$(".shade1").hide();
$(".model1").hide(); // 获取用户输入值
var arr=[]; $(".item").each(function(){
arr.push($(this).val()); }); // 构建tr标签
var s='<tr><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td><td>'+arr[3]+'</td><td><button ' +
'class="btn-danger">删除</button> <button class="btn-success">编辑</button></td></tr>' $("#bb1").append(s) }) // 编辑及委派
// $("#bb1").on("click",".btn-success",function(){
// $(this).
// })
</script> </body>
</html>
例如
【练习】jQuery的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- 浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
随机推荐
- day7、用户登陆出现-bash-4.1$错误的原因
有时候在使用用户登陆Linux系统时会出现-bash-4.1$错误,不显示用户名,路径信息. 原因:用户家目录里面与环境变量有关的文件被删除所导致的 .bash_profile .bashrc 这两个 ...
- 我的第一个python web开发框架（18）——前台页面与接口整合
由于我们前后台系统没有分开,所以前台页面调用接口时,可以直接使用后台管理系统已经完成的接口,不过后台管理系统接口的访问加上了登录验证,所以需要将前台要用到的接口进行处理,让它们设置到白名单当中 我们打 ...
- JavaWeb核心技术学习 - 1.从JDBC说起
作者:java1to3链接:http://www.cnblogs.com/java1to3/著作权归作者所有.未经作者本人同意,禁止一切转载.商业或非商业转载请联系作者获得授权并请注明出处. ・JDB ...
- JAVA入门[16]-form表单，上传文件
一.如何传递参数 使用 @RequestParam 可以传递查询参数.例如:http://localhost:8092/category/detail?id=1 @RequestMapping(&qu ...
- 浅析node.js
大家好,今天来给大家讨论node.js这个东西,说起这个东西啊,可能大家已经很熟悉了,因为现在市场上运用的越来越广泛,毕竟它的优点还是有目共睹的! 那么,什么是node.js呢?官方给出了这样的定义: ...
- 对jbox2d引擎的一些回顾与思考(swing实现demo)
JBox2d回顾与思考 jbox2d 是 box2d 的java移植,感觉国内网络上针对jbox2d的教程还比较少(通常是box2d).回顾一下这几天的学习历程顺便写下博主的所思所想. swing实现 ...
- 自学Zabbix3.9.2-模板Templates-linking/unlinking
自学Zabbix3.9.2-模板Templates-linking/unlinking HOST链接模板之后,便继承了模板里定义的item,trigger等等,使用这个方法,配置zabbix监控会减少 ...
- JPA 单向一对多关联关系
映射单向一对多的关联关系 1.首先在一的一端加入多的一端的实体类集合 2.使用@OneToMany 来映射一对多的关联关系3.使用@JoinColumn 来映射外键列的名称4.可以使用@OneToMa ...
- cell的复用机制
以下全部都是转载自别人的博客:http://blog.sina.com.cn/s/blog_9c3c519b01016aqu.html 转自:http://www.2cto.com/kf/201207 ...
- 挑战App Store，微信通过“跳一跳”秀了一下“小程序”的肌肉
2017年即将结束的时候,微信放了一个大招.随着最新的微信v6.6.1版本更新,基于小程序的"小游戏"板块正式上线.微信上首发的这款"小游戏"叫"跳一 ...