阅读摘要之 You Don't Need jQuery!

代码全部摘录自下面的博客文章:

Selecting Elements

By ID

// jQuery
$('#myElement');

// DOM API IE 5.5+
document.getElementById('myElement');
// DOM API IE 8+
document.querySelector('#myElement');

By Attribute

// jQuery
$('[data-foo-bar="someval"]');

// DOM API IE 8+
document.querySelectorAll('[data-foo-bar="someval"]');

By Pseudo-class

// jQuery
$('#myForm :invalid');

// IE 8+
document.querySelectorAll('#myForm :invalid');

Children

// jQuery
$('#myParent').children();
// jQuery find children with an attribute of "ng-click"
$('#myParent').children('[ng-click]');
$('#myParent > [ng-click]');

// DOM API IE 5.5+
// NOTE: This will include comment and text nodes as well.
document.getElementById('myParent').childNodes;

// DOM API IE 9+ (ignores comment & text nodes).
document.getElementById('myParent').children;
// DOM API IE 8+
document.querySelector('#myParent > [ng-click]');

Descendants

// jQuery
$('#myParent A');

// DOM API IE 8+
document.querySelectorAll('#myParent A');

Excluding Elements

// jQuery
$('DIV').not('.ignore');
// or
$('DIV:not.(.ingnore)');

// DOM API IE 9+
document.querySelectorAll('DIV:not(.ignore)');

Multiple Selectors

// jQuery
$('DIV, A, SCRIPT');

// DOM API IE 8+
document.querySelectorAll('DIV, A, SCRIPT');

自己做一个 $

window.$ = function(selector) {
  var selectorType = 'querySelectorAll';

  if (selector.indexOf('#') === 0){
    selectorType = 'getElementById';
	selector = selector.substr(1, selector.length);
  }

  return document[selectorType](selector);
}

DOM Manipulation

Creating Elements

// jQuery
$('<div></div>');

// DOM API IE 5.5+
document.createElement('div');

Inserting Elements Before & After

// jQuery
$('#1').after('<div id="1.1"></div>');

