1
2
// 重新加载页面
location.reload()

1
2
3
4
5
6
7
8
location.href
location.protocol
location.host
location.hostname
location.port
location.pathname
location.search // ?q=a&b=etc
location.hash

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// read / query
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
// by CSS Selector
document.querySelector();
document.querySelectorAll()
// update
document.getElementById('su').text='Hello World!';
document.getElementById('su').style.fontSize='100px';
// create
node = document.createElement('p');
node.innerText = 'Java';
document.getElementById('su').appendChild(node);
parentElement.insertBefore(newElement, referenceElement); // referenceElement 为 null 则在末尾插入
// delete
parentElement.removeChild(element);

1
2
3
4
5
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var tue = document.getElementById('tuesday');
tue.checked;    //是否选中
var form = document.getElementById('test-form');
form.submit();

1
2
3
4
5
6
7
var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);

1
2
3
var evt = document.createEvent("MouseEvents"); 
evt.initMouseEvent("mouseenter", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null); 
$0.dispatchEvent(evt); 

1
$0.dispatchEvent(new MouseEvent('mouseenter'))

1
str.replace(regexp|substr, newSubStr|function)

1
2
3
4
5
s = '1a2b3c';
s.replace(/\d/g, function(d){
    return parseInt(d)+1;
});
// '2a3b4c'

1
2
3
4
5
6
7
8
Object.defineProperty(obj, propName, {
    configurable: false, // true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.
    enumerable: false, // true if and only if this property shows up during enumeration of the properties on the corresponding object.
    value: undefined, // The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).
    writable: false, // true if and only if the value associated with the property may be changed with an assignment operator.
    get: undefined, // A function which serves as a getter for the property,
    set: undefined, // A function which serves as a setter for the property
})

1
2
3
4
5
6
7
arr = [1,2,3];
arr.forEach(function(item, index, arr){
    console.log(item, index, arr);
});
// 1 0 [ 1, 2, 3 ]
// 2 1 [ 1, 2, 3 ]
// 3 2 [ 1, 2, 3 ]

1
2
arr = [1, 2, 3];
arr.length = 0;

1
2
3
4
arr = [1,2,3,4,7,8,9];
const index = arr.indexOf(value);
if (index) arr.splice(index, 1);
// If the item doesn't exist in the list, splice removes the last item in the list

1
2
// 获取当前时间
var now = new Date()

1
2
JSON.stringify(obj)
JSON.parse(string)

1
2
// 0-1之间的随机数
Math.random()

1
2
3
4
5
6
7
8
var re = /\d+/
re.test('232432')    // true
re.test('ascddf')    // false
'a   b   c   de f'.split(/\s+/)    // ["a","b","c","de","f"]
'a b c de  f'.split(/(\s+)/)    // ["a", " ", "b", " ", "c", " ", "de", "  ", "f"] 捕获内容会留在结果中
re = /.*共(\d+)页.*/
//返回group
re.exec('balalab共50页balabala')    // ["balalab共50页balabala", "50"]

1
new Promise(function(resolve, reject) { ... } );

1
2
3
4
5
6
7
typeof /regex/ === 'object';
typeof class C {} === 'function';
// use Array.isArray or Object.prototype.toString.call
// to differentiate regular objects from arrays
typeof [1, 2, 4] === 'object';
// This stands since the beginning of JavaScript
typeof null === 'object';

1
2
3
4
5
6
7
8
// All constructor functions, with the exception of the Function constructor, will always be typeof 'object'
var str = new String('String');
var num = new Number(100);

typeof str; // It will return 'object'
typeof num; // It will return 'object'
var func = new Function();
typeof func; // It will return 'function'

1
2
void (expression)
void expression

1
2
//得到一个CanvasRenderingContext2D对象,所有的绘图操作都需要通过这个对象完成
var ctx = canvas.getContext('2d');

1
;(function(){var al=100;console.log('run~')}());

1
2
//此处的this是Window
;(function(){console.log(this)}());

1
2
3
4
5
6
function Person(name, age){
    this.name = name;
    this.age = age;
}

var worker = new Person('smith', 21);

1
2
let name = 'Larry';
console.log(`Hello $(name)`)

1
2
3
for (let o of foo()) {
    console.log(o);
}

1
2
//一个小技巧,赋予默认值
var x = i || 0;

1
getComputedStyle($0).position

1
2
3
4
var link = document.createElement("a");
link.download = 'filename';
link.href = dataURI;
link.click();

1
2
3
4
5
6
7
8
9
function downloadObjectAsJson(exportObj, exportName){
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href",     dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
}

1
2
let sum = new Function('a', 'b', 'return a + b');
sum(1, 2) // 3

1
2
3
4
5
6
7
var nums = [1, 2, 3]
Math.min.apply(Math, nums)    // 1
Math.max.apply(Math, nums)    // 3

// destructuring
Math.min(...nums)    // 1
Math.max(...nums)    // 3

1
2
3
4
let arr = [1,2,3];
arr.filter(item => item === 2);
arr.map(item => item * 2);
arr.reduce((acc, cur) => acc + cur);

1
2
let a = 1, b = 2;
[a, b] = [b, a]

1
2
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6]; //[ 1, 2, 3, 4, 5, 6 ]

1
2
3
4
5
6
7
8
function first(first, ...rest){
    console.log(first);
    console.log(rest);    
};

first(1,2,3,4,5,6);
// 1
// [ 2, 3, 4, 5, 6 ] // rest 是一个数组

1
2
3
4
5
let a = 1;
let obj = {
    a
};
obj.a; // 1

1
2
let f = () => ({a: 1, b: 2, c: 3});
let {a, b, c} = f();

1
2
3
4
5
6
7
8
9
10
let objES5 = {
    f1: function(){
        // ...
    }
}
let objES6 = {
    f1(){
        // ...
    }
}

1
2
3
4
let obj = {
    foo: "bar",
    [ "baz" + quux() ]: 42
}

1
2
3
4
var obj = {
    foo: "bar"
};
obj[ "baz" + quux() ] = 42;

1
2
3
4
5
handlePageInfo ({count = 0, limit = 20, page = 1} = {}) {
    this.count = count
    this.pageLimit = limit
    this.currentPage = page
}

1
2
3
module.exports = {
    name: 'xxx',
}

1
const m1 = require('m1');

1
2
3
require(['m1', 'm2'], function(m1, m2) {
    // ...
});

1
export const name = 'aaa';

1
import { name } from 'm1';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--引用JQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
window.jQuery === window.$    //true
//多级查找
$('#test').find('li')
$('li').addClass('highlight')
// 迭代
$('li').each(function(index, el){
    console.log(el);
});
//显示/隐藏
$('left').show().hide()
//浏览器宽高
$(window).width();
//网页宽高
$(document).width();

1
2
3
4
5
6
7
8
9
10
$('a#link').click(function(){alert('hello')})
$('a#link').on('click',function(){alert('hello')})
//DOM完成初始化后触发,且只触发一次
$(document).ready(function(){})
//同上
$(function(){})
//监听鼠标
$('#testMouseMoveDiv').mousemove(function (e) {        
    $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);    
});

1
2
3
$().fadeIn(1000).fadeOut(1000).fadeTogle(1000)
$().slideUp(1000).slideDown(1000).slideTogle(1000)
$().show(1000).hide(1000).togle(1000)

1
2
3
$.ajax()
$.get()
$.post()

1
$.fn.method = function(){...;return this;}

1
2
document.images //  all of the images contained in the current document
document.forms

1
document.styleSheets[0].cssRules