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

Tonny 发布于2019-08-21 11:52 / 3167人阅读

摘要：在移动端兼容性一般问题都不大，基本兼容即可，那不妨我们用原生来完成的一些工作吧以下代码不一定全部兼容各种移动端手机，只是小试牛刀而已。查找获取属性获取各种高度获取宽度也是一样逻辑操作结构操作参考

在移动端兼容性一般问题都不大，基本兼容-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....

GPU云服务器云服务器 js?移动端滑动移动端适配 js js判断移动端移动端js时间插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87221.html

基于zepto的移动端轻量级日期插件

摘要：本文简单介绍近来写的一款基于的移动端轻量级日期插件。再来看看兼容性对于移动开发足矣最后就是在绑定事件的兼容性问题，不同厂商对于这个事件的定义并不一致，比如里面监听的是事件，但是在安卓里面监听事件完全没反应，经过一番，发现安卓需要监听事件。前言做过移动Web开发的同学都知道，移动端日期选择是很常见的需求。在PC端，我们有很丰富的选择，比较出名的就有Mobiscroll和jQuery ...

ranwu 2019-08-19 17:44 评论0 收藏0
那些原生JavaScript

摘要：最近在用写页面，当然了在移动里引入或这些框架，肯定是极不理性的。原生挺简单，为何需要的成功当时是因为这些浏览器不兼容，让开发者崩溃，而且上浏览器性能好，跨平台兼容也不影响性能。但根本就不是为手机设计的。最近在用mui写页面，当然了在移动App里引入jq或zepto这些框架，肯定是极不理性的。原生JS挺简单，为何需要jq？jq的成功当时是因为ie6、7、8、9、10、chrome、ff...

fantix 2019-08-26 11:29 评论0 收藏0
JS或Jquery

摘要：大潮来袭前端开发能做些什么去年谷歌和火狐针对提出了的标准，顾名思义，即的体验方式，我们可以戴着头显享受沉浸式的网页，新的标准让我们可以使用语言来开发。 VR 大潮来袭 --- 前端开发能做些什么去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 ...

CatalpaFlat 2019-08-22 11:17 评论0 收藏0
移动端-点透问题巧妙解决

摘要：移动端经常出现点透，至于怎么出现的请大家去看一下实现的源码。点透是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件或打开链接。这个被定义为这是一个点透现象。移动端经常出现点透，至于怎么出现的请大家去看一下zepto实现tap的源码。 1、点透是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关...

MockingBird 2019-08-22 15:33 评论0 收藏0
移动端-点透的解决方法

摘要：移动端经常出现点透，至于怎么出现的请大家去看一下实现的源码。点透是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件或打开链接。这个被定义为这是一个点透现象。移动端经常出现点透，至于怎么出现的请大家去看一下zepto实现tap的源码。 1、点透是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关...

cpupro 2019-08-22 15:31 评论0 收藏0