Jquery | 基础 | 项目实践
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta charset="utf-8">
<title> 数据管理 </title>
<script type="text/javascript" src="jquery-1.8.2.min.js"> </script>
<style type="text/css">
body {
font-size: 12px
} table {
width: 360px;
border-collapse: collapse
} table tr th,
td {
border: solid 1px #666;
text-align: center
} table tr td img {
border: solid 1px #ccc;
padding: 3px;
width: 42px;
height: 60px;
cursor: hand
} table tr td span {
float: left;
padding-left: 12px;
} table tr th {
background-color: #ccc;
height: 32px
} .clsImg {
position: absolute;
border: solid 1px #ccc;
padding: 3px;
width: 85px;
height: 120px;
background-color: #eee;
display: none
}
.clsSpan {
position: absolute;
border: solid 1px #ccc;
padding: 3px;
width: 80px; background-color: rgba(93, 184, 146, 0.884);
display: none
} .btn {
border: #666 1px solid;
padding: 2px;
width: 50px;
filter: progid:DXImageTransform.Microsoft .Gradient(GradientType=0, StartColorStr=#ffffff,
EndColorStr=#ECE9D8);
}
</style>
<script type="text/javascript">
$(function () {
$("table tr:nth-child(odd)")
.css("background-color", "#eee"); // 隔行变色
/** 全选复选框单击事件 **/
$("#chkAll").click(function () {
if (this.checked) {// 如果自己被选中
$("table tr td input[type=checkbox]")
.attr("checked", true);
}
else {// 如果自己没有被选中
$("table tr td input[type=checkbox]")
.attr("checked", false);
}
})
/** 删除按钮单击事件 **/
$("#btnDel").click(function () {
var intL = $("table tr td input:checked:not('#chkAll')").length;
// 获取除全选复选框外的所有选中项
if (intL != 0) {// 如果有选中项
$("table tr td input[type=checkbox]:not('#chkAll')")
.each(function (index) {// 遍历除全选复选框外的行
if (this.checked) {// 如果选中
$("table tr[id=" + this.value + "]").remove();
// 获取选中的值，并删除该值所在的行
}
})
}
})
/** 小图片鼠标移动事件 **/
var x = 5; var y = 15;// 初始化提示图片位置
$("table tr td img").mousemove(function (e) {
$("#imgTip")
.attr("src", this.src)// 设置提示图片 scr 属性
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
})// 设置提示图片的位置
.show(30);// 显示图片
})
/** 小图片鼠标移出事件 **/
$("table tr td img").mouseout(function () {
$("#imgTip").hide();// 隐藏图片
})
// 文本值
$("table tr td div").mousemove(function (e) {
$("#spanTip")
.text($(this).text())
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
})// 设置提示图片的位置
.show(30);// 显示图片
})
/** 文本鼠标移出事件 **/
$("table tr td div").mouseout(function () {
$("#spanTip").hide();// 隐藏图片
})
})
</script>
</head> <body>
<table>
<tr>
<th> 选项 </th>
<th> 编号 </th>
<th> 封面 </th>
<th> 购书人 </th>
<th> 性别 </th>
<th> 购书价 </th>
<th>书名</th>
</tr>
<tr id="0">
<td><input id="Checkbox1" type="checkbox" value="0" /></td>
<td>1001</td>
<td><img src="Images/img03.jpg" alt="" /></td>
<td> 李小明 </td>
<td> 男 </td>
<td>35.60 元 </td>
<td><div>ASP.NET</div> </td>
</tr>
<tr id="1">
<td><input id="Checkbox2" type="checkbox" value="1" /></td>
<td>1002</td>
<td><img src="Images/img04.jpg" alt="" /></td>
<td> 刘明明 </td>
<td> 女 </td>
<td>37.80 元 </td>
<td><div>C#网站开发</div> </td>
</tr>
<tr id="2">
<td><input id="Checkbox3" type="checkbox" value="2" /></td>
<td>1003</td>
<td><img src="Images/img08.jpg" alt="" /></td>
<td> 张小星 </td>
<td> 女 </td>
<td>45.60 元 </td>
<td> <div>ASP</div> </td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px">
<span><input id="chkAll" type="checkbox" /> 全选 </span>
<span><input id="btnDel" type="button" value=" 删除 " class="btn" /></span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="Images/img03.gif" />
<div id="spanTip" class="clsSpan" style="font-size:20px;"></div> </body> </html>
Jquery | 基础 | 项目实践的更多相关文章
- 《Spring Boot 入门及前后端分离项目实践》系列介绍
课程计划 课程地址点这里 本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- Hangfire项目实践分享
Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...
- jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
- Hangfire项目实践
Hangfire项目实践分享 Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget ...
- MVC项目实践,在三层架构下实现SportsStore-05,实现导航
SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...
- MVC项目实践,在三层架构下实现SportsStore-06,实现购物车
SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...
- Spring cloud项目实践(一)
链接地址:http://sail-y.github.io/2016/03/21/Spring-cloud%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/ 什么是Spring ...
随机推荐
- SpringBoot-(2)-Web的json接口,静态网页,动态页面
一, 了解注解@Controller和@RestController @Controller:处理Http请求 @RestController:Spring4以后新增注解,相当于@Controller ...
- KeyChain相关参数的说明
#pragma mark- 密钥类型 //密钥类型键 //CFTypeRef kSecClass // //值 //CFTypeRef kSecClassGenericPassword ...
- windows定时计划备份MySql
使用 MySql 的 mysqldump 将数据库文件备份成 sql 文件. Windows下备份 本地的数据库环境 MySql 安装环境:C:\MySql 数据库名称:bbs root root 数 ...
- Android源码的编译和下载【转】
本文转载自:http://blog.csdn.net/banketree/article/details/9089827 网上介绍下载.编译Android方法一坨,读万卷书不如行万里路,以下是笔者亲身 ...
- docker中Ubuntu安装jdk1.8
1.在宿主系统下载所需要的jdk版本的gz文件 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133 ...
- Android Studio 生成APK出现的「前言不允许有内容」错误
Build-Generate Signed APK的时候发现提示「前言不允许有内容」.发现提示的是Android.mk.xxxjni.c存在问题. 解决方法是,把/main/res中的,包括/jni目 ...
- 记录ubuntu16.04版本安装过程中遇到的问题
记录ubuntu16.04版本安装和使用过程中遇到的些问题,方便以后查看,主要内容有: 1. ubuntu源替换 2. windows与vmware ubuntu文件夹共享 3. putty连接ubu ...
- su 和sudo 命令
一. 使用 su 命令临时切换用户身份 1.su 的适用条件和威力 su命令就是切换用户的工具,怎么理解呢?比如我们以普通用户beinan登录的,但要添加用户任务,执行useradd ,beinan用 ...
- 12306.cn网站自动登录器源代码
去年过年放假的时候写了一个12306.cn网站的自动登录器,刚好那时候放假了,所以没把源代码放出来,现在将代码发出来,由于编写得比较仓促(从放假的下午19:00左右到晚上到00:00左右),很多细节问 ...
- HDU1711(KMP入门题)
Number Sequence Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...