jquery日历练习

简易日历

html代码如下:

 1 div align="center" id="divAll">
 2 <table id="tab" border="1" cellpadding="0" cellspacing="10">
 3     <tr>
 4         <td date="一月活动<br>这是一月活动"><h2>1</h2>JAN</td>
 5         <td date="二月活动<br>这是二月活动"><h2>2</h2>FER</td>
 6         <td date="三月活动<br>这是三月活动"><h2>3</h2>MAR</td>
 7     </tr>
 8     <tr>
 9         <td date="四月活动<br>这是四月活动"><h2>4</h2>APR</td>
10         <td date="五月活动<br>这是五月活动"><h2>5</h2>MAY</td>
11         <td date="六月活动<br>这是六月活动"><h2>6</h2>JUN</td>
12     </tr>
13     <tr>
14         <td date="七月活动<br>这是七月活动"><h2>7</h2>JUL</td>
15         <td date="八月活动<br>这是八月活动"><h2>8</h2>AUG</td>
16         <td date="九月活动<br>这是九月活动"><h2>9</h2>SEP</td>
17     </tr>
18     <tr>
19         <td date="十月活动<br>这是十月活动"><h2>10</h2>OCT</td>
20         <td date="十一月活动<br>这是十一月活动"><h2>11</h2>NOV</td>
21         <td date="十二月活动<br>这是十二月活动"><h2>12</h2>DEC</td>
22     </tr>
23 </table>
24 <div id="div_on"></div>
25 </div>

CSS样式代码如下：

 1 <style>
 2     *{
 3         padding: 0;
 4         margin: 0;
 5     }
 6     body {
 7         background: #f6f9fc; 
 8         font-family: arial;
 9     }
10     div{
11         
12         background-color: #ccc;
13         width: 50%;
14     }
15     td{
16         background-color: black;
17         color: white;
18     }
19     #tab{
20         margin: 0 auto;
21         width: 30%;
22         text-align: center;
23     }
24     #div_on{
25     width: 30%;
26     height: 50px;
27     background: #D6D6D6;
28     margin: 0 auto;
29     
30 }
31     </style>

JS代码如下：　　

 1 var tdAlls = null,
 2     divDom = null;
 3  $(function(){
 4 //     initDom();
 5     addEvent();
 6 });
 7 //function initDom(){
 8     tdAlls=$('td');      //下面用不到的话这里可以注释掉
 9     divDom=$('div_on');
10 //}
11 function addEvent(){
12     $('td').mouseover(function(){     //这里可以用上面定义的变量名 也可以直接写当前的赋值变量名（$('td'))     
13         $('td').css('color',"white");
14         $(this).css('color',"red");
15         var str=$(this).attr('date');
16         $('#div_on').html(str);
17     }).mouseout(function(){
18         $('td').css('color',"white");
           $(this).css('color',"red");
19     });
20 }

运行结果：

当鼠标移入字体变红，下面div显示当前单元格显示的内容，当鼠标移入另一个单元格，当前单元格变红，原本单元格变回原来颜色