獲取Dom元素
/**
@selector:類似jq的$，但是不能識(shí)別派生選擇器。
@parent:父類元素（可選）
*/
//封裝一個(gè)$函數(shù)从撼，可以通過id况褪，標(biāo)簽，還可以類名撼唾。
function $(selector,parent){
//判斷是否輸入對(duì)象。
parent = parent ||document;
//截取字符串第一個(gè)字符。
var firstChar = selector.charAt(0);
if(firstChar =="#"){//判斷是否是通過id
return document.getElementById(str.substring(1));
}else if(firstChar =="."){//判斷是否是通過類名
var newStr = selector.substring(1);//截取第一個(gè)之后的所有字符
var arrNew = [];//聲明一個(gè)數(shù)組
var arrNew1 = [];//聲明一個(gè)數(shù)組
var arr = parent.getElementsByTagName("*");//獲取在對(duì)象下的所有標(biāo)簽蜒滩。
for(var i = 0; i<arr.length;i++){
if(arr[i].className != ""){//判斷類不為空的標(biāo)簽
arrNew = arr[i].className.split(" ");//將類轉(zhuǎn)換成數(shù)組
if(arrNew.indexOf(newStr) != -1){//找好適配的標(biāo)簽
arrNew1.push(arr[i]);//放入新數(shù)組。
}
}
}
return arrNew1;//返回這個(gè)數(shù)組奶稠。
}else{//否則就是通過標(biāo)簽
return parent.getElementsByTagName(selector);
}
}
獲取樣式表里的樣式
/*
@obj:要獲取樣式的元素
@attr:要獲取的樣式
*/
//獲取樣式表里的樣式俯艰，全兼容。
function getStyle(obj,attr){
//因?yàn)閏urrentStyle火狐和谷歌不支持會(huì)顯示Undefined的锌订，所以放前面竹握，而getComputedStyle這個(gè)ie低版本不支持會(huì)直接報(bào)錯(cuò)。
return obj.currentStyle?obj.currentStyle[attr]:obj.getComputedStyle[attr];
}
添加和移除類名
- 添加(優(yōu)化原生防止重復(fù)添加)
/*
@obj:要添加類的元素
@myClass:要添加的類辆飘。
*/
//封裝一個(gè)添加類的函數(shù)
function addClass(obj,myClass){
if(obj.className=="" ){//判斷class是否為空
obj.className = myClass;//是啦辐，直接給class賦值
}else{
var str = obj.className;//獲取class
var arr = str.split(" ");//將class按空格切割，然后裝如數(shù)組蜈项。
if(arr.indexof(myClass) ==-1){//判斷是否存有相同的
obj.className += " "+myClass;//沒有芹关，就將新的類名 重新賦值給class（類）
}
}
}
- 移除類(優(yōu)化原生防止重復(fù)添加)
/*
@obj:要添加類的元素
@myClass:要添加的類。
*/
//封裝一個(gè)刪除類的函數(shù)紧卒。
function removeClass(obj,myClass){
if(obj.className != ""){
var str = obj.className;//獲取class
var arr = str.split(" ");//將class按空格切割侥衬，然后裝如數(shù)組。
if(arr.indexof(myClass) !=-1){//判斷是否存有相同的
arr.splice(arr.indexof(myClass),1);//將存在的刪除
obj.className = arr.join(" ");//將刪除后數(shù)組的值重新賦值給class（類）
}
}
}
阻止事件冒泡
事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級(jí)元素上跑芳，避免把事件處理器添加到多個(gè)子級(jí)元素上）轴总，它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
![Uploading 阻止事件冒泡_300294.gif . . .]
#father{
width: 300px;
height: 300px;
background-color: aquamarine;
margin: 100px;
}
#son{
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<!--父子-->
<div id="father">
<div id="son"></div>
</div>
</body>
<script>
var father = document.getElementById("father");
var son = document.getElementById("son");
father.onmouseout = function (){
alert("1233");
}
son.onmouseout = function (event){
alert("123");
var event = event||window.event;
if(event.stopPropagation){
event.stopPropagation();
}else{
//IE低版本
event.cancelBubble = true;
}
}
</script>
</html>
組件事件冒泡.gif
