原生javascript取代jquery的一些方法

1.选取元素

 

1 2 3 4 5 6 7 8 9 10

// jQuery var els = $('.el');   // Native var els = document.querySelectorAll('.el');   // Shorthand var $ = function (el) {  return document.querySelectorAll(el); }

querySelectorAll方法返回的是NodeList对象，需要转换为数组。

 

1	myList = Array.prototype.slice.call(myNodeList)

2.创建元素

 

1 2 3 4 5

// jQuery var newEl = $('<div/>');   // Native var newEl = document.createElement('div');

3.添加事件

 

1 2 3 4 5 6 7 8 9 10 11

// jQuery $('.el').on('event', function() {   });   // Native [].forEach.call(document.querySelectorAll('.el'), function (el) {  el.addEventListener('event', function() {    }, false); });

4.get/set属性

 

1 2 3 4 5 6 7

// jQuery $('.el').filter(':first').attr('key', 'value'); $('.el').filter(':first').attr('key');   // Native document.querySelector('.el').setAttribute('key', 'value'); document.querySelector('.el').getAttribute('key');

5.添加和移除样式Class

DOM元素本身有一个可读写的className属性，可以用来操作class。

HTML 5还提供一个classList对象，功能更强大（IE 9不支持）。

 

1 2 3 4 5 6 7 8 9

// jQuery $('.el').addClass('class'); $('.el').removeClass('class'); $('.el').toggleClass('class');   // Native document.querySelector('.el').classList.add('class'); document.querySelector('.el').classList.remove('class'); document.querySelector('.el').classList.toggle('class');

6.追加元素

尾部追加元素：

 

1 2 3 4 5

// jQuery $('.el').append($('<div/>'));   // Native document.querySelector('.el').appendChild(document.createElement('div'));

头部追加元素：

 

1 2 3 4 5 6

//jQuery $(‘.el').prepend('<div></div>')   //Native var parent = document.querySelector('.el'); parent.insertBefore("<div></div>",parent.childNodes[0])

7.克隆元素

 

1 2 3 4 5

// jQuery var clonedEl = $('.el').clone();   // Native var clonedEl = document.querySelector('.el').cloneNode(true);

8.移除元素

 

1 2 3 4 5 6 7 8 9 10 11 12

Remove // jQuery $('.el').remove();   // Native remove('.el');   function remove(el) {  var toRemove = document.querySelector(el);    toRemove.parentNode.removeChild(toRemove); }

9.获取父级元素

 

1 2 3 4 5

// jQuery $('.el').parent();   // Native document.querySelector('.el').parentNode;

10.获取上一个/下一个元素（Prev/next element）

 

1 2 3 4 5 6 7

// jQuery $('.el').prev(); $('.el').next();   // Native document.querySelector('.el').previousElementSibling; document.querySelector('.el').nextElementSibling;

11.XHR and AJAX

 

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

// jQuery $.get('url', function (data) {   }); $.post('url', {data: data}, function (data) {   });   // Native   // get var xhr = new XMLHttpRequest();   xhr.open('GET', url); xhr.onreadystatechange = function (data) {   } xhr.send();   // post var xhr = new XMLHttpRequest()   xhr.open('POST', url); xhr.onreadystatechange = function (data) {   } xhr.send({data: data});

12.清空子元素

 

1 2 3 4 5 6

//jQuery $("#elementID").empty()   //Native var element = document.getElementById("elementID") while(element.firstChild) element.removeChild(element.firstChild);

13.检查是否有子元素

 

1 2 3 4 5

//jQuery if (!$("#elementID").is(":empty")){}   //Native if (document.getElementById("elementID").hasChildNodes()){}

14.$(document).ready

DOM加载完成，会触发DOMContentLoaded事件，等同于jQuery的$(document).ready方法。

 

1 2 3

document.addEventListener("DOMContentLoaded", function() {   // ... });

15.数据储存

jQuery对象可以储存数据。

 

1	$("body").data("foo", 52);

HTML 5有一个dataset对象，也有类似的功能（IE 10不支持），不过只能保存字符串。

 

1 2	element.dataset.user = JSON.stringify(user); element.dataset.score = score;

16.动画

jQuery的animate方法，用于生成动画效果。

 

1	$foo.animate('slow', { x: '+=10px' }

jQuery的动画效果，很大部分基于DOM。但是目前，CSS 3的动画远比DOM强大，所以可以把动画效果写进CSS，然后通过操作DOM元素的class，来展示动画。

 

1	foo.classList.add('animate')

如果需要对动画使用回调函数，CSS 3也定义了相应的事件。

 

1 2	el.addEventListener("webkitTransitionEnd", transitionEnded); el.addEventListener("transitionend", transitionEnded);

 

替代方案

由于jQuery体积过大，替代方案层出不穷。

其中，最有名的是zepto.js。它的设计目标是以最小的体积，做到最大兼容jQuery的API。它的1.0版的原始大小是55KB，优化后是29KB，gzip压缩后为10KB。

如果不求最大兼容，只希望模拟jQuery的基本功能。那么，min.js优化后只有200字节，而dolla优化后是1.7KB。

 此外，jQuery本身也采用模块设计，可以只选择使用自己需要的模块。具体做法参见jQuery的github网站，或者使用专用的Web界面。