首页 > 代码库 > 原生与jqueryDOM

原生与jqueryDOM

2024-08-11 17:26:06   220人阅读

总结与复习原生与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


联系
我们