获取Dom元素
/**
@selector:类似jq的$，但是不能识别派生选择器。
@parent:父类元素（可选）
*/
//封装一个$函数，可以通过id，标签，还可以类名。
function $(selector,parent){
//判断是否输入对象。
parent = parent ||document;
//截取字符串第一个字符。
var firstChar = selector.charAt(0);
if(firstChar =="#"){//判断是否是通过id
return document.getElementById(str.substring(1));
}else if(firstChar =="."){//判断是否是通过类名
var newStr = selector.substring(1);//截取第一个之后的所有字符
var arrNew = [];//声明一个数组
var arrNew1 = [];//声明一个数组
var arr = parent.getElementsByTagName("*");//获取在对象下的所有标签。
for(var i = 0; i<arr.length;i++){
if(arr[i].className != ""){//判断类不为空的标签
arrNew = arr[i].className.split(" ");//将类转换成数组
if(arrNew.indexOf(newStr) != -1){//找好适配的标签
arrNew1.push(arr[i]);//放入新数组。
}
}
}
return arrNew1;//返回这个数组。
}else{//否则就是通过标签
return parent.getElementsByTagName(selector);
}
}
获取样式表里的样式
/*
@obj:要获取样式的元素
@attr:要获取的样式
*/
//获取样式表里的样式，全兼容。
function getStyle(obj,attr){
//因为currentStyle火狐和谷歌不支持会显示Undefined的，所以放前面，而getComputedStyle这个ie低版本不支持会直接报错。
return obj.currentStyle?obj.currentStyle[attr]:obj.getComputedStyle[attr];
}
添加和移除类名
- 添加(优化原生防止重复添加)
/*
@obj:要添加类的元素
@myClass:要添加的类。
*/
//封装一个添加类的函数
function addClass(obj,myClass){
if(obj.className=="" ){//判断class是否为空
obj.className = myClass;//是，直接给class赋值
}else{
var str = obj.className;//获取class
var arr = str.split(" ");//将class按空格切割，然后装如数组。
if(arr.indexof(myClass) ==-1){//判断是否存有相同的
obj.className += " "+myClass;//没有，就将新的类名 重新赋值给class（类）
}
}
}
- 移除类(优化原生防止重复添加)
/*
@obj:要添加类的元素
@myClass:要添加的类。
*/
//封装一个删除类的函数。
function removeClass(obj,myClass){
if(obj.className != ""){
var str = obj.className;//获取class
var arr = str.split(" ");//将class按空格切割，然后装如数组。
if(arr.indexof(myClass) !=-1){//判断是否存有相同的
arr.splice(arr.indexof(myClass),1);//将存在的删除
obj.className = arr.join(" ");//将删除后数组的值重新赋值给class（类）
}
}
}
阻止事件冒泡
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
<!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
网友评论