在v1.1里面我们遇到了v1.0埋下的坑,因为乱写id所以导致难以参数化。虽然提前拟定好id命名的方法也可以,但是其实在课程表这种问题里面,选取单元格是不应该靠id的,尤其在我们依靠循环对课程表内容进行填充的时候,遍历才是最好的选择。
需要遍历的时候引入jQuery就很合适了,话说我也懒得写getElementById了,别跟我说学jQuery之前一定要把js学会,我看到document.getElementById就烦,用$("#")有什么不好。
如果要在一个网页里面用jquery,那首先要把jquery给引入到自己的网页里面,引入的方法是这样的:
<script src="你的jquery文件链接"></script>
这个可以放在head里面,或者body的结尾。jquery是一个非常常用的框架。用jquery能做的东西,javascript也是可以做的,而且实际上就是通过javascript实现的,但是在jquery里面会方便很多。
jquery可以从http://jquery.com/下载,假如已经下载了1.11.3版本并且和当前html文件放在一个目录那么上面的html代码就是这样的了:
<script src="jquery-1.11.3.js"></script>
现在可以先测试一下jQuery能不能用
$("table tr th").css("color","blue")
这条语句是找table元素下面的后辈元素tr下面的后辈元素th,找齐了以后把这些th的字体颜色设置成蓝色。如果jQuery引入正确,上面这段代码又放对地方了的话应该能看到表格第一行现在是蓝色的了
如果没变颜色,嗯,那试试$("body").css("color","blue")?根据坊间说法,
<script>
标签最好放在body的最后面,不知道放对没有?th是一种特殊的单元格,表示表头,不知道你的表里面有没有把th全写成td了?
现在说回来我们要怎么把v1.0的坑给填上,用jQuery的遍历就好,比较常用的遍历命令是children(),find()也可以,关于table下属元素的遍历可以看看这里[jQuery]table元素和其他元素在遍历的时候有点不一样。简而言之,如果要获取第三行第四列(这是星期几第几节的课呢?)应该这么写:
$("table").children().children("tr:eq(2)").children("td:eq(3)")
这么写也可以:
$("table").children().children().eq(2).children().eq(3)
这么写也可以:
$("table tr:eq(2) td:eq(3)")
现在用这种写法就可以重写一下v1.1的功能2了。之前的功能2是这样的:
function cellUpdate(weekday,classNum){
document.getElementById(weekdays[weekday]+classNum+"").innerHTML=getCellContent(weekday,classNum)
}
用jQuery我们就不从id入手了,而是用遍历的方式。遍历可以理解为数格子,比如我们现在要选择周一第三节,周一在第二列,第三节在第四行,所以我们只需要数到第四行第二列就可以了,然后因为我们用eq()
作为筛选方式(也就是说我们不会把所有的行或者一行里面所有的单元格都拿过来,而是按照这些元素在上一层级的排序进行选择),eq这种筛选呢,是从0开始计数的,当然了,也有从1开始计数的(css那一块),那个我们先不讲。那功能2应该怎么改呢?
function cellUpdate(weekday,classNum){
$("table").children().children().eq(这里写什么?).children().eq(这里些什么?).html(getCellContent(weekday,classNum))
}
这样就ok了,.html()的用法请自查api文档。