最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的。
虽然jq很简单,但是也有兼容问题,js基础是很重要的,
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();

jq 与原生js 方法互相转换的更多相关文章

  1. 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题

    document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下     ...

  2. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  3. 导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法(vue、jq、原生js)

    一.vue如何实现? 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. 常用原生JS方法总结(兼容性写法)

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  5. 几个原生js方法总结

    一.document.getElementById('emoji').addEventListener('click', function(e) { var emojiwrapper = docume ...

  6. jq 和 原生js进行传输文件ajax请求

    <body> <input id="file_upload" name="file_upload" type="file" ...

  7. HTML DOM对象的属性和方法介绍(原生JS方法)

    HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口), ...

  8. 常用原生JS方法

    备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 1 2 3 4 5 6 7 8 9 addHandler:function(elemen ...

  9. 原生JS 将时间转换成几秒前,几分钟前…常用于评论回复功能

    //格式化时间 留备用~ function getDateDiff(dateStr) { var publishTime = dateStr / 1000, d_seconds, d_minutes, ...

随机推荐

  1. Dorado环境启动出错Spring加载不到资源Bean配置 at org.springframework.asm.ClassReader.<init>(Unknown Source)

    ERROR: org.springframework.web.context.ContextLoader - Context initialization failed org.springframe ...

  2. 【记录】mybatis mapper.xml 基础

    <choose> <when test=""> //... </when> <otherwise> //... </other ...

  3. 82-基于Xilinx Virtex-5LXT FPGA的四路光纤PCIE卡(4路光纤卡)

    基于Xilinx Virtex-5LXT FPGA的四路光纤PCIE卡(4路光纤卡) 1.板卡特点: 1)  主芯片采用Xilinx Virtex-5LXT FPGA. 前面板提供4路光纤接口,速率可 ...

  4. cut 从文本中提取一段文字并输出

    1.命令功能 cut 从每个文件中截取选定部分并输出. 2.语法格式 cut  option  file 参数说明 参数 参数说明 -b (–bytes) 字节 -c (--characters) 字 ...

  5. 035:DTL常用过滤器(4)

    join过滤器: 类似与 Python 中的 join ,将列表/元组/字符串用指定的字符进行拼接.示例代码如下: {{ value|join:"/" }} 如果 value 是等 ...

  6. 用于DataLoader的pytorch数据集

    暂时介绍 image-mask型数据集, 以人手分割数据集 EGTEA Gaze+ 为例. 准备数据文件夹 需要将Image和Mask分开存放, 对应文件的文件名必须保持一致. 提醒: Mask 图像 ...

  7. 吸$DN

    旧博客:https://blog.csdn.net/gmh77 从几年前开始用CSDN,见证了CSDN是如何一步步走向辣鸡的 广告?ABP 登录看文章?雨我无瓜账号常年不退 分类要慢慢点也可以接受 前 ...

  8. BZOJ 2726: [SDOI2012]任务安排 斜率优化 + 凸壳二分 + 卡精

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...

  9. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  10. flask之二

    flask之二 预热 在渲染模板的时候,默认会从项目根路径下的templates目录下查找模板 如果想要指定模板路径的时候,就在初始化APP的时候,这样操作即可: app = Flask(__name ...