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

Tonny 發(fā)布于2019-08-21 11:52 / 3225人閱讀

摘要：在移動(dòng)端兼容性一般問題都不大，基本兼容即可，那不妨我們用原生來完成的一些工作吧以下代碼不一定全部兼容各種移動(dòng)端手機(jī)，只是小試牛刀而已。查找獲取屬性獲取各種高度獲取寬度也是一樣邏輯操作結(jié)構(gòu)操作參考

在移動(dòng)端兼容性一般問題都不大，基本兼容-webkit-即可，那不妨我們用原生js來完成zepto的一些工作吧,以下代碼不一定全部兼容各種移動(dòng)端手機(jī)，只是小試牛刀而已。

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結(jié)構(gòu)操作

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....