{"attachments":[],"attr":{},"bold":false,"channelId":416,"checked":true,"collectsCount":0,"commentsCount":0,"commentsDay":0,"contentCount":{"collects":0,"collectsDay":0,"collectsMonth":0,"collectsWeek":0,"comments":0,"commentsDay":0,"commentsMonth":0,"commentsWeek":0,"downloads":0,"downloadsDay":0,"downloadsMonth":0,"downloadsWeek":0,"downs":0,"id":101543,"likes":0,"likesDay":0,"likesMonth":0,"likesWeek":0,"ups":0,"upsDay":0,"upsMonth":0,"upsWeek":0,"views":149,"viewsDay":0,"viewsMonth":1,"viewsWeek":0},"contentExt":{"bold":false,"description":"mui项目中如何使用原生JavaScript代替jquery来操作dom","editDate":1622514117000,"id":101543,"releaseDate":1622514117000,"stitle":"mui项目中如何使用原生JavaScript代替jquery来操作dom","title":"mui项目中如何使用原生JavaScript代替jquery来操作dom","tplMobileContent":""},"contentImgWhole":"mui项目中如何使用原生JavaScript代替jquery来操作dom","contentTxt":{"id":101543,"txt":"
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');
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);
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';
jq
$(el).hasClass(className);
**js**
if (el.classList)
el.classList.contains(className);
else
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
jq
$(el).addClass(className);
js
if (el.classList)
el.classList.add(className);
else
el.className += ' ' + className;
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");
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
jq
$.trim(string);
js
string.trim();
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');
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);
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';
jq
$(el).hasClass(className);
**js**
if (el.classList)
el.classList.contains(className);
else
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
jq
$(el).addClass(className);
js
if (el.classList)
el.classList.add(className);
else
el.className += ' ' + className;
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");
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
jq
$.trim(string);
js
string.trim();