首页 > 代码库 > 原生与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