// DOM API IE 4+
document.getElementById('1)
  .insertAdjacentHTML('afterend', '<div id="1.1"></div>');
  
// jQuery
$('#1').before('<div id="0.9"></div>');

// DOM API IE 4+
document.getElementById('1')
  .insertAdjacentHTML('beforebegin', '<div id="0.9"></div>');

Inserting Elements As Children

// jQuery
$('#parent').prepend('<div id="newChild"></div>');

// DOM API IE 4+
document.getElementById('parent')
  .insertAdjacentHTML('afterbegin', '<div id="newChild"></div>');
  
// jQuery
$('#parent').append('<div id="newChild"></div>');
// DOM API IE 4+
document.getElementById('parent')
  .insertAdjacentHTML('beforeend', '<div id="newChild"></div>');

Moving Elements

// jQuery
$('#parent').append('#orphan');

// DOM API IE 5.5+
document.getElementById('parent)
  .appendChild(document.getElementById('orphan'));
  
// jQuery
$('#parent').prepend($('#orphan'));

// DOM API IE 5.5+
document.getElementById('parent')
  .insertBefore(document.getElementById('orphan'), document.getElementById('c1'));

Removing Elements

// jQuery
$('#foobar').remove();

// DOM API IE 5.5+
document.getElementById('foobar').parentNode
  .removeChild(document.getElementById('foobar'));

Adding & Removing CSS Classes

// jQuery
$('#foo').addClass('bold');

// DOM API, ALL modern browsers, with the exception of IE9
document.getElementById('foo').classList.add('bold');

// All browsers
document.getElementById('foo').className += 'bold';

// jQuery
$('#foo').removeClass('bold');

// DOM API, All modern browsers, with the exception of IE9
document.getElementById('foo').classList.remove('bold');
// DOM API, All browsers
document.getElementById('foo').className =
  document.getElementById('foo').className.replace(/^bold$/, '');

Adding/Removing/Changing Attributes

// jQuery
$('#foo').attr('role', 'button');

// DOM API IE 5.5+
document.getElementById('foo').setAttribute('role', 'button');

// jQuery
$('#foo').removeAttr('role');

// DOM API IE 5.5+
document.getElementById('foo').removeAttribute('role');

Adding & Changing Text Content

// jQuery
$('#foo').text('Goodbye!');

// DOM API, IE 5.5+
document.getElementById('foo').innerHTML = 'Goodbye!';

// DOM API, IE 5.5+ but NOT Firefox
document.getElementById('foo').innterText = 'GoodBye!';

// DOM API, IE 9+
document.getElementById('foo').textContent = 'Goodbye!';

Adding/Updating Element Styles

// jQuery
$('#note').css('fontWeight', 'bold');

// DOM API, IE 5.5+
document.getElementById('note').style.fontWeight = 'bold';

Ajax Requests

GETting

// jQuery
$.ajax('myservice/username', {
    data: {
        id: 'some-unique-id'
    }
})
.then(
    function success(name) {
        alert('User\'s name is ' + name);
    },

    function fail(data, status) {
        alert('Request failed.  Returned status of ' + status);
    }
);

// Native XMLHttpRequest Object
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI('myservice/username?id=some-unique-id'));
xhr.onload = function(){
  if (xhr.status === 200){
    alert('User\'s name is ' + xhr.responseText);
  }
  else {
    alert('Request failed. Returend status of ' + xhr.status);
  }
};
xhr.send();

POSTing

// jQuery
var newName = 'John Smith';

$.ajax('myservice/username?' + $.param({id: 'some-unique-id'}), {
    method: 'POST',
    data: {
        name: newName
    }
})
.then(
    function success(name) {
        if (name !== newName) {
            alert('Something went wrong.  Name is now ' + name);
        }
    },

    function fail(data, status) {
        alert('Request failed.  Returned status of ' + status);
    }
);


// Native XMLHttpRequest Object
var newName = 'John Smith',
    xhr = new XMLHttpRequest();

xhr.open('POST', encodeURI('myservice/username?id=some-unique-id'));
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
    if (xhr.status === 200 && xhr.responseText !== newName) {
        alert('Something went wrong.  Name is now ' + xhr.responseText);
    }
    else if (xhr.status !== 200) {
        alert('Request failed.  Returned status of ' + xhr.status);
    }
};
xhr.send(encodeURI('name=' + newName));

URL Encoding

// jQuery
$.param({
    key1: 'some value',
    'key 2': 'another value'
});


// Native JavaScript
function param(object) {
    var encodedString = '';
    for (var prop in object) {
        if (object.hasOwnProperty(prop)) {
            if (encodedString.length > 0) {
                encodedString += '&';
            }
            encodedString += encodeURI(prop + '=' + object[prop]);
        }
    }
    return encodedString;
}

Sending and Receiving JSON

// jQuery
$.ajax('myservice/user/1234', {
    method: 'PUT',
    contentType: 'application/json',
    processData: false,
    data: JSON.stringify({
        name: 'John Smith',
        age: 34
    })
})
.then(
    function success(userInfo) {
        // userInfo will be a JavaScript object containing properties such as
        // name, age, address, etc
    }
);

// Web API
var xhr = new XMLHttpRequest();
xhr.open('PUT', 'myservice/user/1234');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
    if (xhr.status === 200) {
        var userInfo = JSON.parse(xhr.responseText);
    }
};
xhr.send(JSON.stringify({
    name: 'John Smith',
    age: 34
}));

Uploading Files

// jQuery
var file = $('#test-input')[0].files[0],
    formData = new FormData();

formData.append('file', file);

$.ajax('myserver/uploads', {
    method: 'POST',
    contentType: false,
    processData: false,
    data: formData
});

// jQuery
var file = $('#test-input')[0].files[0];

$.ajax('myserver/uploads', {
    method: 'POST',
    contentType: file.type,
    processData: false,
    data: file
});


// Native JavaScript

var formData = new FormData(),
    file = document.getElementById('test-input').files[0],
    xhr = new XMLHttpRequest();

