您现在的位置:首页 >> 前端 >> 内容

jq实现简易日历等案例的思路分析

时间:2018/3/23 11:07:42 点击:

  核心提示:一、选项卡1、先给需要的所有的按钮添加一个事件2、获取当前按钮的index,使用var idx = $(this).index();3、给当前的按钮添加一个class类,而其余的兄弟节点去除class...

一、选项卡 

1、先给需要的所有的按钮添加一个事件 

2、获取当前按钮的index,使用var idx = $(this).index(); 

3、给当前的按钮添加一个class类,而其余的兄弟节点去除class类$(this).addClass('active').siblings().removeClass('active'); 

4、把与index对应的p显示出来$('#p2>p').eq(idx).show().siblings().hide();

二、简易日历 

1、先给需要的所有的按钮添加一个事件$('#table>ul>li').mouseenter 

2、获取当前按钮的index,使用var idx = $(this).index(); 

3、给当前的点击的添加css,使背景颜色为蓝色,其他的把css设置成白色$(this).css(‘backgroundColor’,’blue’).siblings().css(‘backgroundColor’,’white’);` 

4、把之前用字符串连接的部分放到html()方法中

$('#p1').html('<h2>'+(idx+1)+'月</h2><p>'+oText[idx] +'</p>');

三、全选全不选反选 

1、给不同的按钮添加事件$('button').eq(0).click,使用eq()方法和下标来实现 

2、使用prop()方法来设置布尔值的属性 

3、对于全选$('#check1 input').prop('checked',true); 

全不选$('#check1 input').prop('checked',false); 

4、对于反选,其中有一个:checked 

四、轮播 

1、其中不用设置一个很长的ul,而是把所有的图片都固定到一个位置,最开始只有第一张是block,其余的都是none,然后使用jq让其淡入淡出 

2、给右箭头添加点击事件,使用一个变量count来记录点击的次数,当count的值等于图片个数,即li的length时,让count=0;让每一个对应count的li淡入出来,其余的淡出。 

3、对于左箭头,需要判断的是当count=-1的时候,让count变为里li.length-1;

Tags:JQ Q实 实现 现简 
作者:网络 来源:温良的博客