标签:
转自:http://itakeo.com/blog/2015/07/28/nojq/
随着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
1 $(‘.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();
原生js
ele.children;
上一个节点
JQuery
$(‘.xxx‘).prev();
原生js
var prev = ele.previousElementSibling || ele.previousSibling
下一个节点
JQuery
$(‘.xxx‘).next();
原生js
var next = ele.nextElementSibling || ele.nextSibling
父节点
JQuery
$(‘.xxx‘).parent();
原生js
ele.parentNode
上下节点
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
$(selector).each(function(i, el){ //xxx });
原生js
[].forEach.call(ele,function(el,i){ //xxx });
克隆节点
JQuery
$(‘.xxx‘).clone(true);
原生js
ele.cloneNode(true)
创建节点
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 //获取 //也可通过attribute方法来设置获取和删除 ele.setAttribute(‘data-foo‘, 52);//设置 ele.getAttribute(‘data-foo‘); //获取 ele.removeAttribute(‘data-foo‘);//删除
获取内容
JQuery
var html = $(ele).html();
原生js
var html = ele.innerHTML;
清空元素内容
JQuery
$(el).empty();
原生js
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;‘
获取css
JQuery
$(obj).css(‘marginLeft‘);
原生js
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,null)[attr]; }; };
显示隐藏
JQuery
$(el).show();
$(el).hide();
原生js
el.style.display = ‘‘;
el.style.display = ‘none‘;
元素的高度(宽度同理)[height]
JQuery
$(ele).height();
原生js
function height(el){ var _height = el.clientHeight; var style = el.currentStyle || getComputedStyle(el); return _height - (parseInt(style.paddingTop) + parseInt(style.paddingBottom)); };
元素的内高度(宽度同理)[height + padding]
JQuery
$(ele).innerHeight();
原生js
ele.clientHeight;
元素的外高度(宽度同理)[height + padding + border]
JQuery
$(ele).outerHeight();
原生js
ele.offsetWidth;
元素的外高度(宽度同理)[height + padding + border + margin]
JQuery
$(ele).outerHeight(true);
原生js
function outerHeight(el){ var style = el.currentStyle || getComputedStyle(el); var height = el.offsetHeight + parseInt(style.marginTop) + parseInt(style.marginBottom); return height; };
元素的位置
JQuery
$(ele).position().left;
$(ele).position().top;
$(ele).offset().left;
$(ele).offset().top;
原生js
ele.offsetLeft; ele.offsetTop; function getposi(obj){ var t = 0,l = 0; while(obj){ t+=obj.offsetTop; l+=obj.offsetLeft; obj = obj.offsetParent; }; return {top:t,left:l}; }; //getposi(ele).left //getposi(ele).top ele.getBoundingClientRect().top + window.pageYOffset; ele.getBoundingClientRect().bottom + window.pageYOffset; ele.getBoundingClientRect().left + window.pageYOffset; ele.getBoundingClientRect().right + window.pageXOffset;
Document Ready 事件
JQuery
$(document).ready(function() { // Code });
原生js
document.addEventListener("DOMContentLoaded", function() { // Code },false);
Document load 事件
JQuery
$(window).load(function() { // Code });
原生js
document.addEventListener("load", function() { // Code },false);
添加事件
JQuery
$(document).click(function(){ //xxx });
原生js
document.onclick = function(){ //XXX };
绑定事件
JQuery
$(ele).on(‘click‘,function(){ //xxx });
原生js
document.addEventListener("click", function() { //xxx },false); [].forEach.call(ele,function(o){ o.addEventListener("click", function() { //xxx },false); });
获取数据类型
JQuery
$.type(obj);
原生js
function type(obj){ return Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, "$1").toLowerCase(); };
判断是否为数组
JQuery
$.isArray(arr);
原生js
function isArray (v){ return Object.prototype.toString.call(v) === ‘[object Array]‘; };
去除字符串两端的空格
JQuery
$.trim(string);
原生js
//去除两端空格 String.prototype.trim = function() { var reExtraSpace = /^\s*(.*?)\s+$/; return this.replace(reExtraSpace, "$1") } /***扩展一下***/ //去除左边空格 String.prototype.ltrim = function() { return this.replace( /^(\s*| *)/, ""); } //去除右边空格 String.prototype.rtrim = function() { return this.replace( /(\s*| *)$/, ""); } //替换全部 String.prototype.replaceAll = function(s1, s2) { return this.replace(new RegExp(s1, "gm"), s2) } //去除所有空格,需要配合上面的替换全部 String.prototype.trimAll = function() { var reExtraSpace = /\s*(.*?)\s+/; return this.replaceAll(reExtraSpace, "$1") }
Cookie
JQuery
$.cookie(‘cookie‘); // 读取 cookie $.cookie(‘cookie‘, ‘value‘); // 存储 cookie $.cookie(‘cookie‘, ‘value‘, { expires: 7 }); // 存储一个带7天期限的 cookie $.cookie(‘cookie‘, ‘‘, { expires: -1 }); // 删除 cookie
原生js
Ajax
JQuery
$.ajax({ type: ‘POST‘, url: ‘/my/url‘, data: data });
原生js
var request = new XMLHttpRequest(); request.open(‘POST‘, ‘/my/url‘, true); request.send(data);
标签:
原文地址:http://www.cnblogs.com/qianduanjingying/p/5432969.html