通过UA判断是否在移动端打开

最近总是看到有一些人在问,怎么判断我的页面是否在移动端打开的。如果实在移动端打开,那么自动跳到另一个页面上去。例如淘宝、百度,在手机输入 http://www.baidu.com 回跳到 http://m.baidu.com, 其实这只是通过UA(userAgent)判断设备。

1
2
3
4
5
6
var ua = window.navigator.userAgent;
if(ua.match(/mobile/i)){
location.href = 'http://m.baidu.com';
}else{
location.href = 'http://www.baidu.com';
}

npm被墙

有时候在安装一些npm组件的时候,会出现安装失败。大部分的原因都是以为“网络”的原因,——被墙了。所以,可以通过换淘宝的镜像再进行安装。

元素的各种位置尺寸宽高-4

还是用之前的那个DOM结构

1
2
3
4
5
6
7
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>

1
2
3
4
div{padding: 40px 30px;}
#div1{background: #ccc;}
#div2{background: #777;position: relative;}
#div3{background: #f60;}

offsetTop、offsetLeft其实在本质上没有什么区别,只是目标点不同而已
offsetTop[Left]: 只读属性,当前元素到定位父级的距离(或者叫偏移值)

父节点-3

上次通过父节点操作子节点,通过某个节点操作兄弟节点,这次要说的是通过子节点去操作父节点,还是这个DOM结构:

1
2
3
4
5
6
7
8
<body id="body">
<ul id="ul1">
<li>11111 <a href="javascript:">隐藏</a></li>
<li>22222 <a href="javascript:">隐藏</a></li>
<li>33333 <a href="javascript:">隐藏</a></li>
<li>44444 <a href="javascript:">隐藏</a></li>
</ul>
</body>

咱们要这个DOM结构要干嘛呢?咱们要实现点击 a标签,也就是那个“隐藏”实现,隐藏掉点击所在的li。

用CSS做气泡

下午在群里看到迷糊的一个问题,其实是很简单的一个问题,就是…………这个东西
截图
喔,这不就是用border去做一个三角形嘛,有何难~确实不难,然而有人不会啊
其实就算不会,这么大众的东西,百度一下就有了,既然有人问了,我也就撸了一个demo出来了。过程就不说了。

原理就是:第二个三角形覆盖第一个三角形,调整位置留出一定的边框。

相关的代码如下

子节点和兄弟节点的操作-2

这次要讲的是子节点和兄弟节点的操作:firstChild lastChild NextSiblings previousSiblings

元素.firstChild: 只读属性,看名字基本就能猜个大概了 第一个子节点
标准浏览器下: firstChild会包含元素类型和文本类型的节点
非标准浏览器下: 只包含元素节点

然而我们不可能像childNodes去判断nodeType,而是用另一个属性: firstElementChild

firstElementChild: 只读属性,标准浏览器下获取第一个元素类型的子节点,而在非标准浏览器下是没有的

Sublime Text的缩进问题

很久之前就看到过说不要用一个tab去缩进代码,例如这样
tab缩进
可能有人会说,这样有啥问题呢?代码排版不是挺好的吗?在windows系统的sublime text看是挺好的,然而在浏览器的查看源码,就变成这样了
查看源码
这根本就不是一个tab的宽度了呀~
那么,难道我们要按4个空格键去实现代码的缩进吗?答案是no