mui项目中如何使用原生JavaScript代替jquery来操作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();