原生与jqueryDOM

Posted 2020-08-06

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