下面探讨如何用JavaScript标准语法,取代jQuery的一些主要功能,做到jQuery-free。
DOM操作
DOM本身就具有很丰富的操作方法,可以取代jQuery提供的操作方法。
尾部追加DOM元素。
// jQuery写法
$(parent).append($(child));
// DOM写法
parent.appendChild(child)
头部插入DOM元素。
// jQuery写法
$(parent).prepend($(child));
// DOM写法
parent.insertBefore(child, parent.childNodes[0])
删除DOM元素。
// jQuery写法
$(child).remove()
// DOM写法
child.parentNode.removeChild(child)
document.ready
目前的最佳实践,是将JavaScript脚本文件都放在页面底部加载。这样的话,其实document.ready方法(jQuery简写为$(function))已经不必要了,因为等到运行的时候,DOM对象已经生成了。
attr方法
jQuery使用attr方法,读写网页元素的属性。
$("#picture").attr("src", "http://url/to/image");
DOM元素允许直接读取属性值,写法要简洁许多。
$("#picture").src = "http://url/to/image";
addClass方法
jQuery的addClass方法,用于为DOM元素添加一个class。
$('body').addClass('hasJS');
DOM元素本身有一个可读写的className属性,可以用来操作class。
document.body.className = 'hasJS';
// or
document.body.className += ' hasJS';
HTML 5还提供一个classList对象,功能更强大(IE 9不支持)。
document.body.classList.add('hasJS');
document.body.classList.remove('hasJS');
document.body.classList.toggle('hasJS');
document.body.classList.contains('hasJS');
CSS
jQuery的css方法,用来设置网页元素的样式。
$(node).css( "color", "red" );
DOM元素有一个style属性,可以直接操作。
element.style.color = "red";;
// or
element.style.cssText += 'color:red';
数据储存
jQuery对象可以操作元素上存储的数据,即data-XX属性。
$("body").data("foo", 52);
HTML 5有一个dataset对象,也有类似的功能(IE 10不支持),不过只能保存字符串。
element.dataset.user = JSON.stringify(user);
element.dataset.score = score;
十、Ajax
jQuery的Ajax方法,用于异步操作。
$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
动画
jQuery的animate方法,用于生成动画效果。
$foo.animate('slow', { x: '+=10px' });
jQuery的动画效果,很大部分基于DOM。但是目前,CSS 3的动画远比DOM强大,所以可以把动画效果写进CSS,然后通过操作DOM元素的class,来展示动画。
foo.classList.add('animate');
如果需要对动画使用回调函数,CSS 3也定义了相应的事件。
el.addEventListener("webkitTransitionEnd", transitionEnded);
el.addEventListener("transitionend", transitionEnded);
替代方案
由于jQuery体积过大,替代方案层出不穷。其中,最有名的是zepto.js。
此外,jQuery本身采用模块设计,可以只选择使用自己需要的模块。具体做法参见它的github网站,或者使用专用的Web界面。