cheerio使用

1
2
3
4
5
6
7
8
9
10
11
12
var cheerio = require('cheerio');
var $ = cheerio.load('<div class="test"><span class="a"></span></div>');
// 查找
var a = $('.a');
// 设置节点属性
a.attr('test','testval');
// 输出节点名称
console.log(a[0].name);
// 获取节点内容
console.log(a.html());
// 删除
a.remove();

$属性

1
2
3
4
5
6
7
8
9
10
fn
load()
html()
xml()
text()
parseHTML()
root()
contains()
_root
_options

节点属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
options
length
_root
constructor()
_originalRoot
cheerio
splice()
_make()
toArray()
attr()
data()
val()
removeAttr()
hasClass()
addClass()
removeClass()
toggleClass()
is()
find()
parent()
parents()
parentsUntil()
closest()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
siblings()
children()
contents()
each()
map()
filter()
not()
has()
first()
last()
eq()
get()
index()
slice()
end()
add()
addBack()
_makeDomArray()
append()
prepend()
after()
insertAfter()
before()
insertBefore()
remove()
replaceWith()
empty()
html()
toString()
text()
clone()
css()
serializeArray()

节点内容属性 a[0].name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{ '0':
{ type: 'tag',
name: 'a',
attribs: {},
children: [ [Object] ],
next: null,
prev: null,
parent:
{ type: 'tag',
name: 'test',
attribs: {},
children: [Object],
next: null,
prev: null,
parent: null,
root: [Object]
}
}
}

读 css Secrets 笔记

介绍

  • 模块化和扩展性,例如采用相对高度,背景透明度
  • 相信眼睛,而不是相信数字
    • 垂直居中时,看起来总是偏下,可以向上调一下
    • 圆和矩形同样大小,看起来圆总是偏小,可以适当调大
    • 内间距上下间距比左右看起来大

背景和边框

  • 半透明边框颜色和背景颜色相同时,半透明边框不起作用:背景颜色边界 background-clip
  • 多个border: outline shadow
  • 背景位置: background-position: right 10px bottom 20px; background-origin,calc()
  • 外方内圆角: outline实现外方,border-radius实现内圆,box-shadow填充中间空白部分
  • 条纹背景: background:linear-gradient(#fb3,#58a)
  • 垂直条纹,倾斜条纹,三角格子.多套背景background-position: 0 0, 15px 15px;

使用riot时遇到的坑

尽量使用数据,然后调用update更新,而不是手动修改节点结构

  • array数组展示节点,手动修改了渲染后的结构,更新节点时不起作用. 原因:手动修改使得节点和数据关联失效.

调用子模块时参数中直接使用函数.最好通过js更新数据后update,而不是在模板中使用函数。

  • 例如这种结构.,在child中的opts.html将为空,数据还未计算

15.9.29 riot总结

  • Riotjs网站资料
  • 使用riot的建议
    • riot的模板文件(tag)建议采用html格式书写,其中的js代码建议写在script标签内部,这样可以使用编辑器的提示
    • 一般采用本地编译模式,编译后将模板改写成js,改写成如下格式riot.tag(tagName,template,js);其中tagName即为最外层节点名
    • riot模板内部也可以写style(不建议)
    • riot的模板中最外层标签将是模板名称,不能重复;js代码要写在节点内部
    • 假如通过浏览器编译,可以用riot.compile函数,注意使用riot+compile.js
    • 使用模板:riot.mount(selector,tagName,opts),selector和tagName相同时,可以省略其中任意一个,opts是编译的数据,将直接传递给模板内部(变量名opts),模板内js执行完后才会渲染出来。
    • node环境中想使用模板编译功能可以采用riot.render函数(mount函数使用了dom树,node环境不可用)
  • 其他
    • 版本v2.2.4是最后兼容浏览器ie8(需要其他js文件)的版本

15.9.08

  • 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记。
  • 命令行命令chrome –allow-file-access-from-files来禁止CORS错误

15.8.28 碎片化学习

  • mongodb数据库与mongoose工具的使用
  • 自动生成文档
  • array.sort(func) 函数中必须返回1,0,-1,不能使用true,false

15.8.23 ask改版

  • angular模板转smarty模板

15.8.20 夜莺ithelp

  • ps信息框中包含所选区域大小及位置
  • ps右键点击图片,选择图形元件所在图层

15.8.15 内搜工具条结果页面CtrlCtrl

  • 注意页面需主动设置宽度和高度
  • 外围滚动条样式必须主动设置(ie7模式)

初步

  • 使用python upload.py -o 提交代码到cooder检查
  • 使用svg提交代码