【笔记】老程序员从头开始学JQuery的读书笔记02

　　今天是哥们我学习JQuery的第二天，昨天发了篇《老程序员从头开始学JQuery的读书笔记》，引来了一些朋友的围观。我想许多年轻的朋友，是因为想看看老程序员是什么样的，所以才进来想看个究竟，而不是我博客内容的本身会对其有什么帮助。也有些朋友帮我推荐了一些不错的教程，在此表示感谢。

 

1.一点题外话

 

　　昨天有个朋友留言说“写了十多年了，还写代码？”，是的，我还在写，而且应该会一直写下去。可能写程序对于许多人只是一种工作形式，但对我来说可能早已成了一种生活方式，我无法想像没有代码可写的日子。虽然在公司已经不进行具体的代码编写工作，但是如果没有扎实的代码基础，不了解团队成员常用的技术，那么所设计出的方案可能会成为整个项目的噩梦。顺便做个广告：我和同事正在开发的是“EasyCode.Net代码生成器”升级版本，虽然是一款收费软件，但仍得到了许多朋友的支持，内心真的非常激动与感激。有兴趣的朋友也可以试用一下，有什么想法和意见可以直接和我QQ或电话联系。

 

　　言归正传，今天并没有阅读教程中新的内容，而是对着教程将案例重新来了遍。炒剩饭的感觉固然不好，不过剩饭都懒的炒，想必也很难直接将生米煮成熟饭。于是乎花了近一个小时重做书中案例，及4个自己想到的应用场景，因为从没有学习过JQuery，所以觉得还是有一些收获的。写将开来，希望对一些朋友能有所帮助。

 

2.第一个演示

 

　　个人认为JQuery中的选择器功能是十分强大的，应该熟练掌握，所以动手做了4个演示，以强化对这方面知识的理解和掌握。先上一图：

　　很简单，虽然Asp.Net中的DataGridView或Repeater控件也都可以定义，不过还是感觉JQuery的更方便一点。使用JQuery实现表格中的奇数行、偶数行不同的显示样式，基本上两行代码搞定，但是表格的标题也属于<tr>，所以可以灵活运用not标记来区分开来，代码两行如下：

$(document).ready(function() {            //当DOM文档结构加载完成时（不必等图像加载完毕）
  $('#Table01 tr:odd:not(.TableHeader)').addClass('OddRow'); //选择Table01中的除“标题行”外的所有奇数行，加上指定样式
  $('#Table01 tr:even:not(.TableHeader)').addClass('EvenRow'); //选择Table01中的除“标题行”外的所有偶数行，加上指定样式
});

 

3.第二个演示

 

　　如果表格中的“人员状态”为“休假”就用红色字体显示，虽然也很简单。不过如果用Asp.Net的Repeater控件还是有些麻烦的，我在以前的设计中，会将Employee实体类中加个属性如“ColorName”，其中只有一个Get方法。如：

        public string ColorName
        {
            get
            {
                //如果人员状态的名称为“休假”
                if (this.Status.StatusName = "休假")
                {
                    return "Red";
                }
                return "Normal";
            }
        }

　　然后前台再绑定这个“多余”的属性，有了JQuery这个问题似乎简单多了，不过也会带来一些新的问题，比如修改人员状态中关键字，假设增加一个“病假”需要用蓝色显示，那么要维护后台cs与前台js两处的代码了，不过也应该可以通过系统初始化重新动态生成js脚本来完成。回到原本的话题，我是用了contains("休假")关键字，来查找指定的td，代码如下：

  $('#Table02 tr:odd:not(.TableHeader)').addClass('OddRow');    //选择Table02中的除“标题行”外的所有奇数行，加上指定样式
  $('#Table02 tr:even:not(.TableHeader)').addClass('EvenRow');  //选择Table02中的除“标题行”外的所有偶数行，加上指定样式
  $('#Table02 td:contains("休假")').addClass('RedText');         //选择Table02中人员状态为“休假”的列，指定单元格的字体颜色
  $('#Table02 td:contains("休假")').parent().addClass('RedRow'); //选择Table02中人员状态为“休假”的行，指定行背景色

 

4.第三个演示 

　　如果表格中工资列中数据大于4000就用绿色显示其中的数值，查找了下JQuery中好像没有这样的表达式可以直接查询出元素（如果有朋友知道更好的方法请不吝赐教），所以写了段脚本如下：

  $('#Table03 tr:odd:not(.TableHeader)').addClass('OddRow');      //选择Table03中的除“标题行”外的所有奇数行，加上指定样式
  $('#Table03 tr:even:not(.TableHeader)').addClass('EvenRow');    //选择Table03中的除“标题行”外的所有偶数行，加上指定样式
  $('#Table03 tr:not(.TableHeader)').each(function(){             //遍历除“标题行”外的所有行
       var money = parseInt($(this).children('td').eq(3).text()); //取得工资列的数据
     if(money>4000) {                                             //判断是否大于4000
        $(this).children('td').eq(3).addClass('GreenText');  
     }
  });

 

5.第四个演示 

　　与前面的演示基本相同，这次换成了根据时间大小来分色显示，实在是没找到这样的查询表达式，难道这种常用方法，JQuery不应该直接提供吗？汗！具体代码如下：

 

  $('#Table04 tr:odd:not(.TableHeader)').addClass('OddRow');      //选择Table04中的除“标题行”外的所有奇数行，加上指定样式
  $('#Table04 tr:even:not(.TableHeader)').addClass('EvenRow');    //选择Table04中的除“标题行”外的所有偶数行，加上指定样式
  $('#Table04 tr:not(.TableHeader)').each(function(){             //遍历除“标题行”外的所有行
     var birthDate = new Date($(this).children('td').eq(4).text().replace(/-/g,"/"));  //取得出生日期列的数据
     var lineDate = new Date("1980-01-01".replace(/-/g,"/"));                          //定义80后的界限
     if(birthDate >lineDate) {                                                         //判断是否为80后
        $(this).children('td').eq(4).addClass('GreenText');  
     }
  });

 

6.收获及感悟

 

　　今天的两个小时还是有所收获的，虽然没有阅读新的内容，不过掌握了诸如人员状态、工资、出生年月等不同数据类型，如何使用JQuery在前端实现不同样式的显示。考虑到之前一直采用为实体类定义个“多余”的属性，感觉使用JQuery也许会更简单直接一点，不过JQuery的使用也可能带来需多处维护业务代码的可能，所以还需细细思考出更好的方案，以便于今后更好的完成项目设计工作。