如何做到 jQuery-free?

下面探讨如何用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界面。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值