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

在移動端兼容性通常問題都不大，基本兼容-webkit-便可，那不妨咱們用原生js來完成zepto的一些工做吧,如下代碼不必定所有兼容各類移動端手機，只是小試牛刀而已。

dom查找

一、$(el).parent()
二、$(el).prev()
三、$(el).next()
四、$(el).last()
五、$(el).first()
六、$(el).siblings()
七、$(el).find(selector)
八、$(el).each(function(i, el){});
//js
一、el.parentNode
二、el.previousElementSibling
三、el.nextElementSibling
四、el.lastElementChild
五、el.children[0]
六、Array.prototype.filter.call(el.parentNode.children, function(child){
  return child !== el;
});
七、el.querySelectorAll(selector)
八、var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){});

獲取dom屬性

一、$(el).html()
二、$(el).val()
三、$(el).attr()
四、$(el).css('border-width', '20px')
//js
一、el.innerHTML
二、el.value
三、el.getAttribute()
四、el.style.borderWidth = '20px'

獲取dom各類高度

獲取寬度也是同樣邏輯
一、$(el).offset().top
二、$(el).scrollTop
三、$(el).Height()
//js
一、var rect = el.getBoundingClientRect()
rect.top + document.body.scrollTop
二、el.getBoundingClientRect().top
三、el.clientHeight

class操做

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

dom結構操做

一、$(el).remove()
二、$(el).clone()
三、$(parent).append()
//js
一、el.parentNode.removeChild(el)
二、el.cloneNode(true)
三、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....