放弃jQuery, 使用原生js
随着IE6、7、8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用。下面介绍几个原生替换jq的方法。
获取元素
//jQuery $('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx p:first'); //第一个P元素 //原生js //querySelector基本上实现了jq选择器同样的功能,具体可以自己测试,另外querySelector返回的是第一个元素,querySelectorAll则返回所有选择的元素。 document.querySelector('.xxx'); //class获取 document.querySelector('#xxx');//id获取 document.querySelector('.xxx.ccc');//同时包含xxx和ccc document.querySelector('.xxx,.ccc');//多选 document.querySelector('.xxx div');//子类 document.querySelector('.xxx p:first-child');//第一个P元素
添加class
//JQuery $('.xxx').addClass('class_name'); //原生js el.classList.add('class_name');
删除class
//JQuery $('.xxx').removeClass('class_name'); //原生js el.classList.remove('class_name');
切换class
//JQuery $('.xxx').toggleClass('class_name'); //原生js el.classList.toggle('class_name');
是否包含某个class
//JQuery $('.xxx').hasClass('class_name'); //原生js el.classList.contains('class_name');
上面是HTML5提供的新的方法,如果你非要为了兼容所谓的IE,可以用下面的这些
//是否包含class function hasClass(o, n){ return new RegExp('\\b'+n+'\\b').test(o.className); }; //添加class function addClass(o, n){ if(!hasClass(o, n)) o.className+=' '+n; }; //删除class function delClass(o, n){ if(hasClass(o, n)){ o.className = o.className.replace(new RegExp('(?:^|\\s)'+n+'(?=\\s|$)'), '').replace(/^\s*|\s*$/g, ''); }; };
插入HTML
//JQuery $(el).before(htmlString); $(parent).append(el); $(el).after(htmlString); //原生js parent.appendChild(el); el.insertBefore(NewDom,ele); ele.insertAdjacentHTML("beforeend", '<li>内容</li>'); //
具体insertAdjacentHTML的介绍,请移步到 这篇文章(点击这里)
获取子节点/父节点
//JQuery $('.xxx').children(); $('.xxx').parent(); //原生js ele.children; ele.parentNode
上一个节点
//JQuery $('.xxx').prev(); //原生js var prev = ele.previousElementSibling || ele.previousSibling
下一个节点
//JQuery $('.xxx').next(); //原生js var next = ele.nextElementSibling || ele.nextSibling
上下节点
//JQuery $(ele).siblings(); //原生js var siblings = Array.prototype.slice.call(el.parentNode.children); for (var i = siblings.length; i--;) { if (siblings[i] === el) { siblings.splice(i, 1); break; }; }; [].forEach.call(el.parentNode.children, function(child){ if(child !== el); });
创建节点
//JQuery var ele = $('<div></div>'); //原生js var ele = document.createElement('div');
删除节点
//JQuery $(ele).remove(); //原生js parent.removeChild(ele);
获取、设置、删除属性
//JQuery $(ele).attr(name,value) //设置 $(ele).attr(name) //获取 $(ele).removeAttr(name) //删除 //原生js ele.setAttribute(name,value);//设置 ele.getAttribute(name);//获取 ele.removeAttribute(name);//删除
Data属性
//JQuery $("body").data("foo", 52); //设置 $("body").data("foo"); //获取 $("body").removeData("foo"); //删除 //原生js ele.dataset.foo = 52 //设置 ele.dataset.foo //获取
获取内容/清空内容
//JQuery var html = $(ele).html(); $(el).empty(); //原生js var html = ele.innerHTML; el.innerHTML = '';
获取文本
//JQuery $(ele).text(); //原生js var txt = ele.textContent || ele.innerText
设置css
//JQuery $(ele).css('height','300px'); $(ele).css({ height:300 }); //原生js ele.style.height = '300px'; ele.style.cssText = 'height:200px;color:red;left:100px;'
显示隐藏
//JQuery $(el).show(); $(el).hide(); //原生js el.style.display = ''; el.style.display = 'none';
元素的内高度[height + padding]/元素的外高度[height + padding + border]
//JQuery $(ele).innerHeight(); $(ele).outerHeight(); //原生js ele.clientHeight; ele.offsetHeight;
元素的位置
//JQuery $(ele).offset().left; $(ele).offset().top; //原生js ele.offsetLeft; ele.offsetTop;
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17