[项目]课程表 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文档。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容

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