【练习】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 ...
随机推荐
- 如何用shell脚本取出服务器图片
一 ,SHELL 是什么 (1)shell是一种命令行解释器. (2)是用户和Linux内核之间沟通的桥梁,属于中间件.见下图 (3)交互流程:shell接受用户输入的指令 =>将指令传达给Li ...
- Android Service组件在新进程绑定(bindService)过程
1.首先看两个样例 (1)进程内 Client端 public class CounterService extends Service implements ICounterService { .. ...
- Oracle查看对象空间使用情况show_space
tom大神写了一个用于查看Oracle数据库对象空间使用情况. 以下演示一下怎样使用: –工具源代码 CREATE OR REPLACE PROCEDURE show_space(p_segname ...
- Python 项目实践一（外星人入侵）第二篇
接着上次的继续学习. 一 创建一个设置类 每次给游戏添加新功能时,通常也将引入一些新设置.下面来编写一个名为settings的模块,其中包含一个名为Settings的类,用于将所有设置存储在一个地方, ...
- 深入理解javascript函数进阶系列第四篇——惰性函数
前面的话 惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了.本文将详细介绍惰性 ...
- SourceTree 基本介绍
Git的服务器端: 最出名的是GitHub,但是不能创建私有仓库,创建私有得需要Money Bitbucket:可以创建私有数据库,但是速度太慢,太消磨激情了 如果既想创建私有又想要激情,那只能自己搭 ...
- MyBatis_多查询条件问题
一.多查询条件无法整体接收问题的解决 在实际工作中,表单中所给出的查询条件有时是无法将其封装成一个对象,即查询方法只能携带多个参数,而不能携带将这多个参数进行封装的一个对象.对于这个问题,有两种解决方 ...
- immutable.js 更新数组（mergeDeepWith）
使用情境: 技术栈为:react + redux + antd (reducer中处理数据使用了immutable.js). 问题:如下图,做一个搜索功能,form表单每改变一次,都会调用一个upda ...
- Subscription wildcards(MQTT)
想查看英文原文的请点击原文网址.本文是paho中讲述订阅通配符的.还是那句话,水平有限,如有翻译不当之处,欢迎指正. 订阅通配符 MQTT信息包含一个主题来进行区分.MQTT服务器使用主题来确定哪 ...
- linux系统下安装单台Redis
注意:搭建redis前一定要安装gcc redis安装方式一 1.安装gcc命令:yum install -y gcc #安装gcc [root@localhost src]# yum install ...