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显示当前单元格显示的内容，当鼠标移入另一个单元格，当前单元格变红，原本单元格变回原来颜色
