最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的。
原生JS挺简单,为何需要jq?
jq的成功当时是因为ie6、7、8、9、10、chrome、ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能。但jq根本就不是为手机设计的。
手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom。
选择元素
//jq
$('.el');
//js   
document.querySelector("div");
div.querySelectorAll('.el');
//mui
mui(".el")[0];
父、兄弟元素
//jq
$('.el').parent();
$('.el').prev();
$('.el').next();
$('.el').last();
$('.el').first();
//js
document.querySelector('.el').parentNode;
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling; 
document.querySelector(".el").lastElementChild;
document.querySelector(".el").children[0];
获取元素文本
//jq
$('.el').html();
$('.el').val();
$('.el').text();
$(el).replaceWith(string);
//js
document.getElementById('el').innerHTML;
document.getElementById('el').value;
document.getElementById('el').textContent
document.getElementById('el').outerHTML = string;
创建元素
//jq
var newEl = $('

');
//js
var newEl = document.createElement('div');
Set/get属性
//jq
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');
$(el).css('border-width', '20px');
//js
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');
document.querySelector('.el').style.borderWidth = '20px';
附加
//jq
$('.el').append($('

'));
//js 
document.querySelector('.el').appendChild(document.createElement('div'));
克隆
//jq
var clonedEl = $('.el').clone();
//js
var clonedEl = document.querySelector('.el').cloneNode(true);
移除
//jq
$('.el').remove();
// js
var toRemove = document.querySelector(el);
toRemove.parentNode.removeChild(toRemove);
ajax
//jq
$.get('url', function (data) {

});
$.post('url', {data: data}, function (data) {

});
//js
// get
var xhr = new XMLHttpRequest();

xhr.open('GET', url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open('POST', url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});
显示和隐藏
//jq
$(el).show();
$(el).hide();
//js
el.style.display = '';
el.style.display = 'none';
是否包含某个 class
//jq
$(el).hasClass(className);
//js
if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);    
添加 Class
//jq
$(el).addClass(className);
//js
if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;
移除class
//jq
$(el).removeClass(className);
//js
// removeClass, takes two params: element and classname
function removeClass(el, cls) {
  var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
  el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
}

如果你只需要支持像IE10+,Chrome,FireFox,Opera和Safari这样较现代的浏览器,那么你可以开始使用HTML5的classList功能,它让增加和删除类变得更简单
el.classList.add(className);
el.classList.remove("foo")
el.classList.contains("foo");
el.classList.toggle("active");
插入 HTML
//jq
$(el).before(htmlString);
$(parent).append(el);
$(el).after(htmlString);
//js
el.insertAdjacentHTML('beforebegin', htmlString);
parent.appendChild(el);
el.insertAdjacentHTML('afterend', htmlString);
获取子节点
//jq
$(el).children();
//js
el.children
Trim
全选复制放进笔记//jq
$.trim(string);
//js
string.trim();
转自【B5教程网】:http://www.bcty365.com/content-146-3661-1.html

mui项目中如何使用原生JavaScript代替jquery来操作dom 转自【B5教程网】:http://www.bcty365.com/content-146-3661-1.html的更多相关文章

  1. mui项目中如何使用原生JavaScript代替jquery来操作dom

    最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容 ...

  2. 记录下项目中常用到的JavaScript/JQuery代码二(大量实例)

    记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...

  3. 原生 JavaScript 代替 jQuery【转】

    目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

  4. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  5. 1000多个项目中的十大JavaScript错误以及如何避免

    通过统计数据库中的1000多个项目,我们发现在 JavaScript 中最常出现的错误有10个.下面会向大家介绍这些错误发生的原因以及如何防止. 对于这些错误发生的次数,我们是通过收集的数据统计得出的 ...

  6. 记录下项目中常用到的JavaScript/JQuery代码一(大量实例)

    一直没有系统学习Javascript和Jquery,每次都是用到的时候去搜索引擎查,感觉效率挺低的.这边把我项目中用的的记录下,想到哪写哪,有时间再仔细整理. 当然,由于我主要是写后端java开发,而 ...

  7. 原生javascript与jquery 的比较

    JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽 轻量级的脚本语言,比较容易学习 运行在用户机器上,运行结果和处理相对比较快. ...

  8. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  9. 表单美化-原生javascript和jQuery单选按钮(兼容IE6)

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

随机推荐

  1. ES6深入学习记录(一)class方法相关

    今天学习class相关的一些使用方法,着重在于class extends class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多. 上面的代码定义了一 ...

  2. JavaScript零基础学习系列五

    定时器 1.定时器:设定时间,在指定的时间之后执行函数或者是程序   a.反复性定时器:var dingshiqi=Window.setInterval("函数名()",时间n[毫 ...

  3. 文件共享锁定数溢出-IWorkspaceEdit.StopEditing

    在批量保存Feature至本地mdb的时候,当Feature的数量超过一定的值(该值不确定是不是Access文件的MaxLocksPerFile值,因为当MaxLocksPerFile为9500时,F ...

  4. Linux CentOS6.x ip设置(网卡设置)

    修改IP永久生效按以下方法vi /etc/sysconfig/network-scripts/ifcfg-eth0(eth0,第一块网卡,如果是第二块则为eth1)按如下修改ip: DEVICE=et ...

  5. 阿里云免费申请免费SSL证书

    随着互联网的不断进步与发展,对于网站与数据的安全性要求也越来越高,原本的HTTP明文传输已经不被信任,https逐渐被关注,从谷歌.火狐浏览器将对HTTP明文页面标记"不安全",到 ...

  6. SNMP Tutorial

    Applications: Internet Management (SNMP) 30.1 Introduction 30.2 The Level Of Management Protocols 30 ...

  7. redis 操作 hash 的测试

    1>hset setname field value hset stuSet name zhangsan:1        2>hget setname field hget stuset ...

  8. mybatis.net 多表联查

    mybatis.net针对多表联查,其实不用讲联查出的所有的列全部做一个新的resultMap,我们完全可以通过集成关系来实现,真是上一次说的懒加载,在一定程度上可以提高其性能,但这并不是说懒加载性能 ...

  9. xss之渗透测试

    跨站脚本攻击:cross site script execution(通常简写为xss,因css与层叠样式表同名,故改为xss),是指攻击者利用网站程序对用户输入过滤不足,输入可以显示在页面上对其他用 ...

  10. js中数组去除重复项目

    js语法技巧:if(a>=5)  alert();  可以改写成下边语句:  a>=5&&alert(); 在下文中会用到这种写法 // for循环删除后面重复的 速度最快 ...