JQuery之应用篇一
上一篇文章中介绍了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" onclick="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，到这里，这小功能基本上就出来了。
浙公网安备 33010602011771号