日历练习

总体效果展示：

代码展示：

源代码部分

<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. 听说你还不知道CompletableFuture？

    java8已经在日常开发编码中非常普遍了,掌握运用好它可以在开发中运用几行精简代码就可以完成所需功能.今天将介绍CompletableFuture的在生产环境如何使用实践.CompletableFut ...

  2. 部署Redis Cluster 6.0 集群并开启密码认证 和 Redis-cluster-proxy负载

    部署Redis Cluster集群并开启密码认证 如果只想简单的搭建Redis Cluster,不需要设置密码和公网访问,可以参考官方文档. 节点介绍 Cluster模式推荐最少有6个节点,本次实验搭 ...

  3. 华为云MVP熊保松谈物联网开发:华为云IoT是首选，小熊派是神器

    摘要:在AI.5G的技术驱动下,物联网行业的发展愈加如火如荼,开发者在技术的快速更迭间,也得乘风破浪跟上新技术的节奏. 在AI.5G的技术驱动下,物联网行业的发展愈加如火如荼,开发者在技术的快速更迭间 ...

  4. Mac搭建svn服务器环境

    Mac搭建svn服务器环境 svn是Subversion的简称,是一个开放源代码的版本控制系统, Mac系统自带了svn的服务端和客户端功能, 因此不需要下载第三方软件,就可以支持svn进行版本的管控 ...

  5. 【转】Web端测试点整理

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_24373725/article/d ...

  6. XSS 跨站脚本

    xss常用绕过姿势 大小写绕过 利用语句: http://192.168.1.102/xss/example2.php?name=<sCript>alert("hey!" ...

  7. Python-字符串内容检测

    str.isnumeric():检测字符串是否只由数字组成 str.isalpha():检测字符串是否只由字母组成 str.islower():检测字符串中所有的字母是否都为小写 str.isuppe ...

  8. 删除排序数组中的重复项--leetcode算法题

    题目来自于leetcode 题目描述: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O ...

  9. JavaScript动画实例：动感小球

    已知圆的坐标方程为: X=R*SIN(θ) Y=R*COS(θ)     (0≤θ≤2π) 将0~2π区间等分48段,即设定间隔dig的值为π/24.θ初始值从0开始,按曲线方程求得坐标值(x,y), ...

  10. 【React学习笔记】React生命周期梳理（16.X前后两种）

    React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...