你也许不需要用jquery

jquery是一个了不起的类库,用它可以很容易的开发你的应用,但是在你考虑用它之前,先想一想是否需要引入,如果你只是需要几行简单的js,就能实现你想要的功能,是否还有必要引入一个功能如此丰富的类库吗?

以下这篇文章通过几个实例来实现我们常用的javascript脚本

1 getJSON

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

2 ajax

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

3 fade in

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };

  tick();
}

fadeIn(el);

4 addClass

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

5 after

el.insertAdjacentHTML('afterend', htmlString);

6 append

parent.appendChild(el);

7 before

el.insertAdjacentHTML('beforebegin', htmlString);

8 selector

el.querySelector(selector) !== null

9 each

var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){

});

10 ele.find()

el.querySelectorAll(selector);

11 attr

el.getAttribute('tabindex');

出处:http://youmightnotneedjquery.com/

posted @ 2015-07-21 21:32  一渡  阅读(113)  评论(0)    收藏  举报