使用原生的JavaScript代替jQuery的操作DOM

来源：互联网发布：推荐高中数学视频软件编辑：程序博客网时间：2024/05/16 05:26

转自 http://www.bcty365.com/content-146-3661-1.html (已修改)

选择元素

//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 = $(‘

’);
//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((‘

’));
//js
document.querySelector(‘.el’).appendChild(document.createElement(‘div’));
克隆
//jq
var clonedEl =

(‘.el′).clone();//jsvarclonedEl=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);//jsif(el.classList)el.classList.contains(className);elsenewRegExp(‘(|)′+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这样较现代的浏览器，那么你可以开始使用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();
//js
el.children
Trim
全选复制放进笔记//jq
$.trim(string);
//js
string.trim();

Set/get属性

附加

//jq
(′.el′).append((‘

’));
//js
document.querySelector(‘.el’).appendChild(document.createElement(‘div’));

克隆

//jq
var clonedEl = (‘.el′).clone();//jsvarclonedEl=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) {

克隆

//jq
var clonedEl = $(‘.el’).clone();
//js
var clonedEl = document.querySelector(‘.el’).cloneNode(true);

移除

//jq
(‘.el′).remove();//jsvartoRemove=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);//jsif(el.classList)el.classList.contains(className);elsenewRegExp(‘(|)′+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,”“);
}

插入 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();

阅读全文

0 0