最近在用mui寫頁面，當(dāng)然了在移動(dòng)App里引入jq或zepto這些框架，肯定是極不理性的。
原生JS挺簡單，為何需要jq？
jq的成功當(dāng)時(shí)是因?yàn)閕e6、7、8、9、10、chrome、ff這些瀏覽器不兼容，讓開發(fā)者崩潰，而且pc上瀏覽器性能好，跨平臺(tái)兼容也不影響性能。但jq根本就不是為手機(jī)設(shè)計(jì)的。
手機(jī)上只有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;

創(chuàng)建元素

//jq var newEl = $('<div/>'); //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($('<div/>')); //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';

是否包含某個(gè) class

//jq $(el).hasClass(className); //js if (el.classList)el.classList.contains(className); elsenew RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);　

添加 Class

//jq$(el).addClass(className);//jsif (el.classList)el.classList.add(className); elseel.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這樣較現(xiàn)代的瀏覽器，那么你可以開始使用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);

獲取子節(jié)點(diǎn)

//jq $(el).children(); //js el.children

Trim

//jq $.trim(string); //js string.trim();

參考：
http://youmightnotneedjquery.com/
http://www.quirksmode.org/dom/core/
http://blog.jobbole.com/52195/
http://ourjs.com/detail/535556a1ed9add0e26000002
http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的那些原生JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。