formData.append('file', file);
xhr.open('POST', 'myserver/uploads');
xhr.send(formData);

var file = document.getElementById('test-input').files[0],
    xhr = new XMLHttpRequest();

xhr.open('POST', 'myserver/uploads');
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);

// jQuery
$.ajax('http://someotherdomain.com', {
    method: 'POST',
    contentType: 'text/plain',
    data: 'sometext',
    beforeSend: function(xmlHttpRequest) {
        xmlHttpRequest.withCredentials = true;
    }
});

// XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://someotherdomain.com');
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.send('sometext');

// For cross-origin requests, some simple logic
// to determine if XDomainReqeust is needed.
if (new XMLHttpRequest().withCredentials === undefined) {
    var xdr = new XDomainRequest();
    xdr.open('POST', 'http://someotherdomain.com');
    xdr.send('sometext');
}

JSONP

// jQuery
$.ajax('http://jsonp-aware-endpoint.com/user', {
    jsonp: 'callback',
    dataType: 'jsonp',
    data: {
        id: 123
    }
}).then(function(response) {
    // handle requested data from server
});

// Native JavaScript
window.myJsonpCallback = function(data) {
    // handle requested data from server
};

var scriptEl = document.createElement('script');
scriptEl.setAttribute('src',
    'http://jsonp-aware-endpoint.com/user?callback=myJsonpCallback&id=123');
document.body.appendChild(scriptEl);

Events

Sending Native (DOM) Events

// jQuery
$(anchorElement).click();

// Web API
anchorElement.click();

Sending Custom Events

// jQuery
$('some-element').trigger('my-custom-event');

// Web API
var event = document.createEvent('Event');
event.initEvent('my-custom-event', true, true);
someElement.dispatchEvent(event);

// Web API
var event = new CustomEvent('my-custom-event', {bubbles: true, cancelable: true});
someElement.dispatchEvent(event);

Listening For Events

// jQuery
$(someElement).on('click', function() {
    // TODO event handler logic
});

// jQuery
$(someElement).click(function() {
    // TODO event handler logic
});

// Web API
someElement.addEventListener('click', function() {
    // TODO event handler logic
});

Removing Event Handlers

var myEventHandler = function(event) {
    // handles the event...
}

// jQuery
$('some-element').off('click', myEventHandler);

// Web API
someElement.removeEventListener('click', myEventHandler);

Modifying Events

Preventing the event from bubbling further up the DOM

// jQuery
$(someEl).on('some-event', function(event) {
    event.stopPropagation();
});

// Web API
someEl.addEventListener('some-event', function(event) {
    event.stopPropagation();
});

Preventing the event from hitting any additional handlers attached to the current element

// jQuery
$(someEl).on('some-event', function(event) {
    event.stopImmediatePropagation();
});

// Web API
someEl.addEventListener('some-event', function(event) {
    event.stopImmediatePropagation();
});

Preventing the event from triggering an action defined by the browser

// jQuery
$(someAnchor).on('click', function(event) {
    event.preventDefault();
});

// Web API
someAnchor.addEventListener('click', function(event) {
    event.preventDefault();
});

Event Delegation

// jQuery
$('#my-list').on('click', 'BUTTON', function() {
    $(this).parent().remove();
});


// Web API
document.getElementById('my-list').addEventListener('click', function(event){
  var clickedEl = event.target;
  if(clickedEl.tagName == 'BUTTON'){
    var listItem = clickedE1.parentNode;
	listItem.parentNode.removeChild(listItem);
  }
});

Keyboard Events

// jQuery
$(document).keydown(function(event) {
  if (event.ctrlKey && event.which == 72) {
    // open help widget
  }
});

// jQuery
$(someElement).keypress(function(event){
  // ...
});

// Web API
document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.which === 72){
    // open help widget
  }
});

// Web API
someElement.addEventListener('keypress', function(event){
  // ...
});

// Web API
someElement.addEventListenner('keyup', function(event){
  // ...
});

Mouse Events

