【练习】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 ...
随机推荐
- Session与Cookie的概念原理
前言: 本文没有任何代码,内容全部都是概念与运行原理,在使用一个技术前一定要弄清他的本质,下面会讲Session.Cookie.ServletContext的概念与他们的联系区别 Session概念 ...
- 》》3D轮播
* { margin: 0; padding: 0; } .slide { position: absolute; top: calc(50% - 150px); left: calc(50% - 3 ...
- 为PHP摇旗呐喊！
如今市场上的电子商务软件基本上可归结为两大阵营.即PHP阵营和Java阵营.但对接触电子商务不久的用户来说.看到的往往仅仅是它们的表相,仅仅是明显的价格差异.却非常难看出它们之间的实际差异.事实上,P ...
- 在应用中更新App版本号
在应用中, 为了提高用户体验, 会提供更新版本号的功能. 那么怎样实现呢? 我写了一个简单的Demo, 说明一下, 须要注意几个细节. 使用了Retrofit和Rx处理网络请求. Github下载地址 ...
- Android TCP/IP 扫盲教程
TCP/IP 是因特网的通信协议. 通信协议是对计算机必须遵守的规则的描写叙述.仅仅有遵守这些规则.计算机之间才干进行通信. 浏览器和server都在使用 TCP/IP 因特网浏览器和因特网serve ...
- url_for()中的坑,url_for操作对象是函数，而不是route里的路径
url_for操作对象是函数,而不是route里的路径. url_for操作对象是函数,而不是route里的路径. url_for操作对象是函数,而不是route里的路径.
- SpringMVC+ZTree实现树形菜单权限配置
计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform 欢迎sta ...
- 微信小程序使用场景延伸：扫码登录、扫码支付
微信小程序使用场景延伸:扫码登录.扫码支付 小程序最适合的使用场景有哪些?相比大家能列举出来很多,但这个场景,大家可能多数没想到_^ 笔者团队近期接到了一个PC项目:转转游戏租号PC官网,该项目要求在 ...
- TCP/IP----基本知识
就以这篇文章为起点,开始自己的学习计算机网络之路.这些仅是我个人之言,如有差错,希望读者能够逐一指出,在下不胜感激. 首先,我们需要知道一些关于网络的基本知识. 网络中的关系大多为拓扑结构.那么,何为 ...
- HTML基础教程-段落
HTML 段落 段落是通过 <p> 标签定义的. <p>This is a paragraph</p> <p>This is another parag ...