mls ntb extc afa 開發 ont 子節點 hang ora

轉載於：http://www.bcty365.com/content-146-3661-1.html

最近在用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 = $(‘<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‘;
是否包含某個 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();

mui項目中如何使用原生JavaScript代替jquery來操作dom