前端js选择器封装
摘要： 谷歌浏览器的前端开发工具 wps前端开发工具 前端界面开发工具 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <m……
| 谷歌浏览器的前端开发工具 |
| wps前端开发工具 |
| 前端界面开发工具 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<title>documents</title>
<meta name=”description” content=”” />
<meta name=”keywords” content=”” />
<link href=”” rel=”stylesheet” />
<style type=”text/css”>
.box {
height: 100px;
width: 100px;
background: red;
float: left;
margin: 10px;
transition: opacity linear 0.8s;
}
#box {
height: 100px;
width: 100px;
background: yellow;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class=”box”></div>
<div class=”box”></div>
<div class=”box”></div>
<div class=”box”></div>
<div id=”box”></div>
<script type=”text/javascript”>
// class的封装
function $(tar) {
if (tar == undefined) return
if (tar.match(/\./)) {
var classN = tar.split(‘.’)
if (!document.getElementsByClassName) {
console.log(1)
return getClass(classN)
} else {
console.log(2)
return document.getElementsByClassName(classN[1])
}
} else if (tar.match(/\#/)) {
var idTar = tar.split(‘#’)
var getId = document.getElementById(idTar[1])
return getId
} else {
return document.getElementsByTagName(tar)
}
}
function getClass(obj) {
var allTar = document.getElementsByTagName(‘*’)
var arr = []
for (var i = 0; i < allTar.length; i++) {
if (allTar[i].className == obj[1]) {
arr.push(allTar[i])
}
}
return arr
}
//事件监听
var eventUtil = {
addEvent: function(obj, type, fn) {
if (obj.addEventLisenter) {
obj.addEventLisenter(type, fn, false)
} else if (obj.attachEvent) {
obj.attachEvent(‘on’ + type, fn)
} else {
obj[‘on’ + type] = fn
}
},
removeEvent: function() {
if (obj.removeEventLisenter) {
obj.removeEventLisenter(type, fn, false)
} else if (obj.detachEvent) {
obj.detachEvent(‘on’ + type, fn)
} else {
obj[‘on’ + type] = null
}
},
}
eventUtil.addEvent($(‘#box’), ‘click’, function() {
console.log(‘addEventLisenter’)
})
// $(obj).prototype={
// addEvent:function(obj,type,fn){
// if(obj.addEventLisenter){
// obj.addEventLisenter(type,fn,false);
// }else if(ele.attachEvent){
// obj.attachEvent(‘on’+type,fn)
// }else{
// obj[“on”+type]=fn;
// }
// }
// }
// $()prototype.on(type,fn)
// $(obj).onclick=function(){
// }
</script>
</body>
</html>
| 前端h5游戏开发工具 |
| linux前端开发工具 |
| 前端开发是用什么开发工具 |
» 本文来自：前端开发者 » 《前端js选择器封装》
» 本文链接地址：https://www.rokub.com/6367.html
» 您也可以订阅本站：https://www.rokub.com
近期评论