获取节点元素(封装)
效果如下图:
css部分
div {
width: 100px;
height: 100px;
margin: 5px;
background-color: pink;
cursor: pointer;
}
body部分
<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>
<script>
//封装函数
function getEle(str){
var str1 = str.charAt(0);
if(str1 === "#"){
return document.getElementById(str.slice(1));
}else if(str1 === "."){
return document.getElementsByClassName(str.slice(1));
}else{
return document.getElementsByTagName(str);
}
}
//调用一下看看
//1.给ID绑定
var idBox = getEle("#box");
idBox.onclick = function(){
this.style.backgroundColor = "blue";
}
//2.给class绑定
var classArr = getEle(".box");
for(var i=0; i<classArr.length; i++){
classArr[i].onclick = function(){
this.style.backgroundColor= "green";
}
}
//3.给标签绑定
var tagArr = getEle("div");
for(var i=0; i<tagArr.length; i++){
tagArr[i].style.border = "1px solid #999";
}
</script>
如果把 getEle("#box") 函数换成 $("#box") ,这个好像看到了jquery,哈哈哈