首页 > 代码库 > 原生与jqueryDOM
原生与jqueryDOM
总结与复习原生与jquery的DOM操作。
获取元素节点:
$(".class")$("#id")$(".class div")$(".class div:first")document.querySelector(‘.class‘);document.querySelector(‘#id‘);document.querySelector(‘.xxx div‘);document.querySelector(‘.class div:first-child‘);document.querySelectorAll(‘li‘)
插入HTML:
$(selector).before(content)$(selector).after(content)$(parent).append(content)parent.appendChild(content)ele.insertBefore(node,ele.childNodes[0]);
获取子节点:
$(".class").childern();ele.childNodes;
获取父节点:
$(selector).parent(); ele.parentNode
获取上下节点:
$(selector).prev() //上一个兄弟节点
$(selector).next() //下一个兄弟节点
ele.previousElementSibling || ele.previousSibling
ele.nextElementSibling || ele.nextSibling
删除节点:
$(selector).remove();parent.removeChild(child);//获取父节点与子节点,通过父节点删除子节点
设置属性:
$(selector).attr(name,value) //设置$(selector).attr(name) //获取$(selector).removeAttr(name) //删除ele.setAttribute(name,value);ele.getAttribute(name);ele.removeAttribute(name);
获取内容:
$(selector).html(); //获取标签全部内容,包括标签$(selector).text();//只获取文本ele.innerHTML;ele.innerText;
设置css:
$(selector).css({ "color":"white", "height":"300px"});ele.style.height = ‘300px‘;ele.style.cssText = ‘height:300px;color:white;‘
获取css:
$(selector).css(‘height‘); function getStyle(obj,attrname){ //原生使用方法 if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,null)[attr]; }; };
元素的位置:
$(selector).offset().left; $(selector).offset().top;ele.offsetLeft; ele.offsetTop;
去除字符串两端空白:
$.trim(string); //去除两端空格 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") }
原生与jqueryDOM
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。