移动端原生js代替jq(zepto)

在移动端兼容性一般问题都不大，基本兼容-webkit-即可，那不妨我们用原生js来完成zepto的一些工作吧,以下代码不一定全部兼容各种移动端手机，只是小试牛刀而已。

dom查找

1、$(el).parent()
2、$(el).prev()
3、$(el).next()
4、$(el).last()
5、$(el).first()
6、$(el).siblings()
7、$(el).find(selector)
8、$(el).each(function(i, el){});
//js
1、el.parentNode
2、el.previousElementSibling
3、el.nextElementSibling
4、el.lastElementChild
5、el.children[0]
6、Array.prototype.filter.call(el.parentNode.children, function(child){
  return child !== el;
});
7、el.querySelectorAll(selector)
8、var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){});

获取dom属性

1、$(el).html()
2、$(el).val()
3、$(el).attr()
4、$(el).css('border-width', '20px')
//js
1、el.innerHTML
2、el.value
3、el.getAttribute()
4、el.style.borderWidth = '20px'

获取dom各种高度

获取宽度也是一样逻辑
1、$(el).offset().top
2、$(el).scrollTop
3、$(el).Height()
//js
1、var rect = el.getBoundingClientRect()
rect.top + document.body.scrollTop
2、el.getBoundingClientRect().top
3、el.clientHeight

class操作

1、$(el).addClass('class')
2、$(el).removeClass('class')
3、$(el).toggleClass('class')
4、$(el).hasClass('class')
//js
1、el.classList.add('class')
2、el.classList.remove('class')
3、el.classList.toggle('class')
4、function hasClass(el,className){
    if(el.classList){
        return el.classList.contains(className);
    }else{
        return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
    }
}

dom结构操作

1、$(el).remove()
2、$(el).clone()
3、$(parent).append()
//js
1、el.parentNode.removeChild(el)
2、el.cloneNode(true)
3、parent.appendChild(el)

ajax

$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

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

request.onreadystatechange= function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var resp = this.response;
  } else {
    // We reached our target server, but it returned an error

  }
};

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

request.send();

参考：
http://youmightnotneedjquery....