// jQuery's hover event
$('some-element').hover(
  function hoverIn(){
    // mouse is hovering over this element
  },

  function hoverOut(){
    // mouse was hovering over this element, but no longer is
  }
);

// Web API
someEl.addEventListener('mouseover', function(){
  // mouse is hovering over this element
});

someEl.addEventListener('mouseout', function(){
  // mouse was hovering over this element, but no longer is
});

Browser Load Events

// jQuery
$(window).load(function(){
  // page is fully rendered
})

// jQuery
$(document).ready(function(){
  // markup is on the page
});

// jQuery
$(function(){
  // markup is on the page
});

// jQuery
$('img').load(function(){
  // image has successfully loaded
})

$('img').error(function(){
  // image has failed to load
})


// Web API
window.addEventListener('load', function(){
  // page is fully rendered
});

// Web API
document.addEventListener('DOMContentLoaded', function(){
  // markup is on the page
});

// Web API
img.addEventListener('load', function(){
  // image has successfully loaded
});

// Web API
img.addEventListenner('error', function(){
  // image has failed to load
});

Ancient Browser Support

Listening For Events

someElement.attachEvent('onclick', function(){
  // TODO event handler logic
})

function registerHandler(target, type, callback){
  var listenerMethod = target.addEventListener || target.attachEvent,
    eventName = target.addEventListenner ? type : 'on' + type;
  
  listenerMethod.apply(target, eventName, callback);
}

registerHandler(someElement, 'click', function(){
  // TODO event handler logic
});

function unregisterHandler(target, type, callback){
  var removeMethod = target.removeEventListener || target.detachEvent,
    eventName = target.removeEventListener ? type : 'on' + type;
	removeMethod.apply(target, eventName, callback);
}

unregisterHandler(someElement, 'click', someEventHandlerFunction);
  

Form Field Change Events

The Event Object

function myEventHandler(event){
  var actualEvent = event || window.event,
      actualTarget = actualEvent.target || actualEvent.scrElement
}

function myEventHandler(event){
  var actualEvent = event || window.event;

  if (actualEvent.stopPropgation){
    actualEvent.stopPropagation();
  }
  else {
    actualEvent.cancelBubble = true;
  }
}

Utilities

Is this an Object, Array, or a Function?

// jQuery

$.isFunction(someValue);
$.isPlainObject(someValue);
$.isArray(someValue);

// vanilla JavaScript
// is this a function?
typeof someValue === 'function';

// is this an object?
someValue != null && Object.prototype.toString.call(someValue) === "[object Object]";

// works in modern browsers
Array.isArray(someValue);

// works in all browsers
Object.prototype.toString.call(someValue) === "[object Array]";

Combine and copy objects

var o1 = {
        a: 'a',
        b: {
            b1: 'b1'
        }
    },

    o2 = {
        b: {
            b2: 'b2'
        },
        c: 'c'
    };
	
// jQuery: update o1 with the contents of o2
$.extend(true, o1, o2);


// jQuery: creates a new object that is the aggregate of o1 & o2
var newObj = $.extend(true, {}, o1, o2);

// jQuery: create a copy of one of the objects
var copyOfo1 = $.extend(true, {}, o1);

// vanilla JavaScript
function extend(first, second) {
    for (var secondProp in second) {
        var secondVal = second[secondProp];
        // Is this value an object?  If so, iterate over its properties, copying them over
        if (secondVal && Object.prototype.toString.call(secondVal) === "[object Object]") {
            first[secondProp] = first[secondProp] || {};
            extend(first[secondProp], secondVal);
        }
        else {
            first[secondProp] = secondVal;
        }
    }
    return first;
};

// example use - updates o1 with the content of o2
extend(o1, o2);

// example use - creates a new object that is the aggregate of o1 & o2
var newObj = extend(extend({}, o1), o2);

var copyOfO1 = extend({}, o1);

Iterate over object properties

var parentObject = {
    a: 'a',
    b: 'b'
};

var myObject = Object.create(parentObject);
myObject.c = "c";
myObject.d = "d";


// jQuery
$.each(myObject, function(propName, propValue) {
    // handle each property...
});

