panshao

虽然`localStorage`是很好用，但是它并不支持跨域访问，有些时候我们需要跨域访问，就只能用 `cookie`了 下面介绍两个`cookie`跨域情况 1. 二级域名之间的跨域问题 如果我想在同一个主域名下实现通信，比如 `www.baidu.com` 和 `zhidao.baidu.com`, 它们之间如何通信呢？。 在设置`cookie`的时候可以填写在哪个域名下生效的。 ``` js var LastReportGenerated="Jul 11 2013", baseDomain = '.baidu.com', expireAfter = new Date(); // 设置过期时间 expireAfter.setDate(expireAfter.getDate() + 7); //...

几乎每次做项目都会遇到这样的情况，从当前`url`中获取某个参数的值， 比如从`http://wiki.xxx.com?pageId=853227` 中获取`pageId`的值，像这样只有一个参数的，用字符串截取下就可以了 但是如果包涵多个参数呢？比如从`http://wiki.xxx.com?pageId=853227&name=jack&passwd=123456` 获取`name`的值，就比较棘手了。要么用正则，要么引入一个库，比如[uri.js](https://medialize.github.io/URI.js/). 下面介绍一个封装好的一个专门获取参数的方法。 ``` js function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),...

css如何能基于兄弟元素的数量来匹配元素？ 也许这样问会有点懵逼，那请看下面的几个问题。 ``` html ... ``` 1. 当 `li` 只有一个的时候，为 `li` 设置背景色为红色 2. 当 `li` 有且只有四个的时候， 为 `li` 设置背景色为红色 3. 为第三个`li`及其之后的`li`设置背景色为红色 4. 当 `li` 的数量大于三个的时候为所有的`li`设置背景色为红色 5. 为第四个`li`及其之前的`li`设置背景色为红色 6. 当`li` 的数量小于四个的时候为所有的`li`设置背景色为红色...

昨天晚上看 `css`， 遇到了一个稍微有点坑的问题 ## background-origin `background-origin` 是 `css3` 新增的属性， 主要是用来描述 `background-image` 的 起始位置取值如下： - `border-box`: 背景图片相对于边框盒来定位 - `padding-box`: 背景图片相对于内边距框来定位 - `content-box`: 背景图片相对于内容边框来定位 ### 默认值为： `padding-box` [查看demo](http://codepen.io/jackpan/pen/QNPaMr) ## background-clip `background-clip` 也是...

虽然 `calc()` 的兼容性并不好， 用起来真心强大 不过在 `sass` 中计算 **函数** **变量** 等有一些坑， 比如： ``` css $font-30: 30px; h1 { font-size: calc(100px - $font-30) } ``` 在上例中，`sass` 是无法正确的编译的， 它的输出是这样的： ``` css $font-30: 30px;...

### 简单介绍重排和重绘 当 `DOM` 的变化影响元素的几何属性的时候，浏览器需要是渲染树中受影响的部分失效 并重新构造渲染树这个过程称为 **重排**， 完成重排后，浏览器会重新绘制受影响的部分到 屏幕上，这个过程称为 **重绘**。 从上面的解释中我们可以得出： 1. `重排一定会导致重绘` 2. `重绘不一定会导致重排，当改变的属性不影响几何变化时，比如 background-color属性就不会引发重排，只会发生重绘` 重排和重绘都会引发性能问题， 我们能做的就是尽可能减少 `重排` 和 `重绘` 的次数，尤其是`重排`的次数 大多数浏览器对重排做了优化，但是下面这几个属性的获取会使得浏览器立即发生重排 - `offsetTop`, `offsetLeft`, `offsetWidth`, `offsetHeight` - `scrollTop`,...

利用 `a` 标签来进行下载如： 下载百度页面 ``` html ``` 就是这么简单， 就是这么任性。只需要在原来的基础上加个 `download` 即可 如果不加的话，就会直接跳转到百度的首页了。 [点击链接体验一下](http://jackpanyj.github.io/blog_demo/download) 关于这种方法的下载的跨域问题 在chrome中是无视跨域的，也就是说你可以下载几乎任何资源，只要你把他的地址 放到 `href` 属性中，包括 **图片** **音频** **视频** 等几乎所有的文件 在 `firefox` 中是不支持跨域下载的， 也就是说只能下载你当前域下面的任何文件 在其他浏览器中没有测试，估计支持度都不是很好，更不用说跨域下载文件了。 [参考链接](http://www.zhangxinxu.com/wordpress/2016/04/know-about-html-download-attribute/)

效果图如下：  实现方式： ``` css div.img { width: 200px; height: 200px; background-image: radial-gradient( top right, #fff 10%, transparent 10%), radial-gradient( top left, #fff 10%, transparent 10%), radial-gradient( bottom left, #fff...

- **指定版本**：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。 - **波浪号（tilde）+指定版本**：比如`~1.2.2`，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。 - **插入号（caret）+指定版本**：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。 - **latest**：安装最新版本。

死循环： ``` js var divEle = document.getElementsByTagName('div') for (var i = 0; i < divEle.length; i++) { document.body.appendChild(document.createElement('div')) } ``` 不会死循环： ``` js var divEle = document.querySelectorAll('div') for (var i...