疯子的自留地

当我老了,也一样写代码.不为别的,只为爱好!

NPM入门

看到一篇关于npm入门的超棒的博客,地址:http://www.sitepoint.com/beginners-guide-node-package-manager/,整理了下重点,抽空翻译一下,用来作为入门确实不错,推荐英语好的朋友直接阅读.

阅读全文

阻止chrome等浏览器自动填充表单

这个特性用户体验很好,但是有时候有很扯淡,比如说用户a登录后点击注册,会自动将用户a的登录信息填充到注册表单中.去掉这个很简单,一行html标签即可.如下:

<input type="password" style="display: none;">

把该代码放成表单的第一个password类型的input框即可

CSS中position总结

对position这个属性一直是一知半解,知道有4个属性static,fixed,relative,absolute,然而对后两个一直概念不清.查了下资料,总算弄明白,记录下.

static

所有的元素默认position都是这个,元素的位置基于文档流,不解释.

fixed

当元素设置了这个的时候,基于body定位

relative

顾名思义,relative指相对位置,这里的相对位置是指的自身元素本来该属于的文档流位置.如果设置了border,margin,padding等值,relative的位置是基于自己margin的左上角开始定位,想跳出原本的文档流,随后的子兄弟会移上前去占据原本该元素的文档流位置

absolute

绝对定位,这里的绝对,应该是绝对谁?

分为两种情况:

  1. 先基于第一个postion设置为非static的父级元素padding的左上角开始位置来定位,如果找到了,遵序此规则
  2. 如果根据规则1最后也没找到相关元素基于body来进行定位

ubuntu server用户必须本地登录后才能远程ssh登陆

给家里闲置的笔记本装了个ubuntu server扔在家里跑点小任务,设置了证书的ssh登陆,无意中重启的时候发现必须要先将本地的用户登陆后才能ssh远程登陆该用户,否则一直提醒publickey无效.以为是sshd服务没启动,排查后发现开机已经启动了sshd服务.查看/var/log/auth.log发现是登陆被down掉.设置tty自动登陆该用户也无解,必须先登陆该用户才行.WTF!!!!

阅读全文

CSS选择器

选择器

/* 匹配name值为hello的input框 */
input[name="hello"]{color:red;}

/* 匹配name值中含有name属性的input框,如<input class="name input-item" /> */
input[class~="name"]{color:red;}

/* 匹配name值中含有hello字符的input框 */
input[name*="hello"]{color:red;}

/* 匹配name值中以hello开头的input框 */
input[name^="hello"]{color:red;}

/* 匹配name值中以hello结尾的input框 */
input[name$="hello"]{color:red;}

/* 匹配lang值等于en或者以en-开头的input框,注意这里等于en,如果有一个lang的值为"en zh"将不会被匹配 */
input[lang|="en"]{color:red}

/* 匹配input的class为input-item的元素 */
input.input-item{color:red;}

/* 匹配input紧挨着的下一个class为hello的div元素(中间不能翁有任何的其他元素) */
input+.hello{color:red;}

阅读全文

JS中子窗口和父窗口交互

打开子窗口

var openWindow = window.open("example.com","example")

父窗口向子窗口传递消息

通过变量openWindow来进行,其中的openWindow就是新打开的子窗口的window.

子窗口向副窗口传递消息

假设打开的子窗口的script如下:

var parent = window.opener;

这里的parent的就是父窗口的window对象了

Javascript中的this

很久没有写过JS了,最近因为项目原因又再次滚回JS的怀抱。而之前的this就没怎么弄得很明白,于是今儿抽空仔细的总结了下,利人利己吧:0
this这玩意儿是个什么东西呢?在面向对象语言,比如宇宙第一的语言PHP中代表的就是某个对象。而在同样NB的JS里面,这玩意儿更玄乎,稍微不注意就会挂在这里,其实只要弄明白函数的几种调用场景就能很清晰地理解this了。下面一一来搞定。

阅读全文