jq 与原生js 方法互相转换

最近在用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');//muimui(".el")[0];父、兄弟元素//jq$('.el').parent();$('.el').prev();$('.el').next();$('.el').last();$('.el').first();//jsdocument.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);//jsdocument.getElementById('el').innerHTML;document.getElementById('el').value;document.getElementById('el').textContentdocument.getElementById('el').outerHTML = string;创建元素//jqvar newEl = $('');

//jsvar 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');//jsdocument.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'));克隆//jqvar clonedEl = $('.el').clone();//jsvar clonedEl = document.querySelector('.el').cloneNode(true);移除//jq$('.el').remove();// jsvar toRemove = document.querySelector(el);toRemove.parentNode.removeChild(toRemove);ajax//jq$.get('url',function (data) {});$.post('url',{data: data},function (data) {});//js// getvar xhr = new XMLHttpRequest();xhr.open('GET',url);xhr.onreadystatechange = function (data) {}xhr.send();// postvar xhr = new XMLHttpRequest()xhr.open('POST',url);xhr.onreadystatechange = function (data) {}xhr.send({data: data});显示和隐藏//jq$(el).show();$(el).hide();//jsel.style.display = '';el.style.display = 'none';是否包含某个 class//jq$(el).hasClass(className);//jsif (el.classList)  el.classList.contains(className);else  new RegExp('(^| )' + className + '( |$)','gi').test(el.className);　   添加 Class//jq$(el).addClass(className);//jsif (el.classList)  el.classList.add(className);else  el.className += ' ' + className;移除class//jq$(el).removeClass(className);//js// removeClass,takes two params: element and classnamefunction 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);//jsel.insertAdjacentHTML('beforebegin',htmlString);parent.appendChild(el);el.insertAdjacentHTML('afterend',htmlString);获取子节点//jq$(el).children();//jsel.childrenTrim全选复制放进笔记//jq$.trim(string);//jsstring.trim();