上一篇文章中介绍了JQuery的一些简单语句（JQuery小集合），今天打算通过项目中的一个小功能讲一讲如何应用，希望能达到抛砖引玉的效果，呵呵
先讲讲这个小功能要实现什么吧,见下图：如图所见，选择起始、结束时间后，根据对比方式的选项，自动填充比较时段里面的Checkbox内容 图中4个内容对应的Id分别是begin、end、datedepart、db_b1(为加载Checkbox的div的Id，Checkbox的name为timespan). 首先，肯定要先得到时间段，我们用JQuery的ID选择器来获取： var begin = new Date($('#begin').val().replace('-', '/').replace('-', '/')); var end = new Date($('#end').val().replace('-', '/').replace('-', '/')); 由于JavaScript中时间的格式是2012/04/17的，所以我们这里还用了字符串的替换，将-替换成了/，使它能顺利转换成时间对象。便于接下来我们的分解。将该时间段分解成 年、月、周、日 四部分，便于我们获取： var beginYear = begin.getFullYear(); var beginMonth = begin.getMonth()+1; var beginWeek = getYearWeek(begin); var beginDay = begin.getDate()； var endYear = end.getFullYear(); var endMonth = end.getMonth()+1; var endWeek = getYearWeek(end); var endDay = end.getDate(); getFullYear、getMonth、getDate分别是JavaScript中时间自带的函数，用于获取年月日；JavaScript中没有获取周的函数，所以我们自定义了一个获取周的函数getYearWeek，用于获取指定日期在一年当中所在的周数，函数体如下： var getYearWeek = function (date) { /* date1是当前日期 date2是当年第一天 d是当前日期是今年第多少天 用d + 当前年的第一天的周差距的和在除以7就是本年第几周 */ var date1 = new Date(date), date2 = new Date(new Date(date).getFullYear(), 0, 1), d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000); return Math.ceil( ( d + ( (date2.getDay() + 1) - 1) ) / 7 ); }; 时间分解完毕后，接下来就要获取下拉框选中的值了，同样的，我们也用ID选择器来获取： var SelectValue = $("#datedepart").val(); 所有这些数据准备好后，就可以开始填充Checkbox了,下面直接贴代码，我在代码中注释说明： switch (CheckValue) { case "yy": //定义要插入的html对象 var html = ""; for (; beginYear <= endYear; beginYear++) { //为Checkbox的赋值 var value = beginYear + "年"; //GetValue为自定义函数，返回构建好的html语句 html += GetValue(value); } //将html语句插入到比较时间段的div里面 $('#db_b1').html(html); break; case "mm": var html = ""; for (; beginYear <= endYear; beginYear++) { //如果beginYear不等于endYear那么beginYear有12个月，等于时就只能小于等于endMonth，周跟日的判断原理跟这相同。 if (beginYear != endYear) { for (; beginMonth <= 12; beginMonth++) { var value = beginYear + "年" + beginMonth + "月"; html += GetValue(value); } } else { for (; beginMonth <= endMonth; beginMonth++) { var value = beginYear + "年" + beginMonth + "月"; html += Getvalue(value); } } beginMonth = 1; } $('#db_b1').html(html); break; case "ww": var html = ""; for (; beginYear <= endYear; beginYear++) { if (beginYear != endYear) { for (; beginWeek <= getYearWeek(new Date(beginYear, 12, 0)); beginWeek++) { var value = beginYear + "年" + beginWeek + "周"; html += GetValue(value); } } else { for (; beginWeek <= endWeek; beginWeek++) { var value = beginYear + "年" + beginWeek + "周"; html += GetValue(value); } } beginWeek = 1; } $('#db_b1').html(html); break; case "dy": var html = ""; for (; beginYear <= endYear; beginYear++) { if (beginYear != endYear) { for (; beginMonth <= 12; beginMonth++) { for (; beginDay <= new Date(beginYear, beginMonth, 0).getDate(); beginDay++) { var value = beginYear + "年" + beginMonth + "月" + beginDay + "日"; html += GetValue(value); } beginDay = 1; } } else { for (; beginMonth <= endMonth; beginMonth++) { if (beginMonth != endMonth) { for (; beginDay <= new Date(beginYear, beginMonth, 0).getDate(); beginDay++) { var value = beginYear + "年" + beginMonth + "月" + beginDay + "日"; html += GetValue(value); } } else { for (; beginDay <= endDay; beginDay++) { var value = beginYear + "年" + beginMonth + "月" + beginDay + "日"; html += GetValue(value); } } beginDay = 1; } } beginMonth = 1; } $('#db_b1').html(html); break; } } //自定义函数，返回组建的html语句 function GetValue(value) { return '<li><input name="timespan" id="timespan" οnclick="eachClick(\'timespan\',\'AllTimeSpan\')" type="checkbox" value="' + value + '" /> ' + value + '</li>'; } 这里还有个全选的效果，每一个选项都选上，所有自动选上，随便去掉一项，所有自动取消选中，代码如下: //全选的Checkbox的Onclick事件 function OnOrCancel(CheckAllId,CheckBoxId) { var flag = $("#" + CheckAllId + "").attr("checked"); //判断全选按钮的状态 $("input:checkbox[name=" + CheckBoxId + "]").each(function () { $(this).attr("checked", flag);//选中或者取消选中 }); } //每一个CheckBox的OnClick事件 function eachClick(CheckboxId, CheckAllId) { //判断选中的个数和总个数是否相等 if ($("[name='" + CheckboxId + "']:checked").length == $("[name='" + CheckboxId + "']").length) { $("#" + CheckAllId + "").attr("checked", "checked"); } else $("#"+CheckAllId+"").removeAttr("checked"); } OK，到这里，这小功能基本上就出来了。
转载于:https://www.cnblogs.com/shimin/archive/2012/05/20/2509351.html
相关资源：jQuery pjax 应用简单示例