[项目]课程表 v1.2

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文档。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 12,159评论 2 19
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,690评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 8,988评论 1 19
  • 暑气蒸腾扑面来,惟将汗水洗尘埃。 站台谁把花高举,月季凌霞夺锦开。 坪间绿草正丰肥,北地不期开紫薇。 偶向风前听颤...
    德惠陳旭阅读 2,849评论 0 1
  • 昨天去江边逛街,发了几张自拍照,引来了几位好友互动。 珍珍就是其中一位,昨晚和他聊完天之后,发现她的声音非常好听,...
    熊芳菲阅读 1,688评论 0 0

友情链接更多精彩内容