🌓

Git常用命令速查表

本文将对Git 命令,做一下全面而系统的简短总结,整理成简洁、明了的图表结构,方便查询

一、 Git 常用命令速查

git branch 查看本地所有分支

阅读全文

Git常用命令详解

一、 Git 命令初识

在正式介绍Git命令之前,先介绍一下Git 的基本命令和操作,对Git命令有一个总体的认识

阅读全文

浅谈Reactjs工作原理

Reactjs 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内部通过state来维护组件状态的变化,当组件的状态发生变化时,React通过虚拟DOM技术来增量并且高效的更新真实DOM。本文将对React 的这些特点进行简单的介绍。

阅读全文

Git一键同步到多个不同代码库

需求

现在代码库众多,有京东、csdn.github、bitbucket,最早我的项目在bitbucket上,但是发现在家里电信网络慢的动都动不了,应该是被电信和谐了,所以不得不改用国内的,但也不想重新建个git,如果能够一键同步到多个不是更好?

阅读全文

浅谈javascript的Array.prototype.slice.call

在js中我们经常会看到Array.prototype.slice.call(arguments,0)的写法,当然,这个方法的作用也许大家都明白,那就是把类数组对象转换成一个真正的数组。关于这个方法,我说说自己的理解。这里涉及到slice()方法和call()方法,所以先简单说说这两个方法。

阅读全文

移动端布局rem通用代码

1
2
3
4
5
6
7
8
<script>
var pixclPatio = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixclPatio+',minimum-scale='+pixclPatio+',maximum-scale='+pixclPatio+',user-scalable=no" />');

var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 16 + 'px';
</script>

阅读全文

运用原生js编写自己的JQuery库(三)

在[运用原生js编写自己的JQuery库(一)]和[运用原生js编写自己的JQuery库(二)]两篇文章中已经列举了大量的使用原生JavaScript替代JQuery的例子,在本文中将继续列举!

1、表单

获取焦点

阅读全文

运用原生js编写自己的JQuery库(二)

为什么说不要过度依赖JQuery呢?从项目方面来讲,一些项目在开发中实际用到JQuery内置功能不多,这样会造成项目臃肿;另一方面,目前的主流已经倾向于原生开发。而在上一篇《[运用原生js编写自己的JQuery库(一)]》一文中已经介绍了部分使用原生JavaScript实现JQuery功能的代码,这一章将继续列举。

阅读全文

运用原生js编写自己的JQuery库(一)

毫无疑问,JQuery是一款非常优秀的JavaScript库,它让我们开发项目变得更加便捷容易。不过,当你准备在一个项目(特别是移动项目)中使用JQuery时,你真的该好好思考一下,你会用到JQuery的哪些功能,是否真的需要jQuery。因为随着JavaScript的不断改善进化,现在它内置的功能已经非常强大,在很大程度上,已经可以实现以前需要在JQuery中才能实现的技术(如果你的项目需要在IE8之前的浏览器中使用,建议还是使用JQuery,这样可以省却很多兼容性问题)。

阅读全文

requireJS模块加载器优化工具,bulid.js详解

requireJS是javascript的模块加载器,是基于AMD规范实现的。

r.js是其提供的对模块进行打包和构建的一个工具

下载 r.js

创建r.js 的配置文件 build.js

build.js

阅读全文

用grunt搭建自动化的web前端开发环境

grunt
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学、不用!

1. 前言

各位web前端开发人员,如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点)。至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt。还有一点,它完全免费,没有盗版。既强大又免费的东西,为何不用?

阅读全文

HTML5 postMessage解决跨域、跨窗口消息传递

平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题

1.页面和其打开的新窗口的数据传递

阅读全文

功能强大的Jquery滚动定位插件scrollFix

【插件功能】

当用户向上或向下滚动页面到一定位置时,目标元素开始固定定位(position:fixed),当回滚到原位置时目标元素恢复到原状态,可以定制触发滚动相对屏幕位置和触发滚动方向,兼容IE6

阅读全文

通过JS修改浏览器地址(url)而页面不刷新

history对象:它提供了一些非常有用的方法和属性,让我们在历史记录中自由前进和后退。

基本流程:

history

阅读全文

JavaScript常用API合集

一、节点

1.1 节点属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Node.nodeName   //返回节点名称,只读
Node.nodeType //返回节点类型的常数值,只读
Node.nodeValue //返回Text或Comment节点的文本值,只读
Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写
Node.baseURI //返回当前网页的绝对路径

Node.ownerDocument //返回当前节点所在的顶层文档对象,即document
Node.nextSibling //返回紧跟在当前节点后面的第一个兄弟节点
Node.previousSibling //返回当前节点前面的、距离最近的一个兄弟节点
Node.parentNode //返回当前节点的父节点
Node.parentElement //返回当前节点的父Element节点
Node.childNodes //返回当前节点的所有子节点
Node.firstChild //返回当前节点的第一个子节点
Node.lastChild //返回当前节点的最后一个子节点

//parentNode接口
Node.children //返回指定节点的所有Element子节点
Node.firstElementChild //返回当前节点的第一个Element子节点
Node.lastElementChild //返回当前节点的最后一个Element子节点
Node.childElementCount //返回当前节点所有Element子节点的数目。

阅读全文

js实现一些跨浏览器的兼容事件方法

用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象:

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
var EventUtil = {
on: function(element, type, handler) {/* 添加事件 */
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {//IE 注意:此时事件处理程序会在全局作用域中运行,因此用attachEvent绑定的事件,此时在事件处理函数里的this 等于window,使用时要注意
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},

off: function(element, type, handler) {/* 移除事件 */
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},

getEvent: function(event) {/* 返回对event对象的引用 */
return event ? event : window.event;
},

getTarget: function(event) {/* 返回事件的目标 */
return event.target || event.srcElement;
},

preventDefault: function(event) { /* 取消事件的默认行为 */
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},

stopPropagation: function(event) {/* 阻止事件冒泡 */
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},

/* mouseover 和mouserout 这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。*/
getRelatedTarget: function(event) {
if (event.relatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {//IE8 mouserout事件
return event.toElement;
} else if (event.fromElement) {//IE8 mouseover事件
return event.fromElement;
} else {
return null;//其他事件
}
}
};

阅读全文

检测监控浏览器(窗口)关闭、跳转、刷新:onbeforeunload与onunload事件

浏览器窗口关闭可以使用window.close(),但并没有与之相对应的事件,页面加载也是使用onload事件监听。
onunload和unbeforeunload事件都是在页面刷新或关闭的时候执行。
可以在<script>脚本中通过window.onunload来指定或者在里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。

阅读全文

获取js文件后面的参数

<script type="text/javascript" src="tongji.js?id=loginbox"></script>
就是如何获取id是多少了?

第一获取src

阅读全文

javascript 常用DOM操作整理

1.抽取了DOM操作中常用的部分

2.DOM属性和方法的对象归属可能并不完全准确

3.某些兼容性和特点做了标识(绝大部分的兼容性是ie8~9上下)

节点类型

阅读全文

让页面字体显得清晰、平滑、无锯齿的CSS方法

近期遇到一个项目,对字体要求十分严格,字体不使用bloder,并且使字体看起来更清晰更平滑无锯齿,我对设计并不在行,对印刷排版也没有研究,但我知道什么字体好看,什么不好看。几年前我就看到过CSS里有一些属性很奇怪,当我设置这些属性或取消这些属性后,字体看起来会变得好看和不那么好看。这就是字体平滑设置的效果。但今天这里,只是介绍分享一下-webkit-font-smoothing它的基本用法:

阅读全文