Jquery日历编写小练习
日历练习
总体效果展示：
代码展示：
源代码部分
<body>
<!-- 日历-->
<div class="div_sty">
<table cellpadding="10px" cellspacing="10px" height="200px" class="tab_sty">
<tr>
<td data="一月活动<br>这是一月活动">1Jan</td>
<td data="二月活动<br>这是二月活动">2Fer</td>
<td data="三月活动<br>这是三月活动">3Mar</td>
</tr>
<tr>
<td data="四月活动<br>这是四月活动">4Apr</td>
<td data="五月活动<br>这是五月活动">5May</td>
<td data="六月活动<br>这是六月活动">6Jun</td>
</tr>
<tr>
<td data="七月活动<br>这是七月活动">7Jul</td>
<td data="八月活动<br>这是八月活动">8Auq</td>
<td data="九月活动<br>这是九月活动">9Sep</td>
</tr>
<tr>
<td data="十月活动<br>这是十月活动">10Oct</td>
<td data="十一月活动<br>这是十一月活动">11Nov</td>
<td data="十二月活动<br>这是十二月活动">12Dec</td>
</tr>
</table>
<div id="div_sty1"></div>
</div>
CSS代码：
*{
padding:;
margin:;
}
.div_sty{
background: #ccc;
width: 200px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
text-align: center;
}
.tab_sty td{
color: #FCFCFC;
background: #000000;
}
#div_sty1{
width: 100%;
height: 150px;
float: left;
}
js代码：
var tdDoms = null;
var divDoms = null;
$(function(){
initDom();//初始化变量
addEvent();//添加事件
tianjiaEvent();//添加事件
})
function initDom(){
tdDoms = $("td");//找到td
divDoms = $("#div_sty1");//找到
} function addEvent(){
tdDoms.mouseover(function(){
tdDoms.css("color","white");
$(this).css("color","red");
divDoms.html($(this).attr("data"));
})
}
注：当鼠标移动到相应月份的时候，下面的事件提示紧接发生相对应的变化。
Jquery日历编写小练习的更多相关文章
- 11个实用jQuery日历插件
1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...
- 10个漂亮的jQuery日历插件下载【转载】
10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件 日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...
- 前端学习02：jQuery 日历
引言:学习前端已经接近1个月了,先后经历了1周的 html+css, 2周的"JavaScript 从入门到下跪",期间还看了vue+webpack.然鹅,Mentor Brigh ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- 用jquery实现抽奖小程序
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
- Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表
Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表 一个个人觉得比较简单小巧的软件. 下面就如何编写如何发布打包来介绍一下吧! 先下载mysql的库文件链接:http://files. ...
- 9款精致HTML5/jQuery日历时钟控件源码下载（源码请见百度云） 链接：http://pan.baidu.com/s/1geIXe75 密码：7m4a
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
- 25个有用的jQuery日历和日期选取插件
jQuery被认为是最好的JavaScript库,因为它简单易用.灵活,并有大量的插件.本文介绍25个非常不错的jQuery日历和日期选取插件,希望对各位有用. 1. Simple JQuery Da ...
- jquery日历datepicker的使用方法
jquery.ui.datepicker.js 用法: http://blog.csdn.net/zb0567/article/details/7906238 原文 http://blog.cs ...
随机推荐
- 一个比CBitmap更优秀的类 -- CImage类
Visual C++的CBitmap类的功能是比较弱的,它只能显示出在资源中的图标.位图.光标以及图元文件的内容,而不像VB中的Image控件可以显示出绝大多数的外部图像文件(BMP.GIF.JPEG ...
- 函数进化到Lambda表达式的三过程
假如我们想要从一个整型数组中取出其中是奇数的选项,其实现方式有很多, 接下来通过三种方法的对比理解Lambda表达式的用途,需要了解的朋友可以参考下 //声明委托类型 public d ...
- div嵌套引起的内层margin-top对外层div起作用
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
- 【Xamarin.Forms 1】App的创建与运行
引言 本篇文章将从介绍Xamarin.Forms创建开始. 开发环境 Visual Studio 2019 16.6.2 Xamarin.Forms 4.6.0.726 Android 5.0 (AP ...
- 浅谈并查集&种类并查集&带权并查集
并查集&种类并查集&带权并查集 前言: 因为是学习记录,所以知识讲解+例题推荐+练习题解都是放在一起的qvq 目录 并查集基础知识 并查集基础题目 种类并查集知识 种类并查集题目 并查 ...
- 第一章 java基本多线程技能
第一章 java多线程技能 1 线程:进程是操作系统结构的基础,是一次程序的执行,是一个程序及其数据在处理顺序时发生的活动:是程序在一个数据集合上运行的过程,他是系统进行资源分配和调度的一个独立单位. ...
- 阿里云Linux CentOS8.1 64位服务器安装LNMP(Linux+Nginx+MySQL+PHP) 并发调试之Nginx配置
搭建好LNMP环境之后,接着要考虑的就是整个系统的并发能力了. 一.Nginx的配置 Nginx有很好的并发能力.但是要想使它的并发能力能够施展出来,需要在初步安装好的Nginx上做一些配置.主要需要 ...
- HashMap等集合初始化时应制定初始化大小
阿里巴巴开发规范中,推荐用户在初始化HashMap时,应指定集合初始值大小. 一.原因 这个不用多想,肯定是效率问题,那为什么会造成效率问题呢? 当我们new一个HashMap没有对其容量进行初始化的 ...
- Js 利用正则 在字符串中提取数字、替换非数字字符为指定字符串
var s ="总金额4500元"; var num= s.replace(/[^-]/ig,""); alert(num);// 上述示例会把数字匹配到直接转 ...
- about 蛤蛤
蛤蛤属于蛤蛤门(haha),蛤蛤纲(haha),蛤蛤亚纲(haha),蛤蛤目(haha),蛤蛤总科(haha),蛤蛤科(haha).