日历练习

总体效果展示：

代码展示：

源代码部分

<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日历编写小练习的更多相关文章

  1. 11个实用jQuery日历插件

    1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...

  2. 10个漂亮的jQuery日历插件下载【转载】

    10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件   日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...

  3. 前端学习02：jQuery 日历

    引言:学习前端已经接近1个月了,先后经历了1周的 html+css, 2周的"JavaScript 从入门到下跪",期间还看了vue+webpack.然鹅,Mentor Brigh ...

  4. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  5. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  6. Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表

    Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表 一个个人觉得比较简单小巧的软件. 下面就如何编写如何发布打包来介绍一下吧! 先下载mysql的库文件链接:http://files. ...

  7. 9款精致HTML5/jQuery日历时钟控件源码下载（源码请见百度云） 链接：http://pan.baidu.com/s/1geIXe75 密码：7m4a

    现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...

  8. 25个有用的jQuery日历和日期选取插件

    jQuery被认为是最好的JavaScript库,因为它简单易用.灵活,并有大量的插件.本文介绍25个非常不错的jQuery日历和日期选取插件,希望对各位有用. 1. Simple JQuery Da ...

  9. jquery日历datepicker的使用方法

    jquery.ui.datepicker.js 用法: http://blog.csdn.net/zb0567/article/details/7906238   原文  http://blog.cs ...

随机推荐

  1. ajax前后端交互原理（5）

    5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用 数据交互,可以从服务器获取 ...

  2. Python之浅谈继承

    目录 继承 继承介绍 如何使用继承 新式类:只要继承了object类,就是新式类,再python3中,默认继承object类 经典类:没有继承object的类,就是经典类 利用继承减少代码冗余,菱形问 ...

  3. CountDownLatch和CyclicBarrier 傻傻的分不清？超长精美图文又来了

    你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it well enough ...

  4. Data types 'int' and 'float'

    The type int means that the variables listed are integers; by contrast with float, which means float ...

  5. VS2017配置PCL1.9.1 for win10

    安装链接 https://www.jianshu.com/p/463f54c91ab7 1.9.1 安装包下载 官网路径: https://github.com/PointCloudLibrary/p ...

  6. composer更新命令及常用命令

    原文地址:https://www.wjcms.net/archives/composer更新命令及常用命令 composer作为php的包依赖管理工具,开发者将开发的工具包上传,然后使用者能很方便的使 ...

  7. SpringMVC+Spring+Hibernate个人家庭财务管理系统

    项目描述 Hi,大家好,今天分享的项目是<个人家庭财务管理系统>,本系统是针对个人家庭内部的财务管理而开发的,大体功能模块如下: 系统管理模块 验证用户登录功能:该功能主要是验证用户登录时 ...

  8. H3c实验室-(OSPF,Nat,STP,Dhcp,Acl)v.1)

    实验声明 本实验纯属学习记录性质,如有错误,请大哥帮忙提出,马上改正谢谢~还有学习H3c心态要好,他有超级多的bug!!!! 实验介绍 实验条件 实验开始 把图设计好 先说明一下RTA-RTB的线路是 ...

  9. [JAVA]使用字节流拷贝文件

    import java.io.*; /** * @Description: * @projectName:JavaTest * @see:PACKAGE_NAME * @author:郑晓龙 * @c ...

  10. day11总结

    """1.什么是函数 具备某一功能的工具===>函数 事先准备工具的过程===>函数的定义 遇到应用场景拿来就用=>函数的调用 2.为何要有函数 内置函 ...