jQuery与JavaScript写法对比

jQuery是一个很流行的JaVascript库，简化了JavaScript的编程。作为学习，我们可以试试将jQuery的一些用法用原生的JavaScript写出来。

$('#container'); //选择id为"container"的元素并生成新的jQuery对象
JavaScript写法：var container = document.querySelectorAll("#container");
$('#container').find('li'); //选择id为"container"元素的后代"li"元素
JavaScript写法：
var list = document.querySelectorAll("#container li");

$('a').on('click', fn); //在标签a上绑定事件"click"
JavaScript写法：

[].forEach.call( document.querySelectorAll('a'), function(el) {
   el.addEventListener('click', function() {
     //function code
  }, false);
 });

因为querySelectorAll返回静态的NodeList而非数组，所以我们不能直接使用forEach方法，必须在Array对象上使用forEach

$('ul').on('click', 'a', fn); //绑定事件到"ul"标签，但是只在用户触发其子元素"a"时启动事件处理程序
JavaScript写法：
1
2
3
4
5
document.addEventListener('click', function(e) {
if ( e.target.matchesSelector('ul a') ) {
// proceed
}
}, false);
$('#box').addClass('wrap'); //为"#box"添加"wrap"类
JavaScript写法：
1
document.querySelector('#box').classList.add('wrap');
$('#list').next(); //查找选择"#list"的相邻元素
JavaScript写法：
1
var next = document.querySelector('#list').nextSibling;
$('\<div id=box>\</div>').appendTo('body'); //"body"标签添加子元素'\<div id=box>\</div>'
JavaScript写法：
1
2
3
var div = document.createElement('div');
div.id = 'box';
document.body.appendChild(div);

$(document).ready(fn);
JavaScript写法：

1
2
3

document.addEventListener('DOMContentLoaded', function() {
   // have fun
});

'.box').css('color', 'red'); //将".box"的style改为：color: red
JavaScript写法:

1
2
3

[].forEach.call( document.querySelectorAll('.box'), function(el) {
  el.style.color = 'red'; // or add a class
}); //[]也可以写为`Array.prototype`

()
JavaScript写法:

var $ = function(el) {
    return document.querySelectorAll(el);
};
//Usage = $('.box');

JavaScript写法:

var parent = document.querySelectorAll("#wrap");
while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
}