// vanilla JavaScript
// works in all browsers
for (var prop in myObject) {
    if (myObject.hasOwnProperty(prop)) {
        // deal w/ each property that belongs only to `myObject`...
    }
}

// works in modern browsers
Object.keys(myObject).forEach(function(prop) {
    // deal with each property that belongs to `myObject`...
});

Iterate over array elements

var myArray = ['a', 'b', 'c'];

// jQuery
$.each(myArray, function(arrayIndex, arrayValue) {
    // handle each array item...
});

// vanilla JavaScript
// works in all browsers
for (var index = 0; i < myArray.length; i++) {
    var arrayVal = myrray[index];
    // handle each array item...
}

// works in modern browsers
myArray.forEach(function(arrayVal, arrayIndex) {
    // handle each array item
}

Find an element in an array

var theArray = ['a', 'b', 'c'];


// jQuery
var indexOfValue = $.inArray('c', theArray);

var allElementsThatMatch = $.grep(theArray, function(theArrayValue) {
    return theArrayValue !== 'b';
});

// vanilla JavaScript

// works in modern browsers
var indexOfValue = theArray.indexOf('c');

// works in all browsers
function indexOf(array, valToFind) {
    var foundIndex = -1;
    for (var index = 0; index < array.length; i++) {
        if (theArray[index] === valToFind) {
            foundIndex = index;
            break;
        }
    }
	return foundIndex;
}

// example use
indexOf(theArray, 'c');


// works in modern browsers
var allElementsThatMatch = theArray.filter(function(theArrayValue) {
    return theArrayValue !== 'b';
});

// works in all browsers
function filter(array, conditionFunction) {
    var validValues = [];
    for (var index = 0; index < array.length; i++) {
        if (conditionFunction(theArray[index])) {
            validValues.push(theArray[index]);
        }
    }
}

// use example
var allElementsThatMatch = filter(theArray, function(arrayVal) {
    return arrayVal !== 'b';
})

Turn a pseudo-array into a real array

var realArray = ['a', 'b', 'c'];

var pseudoArray1 = {
    1: 'a',
    2: 'b',
    3: 'c'
    length: 3
};

// jQuery
var realArray = $.makeArray(pseudoArray);

// vanilla JavaScript
var realArray = [].slice.call(pseudoArray);

[].forEach.call(pseudoArray, function(arrayValue) {
    // handle each element in the pseudo-array...
});

Modify a function

1 - Change a function’s context

function Outer() {
    var eventHandler = function(event) {
        this.foo = 'buzz';
    }

    this.foo = 'bar';
    // attach `eventHandler`...
}

var outer = new Outer();
// event is fired, triggering `eventHandler`

// jQuery
function Outer() {
    var eventHandler = $.proxy(function(event) {
        this.foo = 'buzz';
    }, this);

    this.foo = 'bar';
    // attach `eventHandler`...
}

var outer = new Outer();
// event is fired, triggering `eventHandler`

// vanilla JavaScript
// works in modern browsers
function Outer() {
    var eventHandler = function(event) {
        this.foo = 'buzz';
    }.bind(this);

    this.foo = 'bar';
    // attach `eventHandler`...
}

var outer = new Outer();
// event is fired, triggering `eventHandler`

// works in all browsers
function Outer() {
    var self = this,
        eventHandler = function(event) {
            self.foo = 'buzz';
        };

    this.foo = 'bar';
    // attach `eventHandler`...
}

var outer = new Outer();
// event is fired, triggering `eventHandler`

2 - Create a new function with some pre-determined arguments

function log(appId, level, message) {
    // send message to central server
}

// jQuery
var ourLog = $.proxy(log, null, 'master-shake');

// example use
ourLog('error', 'dancing is forbidden!');

// vanilla JavaScript
var ourLog = log.bind(null, 'master-shake');

// example use
ourLog('error', 'dancing is forbidden!');

Trim a string

// jQuery
$.trim('  hi there!   ');


// vanilla JavaScript

// works in modern browsers
'  hi there!   '.trim();

// works in all browsers, but needed in IE 8 and older
'  hi there!   '.replace(/^\s+|\s+$/g, '');

// works in all browsers
function trim(string) {
    if (string.trim) {
        return string.trim();
    }
    return string.replace(/^\s+|\s+$/g, '');
}

Associate data with an HTML element

<div id="one">one</div>
<div id="two">two</div>

// jQuery
// make the elements aware of each other
$('#one').data('partnerElement', $('#two'));
$('#two').data('partnerElement', $('#one'));

// on click, either hide or show the partner element
$('#one, #two').click(function() {
    $(this).data('partnerElement').toggle();
});


// vanilla JavaScript

/ works in all browsers
var data = (function() {
    var lastId = 0,
        store = {};

    return {
        set: function(element, info) {
            var id;
            if (element.myCustomDataTag === undefined) {
                id = lastId++;
                element.myCustomDataTag = id;
            }
            store[id] = info;
        },

        get: function(element) {
            return store[element.myCustomDataTag];
        }
    };
}());

// make the elements aware of each other
var one = document.getElementById('one'),
    two = document.getElementById('two'),
    toggle = function(element) {
        if (element.style.display !== 'none') {
            element.style.display = 'none';
        }
        else {
            element.style.display = 'block';
        }
    };

data.set(one, {partnerElement: two});
data.set(two, {partnerElement: one});

// on click, either hide or show the partner element
// remember to use `attachEvent` in IE 8 and older, if support is required
one.addEventListener('click', function() {
    toggle(data.get(one).partnerElement);
});
two.addEventListener('click', function() {
    toggle(data.get(two).partnerElement);
});


// works only in the latest browsers
// make the elements aware of each other
var weakMap = new WeakMap(),
    one = document.getElementById('one'),
    two = document.getElementById('two'),
    toggle = function(element) {
        if (element.style.display !== 'none') {
            element.style.display = 'none';
        }
        else {
            element.style.display = 'block';
        }
    };

weakMap.set(one, {partnerElement: two});
weakMap.set(two, {partnerElement: one});

// on click, either hide or show the partner element
// remember to use `attachEvent` in IE 8 and older, if support is required
one.addEventListener('click', function() {
    toggle(weakMap.get(one).partnerElement);
});
two.addEventListener('click', function() {
    toggle(weakMap.get(two).partnerElement);
});

// works in all browsers
var data = window.WeakMap ? new WeakMap() : (function() {
    var lastId = 0,
        store = {};

    return {
        set: function(element, info) {
            var id;
            if (element.myCustomDataTag === undefined) {
                id = lastId++;
                element.myCustomDataTag = id;
            }
            store[id] = info;
        },

        get: function(element) {
            return store[element.myCustomDataTag];
        }
    };
}());

Selecting Elements

By ID

By Attribute

By Pseudo-class

Children

Descendants

Excluding Elements

Multiple Selectors

自己做一个 $

DOM Manipulation

Creating Elements

Inserting Elements Before & After

Inserting Elements As Children

Moving Elements

Removing Elements

Adding & Removing CSS Classes

Adding/Removing/Changing Attributes

Adding & Changing Text Content

Adding/Updating Element Styles

Ajax Requests

GETting

POSTing

URL Encoding

Sending and Receiving JSON

Uploading Files

CORS, Cross Origin Resource Sharing (sending cross-domain ajax requests)

JSONP

Events

Sending Native (DOM) Events

Sending Custom Events

Listening For Events

Removing Event Handlers

Modifying Events

Preventing the event from bubbling further up the DOM

Preventing the event from hitting any additional handlers attached to the current element

Preventing the event from triggering an action defined by the browser

Event Delegation

Keyboard Events

Mouse Events

Browser Load Events

Ancient Browser Support

Listening For Events

Form Field Change Events

The Event Object

Utilities

Is this an Object, Array, or a Function?

Combine and copy objects

Iterate over object properties

Iterate over array elements

Find an element in an array

Turn a pseudo-array into a real array

Modify a function

1 - Change a function’s context

2 - Create a new function with some pre-determined arguments

Trim a string

Associate data with an HTML element