常用正则表达式汇总

REG
REG

正则表达式是web开发必备的一项基本技能，熟练掌握使用正则表达式，能使你的开发效率得到大幅度的提升，尤其是在对网络爬虫爬取页面内容进行分析方面有巨大的作用，下面就来介绍一些常用的正则表达式，希望对大家能有所帮助

阅读更多

前端冷知识课堂

WEB
WEB

HTML篇

浏览器地址栏运行JS代码

在浏览器地址栏可以直接运行JS代码，做法是以javascript:开头后跟要执行的语句。比如:

1
javascript:alert('alert from the address bar :)');

将以上代码贴到浏览器地址栏回车后执行，alert弹出一个窗口

需要注意的是如果是通过复制粘贴代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码，so :(

浏览器地址栏运行HTML代码

在非IE内核的浏览器地址栏可以直接运行HTML代码，比如在地址栏输入以下代码然后回车运行，会出现指定的页面内容

1
data:text/html,<h1>Hello, world!</h1>

效果如下:

浏览器变成编辑器

将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器，跟windows记事本效果一样

1
data:text/html, <html contenteditable>

主要是因为HTML5中新加了contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。举一反三，将以下代码在控制台执行后，整个页面变成可编辑状态，肆意玩耍吧

1
document.body.contentEditable='true';

阅读更多

在ubuntu上安装最新稳定版本的node及npm

Ubuntu
Node, Ubuntu

背景

通过ubuntu官方apt安装工具安装的node是最新LTS版本的，而本人是个有点强迫症的人，喜欢追求新的东西，也就是想方设法想要去安装最新版本的node，所以本文也就产生了，附上ubuntu安装node和npm的命令行命令:

1
2
sudo apt install nodejs-legacy
sudo apt install npm

最新版本安装方法

1、安装npm

1
sudo apt install npm

2、升级npm为最新版本

1
sudo npm install npm@latest -g

此时通过npm -v可以发现npm版本号为最新版本3.10.3;

阅读更多

Grub Rescue解决办法

Ubuntu
Ubuntu

问题原因

自己装的是win10和ubuntu 16.04双系统，经常对ubuntu瞎整弄得系统不成样子，这时没办法只能重新安装，而此时每次重启都发现系统自动进入了grub rescue模式，需要输入命令才能进入系统，而重启之后发现这个问题还是没有解决，还是要输入命令才能进去

解决办法

1、先使用ls命令，找到ubuntu安装分区

1
grub rescue>ls

会罗列出所有的磁盘分区信息，比方说我的是

1
(hd0),(hd0,msdos1),(hd0,msdos5),(hd0,msdos6),(hd0,msdos7),(hd0,msdos8),(hd0,msdos9),(hd0,msdos10),(hd0,msdos11)

阅读更多

解决ubuntu下sublime无法输入中文问题

Ubuntu
Sublime

系统环境

系统:Ubuntu 16.04优麒麟 (应该大多数linux系统都试用)
输入法:小企鹅输入法 fcitx 4.2.9.1
Sublime Text版本:Sublime Text 3 Build 3114

解决办法

1、保存以下代码到sublime-imfix.c(位于～目录)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#include <gtk/gtkimcontext.h>
void gtk_im_context_set_client_window (GtkIMContext *context,
         GdkWindow    *window)
{
 GtkIMContextClass *klass;
 g_return_if_fail (GTK_IS_IM_CONTEXT (context));
 klass = GTK_IM_CONTEXT_GET_CLASS (context);
 if (klass->set_client_window)
   klass->set_client_window (context, window);
 g_object_set_data(G_OBJECT(context),"window",window);
 if(!GDK_IS_WINDOW (window))
   return;
 int width = gdk_window_get_width(window);
 int height = gdk_window_get_height(window);
 if(width != 0 && height !=0)
   gtk_im_context_focus_in(context);
}

阅读更多

Chrome Console命令

Chrome
Chrome

显示信息

1
2
3
4
console.log('log');			//最常用
console.info('info');
console.error('error');
console.warn('warn');

效果:

占位符

console上述的集中度支持printf的占位符格式，支持的占位符有:字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）

1
console.log("%d年%d月%d日",2016,6,1);

效果:

阅读更多

css常用代码大全

CSS
CSS

Css背景颜色透明

1
2
3
4
5
6
7
.liter{
	filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#4CDDDDDD', endColorstr='#4CDDDDDD');
}
:root .liter {
	filter:none;     /*处理IE9浏览器中的滤镜效果*/
	background-color:rgba(221,221,221,0.3);
}

图片垂直居中对齐

第一种：table-cell法

1
2
3
<div class="test_box">
	<img src="book.jpg" alt="" />
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.test_box {
	display:table-cell
	;width:200px;
	height:200px;
	vertical-align:middle;
	text-align:center;
	*float:left;
	*font-family:simsun;
	*font-size:200px;
	*line-height:1;
	border:1px solid #000000;
}
.test_box img {
	vertical-align:middle;
}

阅读更多

慕课网视频解析下载

慕课网
慕课网

慕课网视频解析下载

慕课网视频解析地址

技术说明

采用Bootstrap构建页面，jQuery实现页面交互，输入课程号点击解析，ajax通过跨域中转获取慕课网对应链接的网页代码进行分析，提取相关课程信息，获取课程章节列表及课程类型(视频、练习、编程)。如果是视频，则通过慕课网视频链接的api接口获取json数据，然后我们可以选择视频的清晰度进行下载(L,M,H),右键另存为的方式进行下载。而如果是练习、编程，可以点击按钮直接跳转到慕课网进行学习

阅读更多

解决Ubuntu下Webstorm系列问题

Ubuntu
Ubuntu, Webstorm

中文输入问题

解决办法：
在Webstorm安装目录的bin目录下找到webstorm.sh，然后打开之后在前面加上如下代码：

1
2
export XMODIFIERS=@im=fcitx
export QT_IM_MODULE=fcitxubun

NodeJS代码提示

2016-8-18更新

每当编写Node代码时，总是没有代码提示，其他语言的基本都有，而众所周知为什么WebStorm这么流行的原因就在于它的代码提示功能相当强大，那为什么没有提示了？

  1. 我们需要开启NodeJs代码提示，那么请点击File -> Settings -> Language && FrameWork -> Node.js and NPM -> Enable即可，如下图所示:
  2. 或者更简单的方式就是鼠标点击Node的核心模块高亮处，按组合键Alt+Enter，弹出下拉菜单，最后敲Enter开启代码提示功能，如下图

gulp构建前端自动化

NodeGulp
Gulp, Node

目前最知名的构建工具： Gulp、Grunt、NPM + Webpack；

grunt是前端工程化的先驱
gulp更自然基于流的方式连接任务
Webpack最年轻，擅长用于依赖管理，配置稍较复杂
推荐使用Gulp，Gulp基于nodejs中stream，效率更好语法更自然,不需要编写复杂的配置文件

基础安装
Gulp是基于Node.js的，需要要安装Node.js
1、为了确保依赖环境正确，我们先执行几个简单的命令检查。

1
2
leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ node -v
v4.2.6

Node是一个基于Google V8引擎建立的一个解释器
检测Node是否已经安装，如果正确安装的话你会看到所安装的Node的版本号
2、接下来看看npm，它是node的包管理工具，可以利用它安装gulp所需的包

1
2
leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ npm -v
3.5.2

这同样能得到npm的版本号，装Node时已经自动安装了npm

阅读更多