var $ = function (args) {
return new Base(args)
}
function Base(args) {
//创建一个数组,来保存获取的节点和节点数组
this.elements = []
if(typeof args =='string'){
switch (args.charAt(0)) {
case '#':
this.getId(args.substring(1))
break;
case '.':
this.getClass(args.substring(1))
break;
default:
this.getTagName(args)
}
}else if(typeof args =='object'){
if(args!=undefined){
this.elements[0]=args
}
}
}
/**
* 设置元素样式
* @param {atrr} 样式属性
* @param {val} 样式属性值
*/
Base.prototype.css = function (atrr, val) {
if(val ==undefined){
var styles=[]
for (let index = 0; index < this.elements.length; index++) {
styles.push(this.getStyle(this.elements[index],atrr))
}
return styles
}
for (let index = 0; index < this.elements.length; index++) {
this.elements[index].style[atrr] = val
}
return this
}
//ID获取节点
Base.prototype.getId = function (id) {
this.elements.push(document.getElementById(id))
return this;
}
//class获取节点
Base.prototype.getClass = function (cls) {
this.elements.push(...document.getElementsByName(cls))
return this;
}
//元素获取节点
Base.prototype.getTagName = function (tag) {
this.elements.push(...document.getElementsByTagName(tag))
return this;
}
//获取元素html
Base.prototype.getHtml = function (str) {
for (let index = 0; index < this.elements.length; index++) {
this.elements[index].innerHTML = str;
}
return this;
}
//设置显示
Base.prototype.show = function () {
for (let index = 0; index < this.elements.length; index++) {
this.elements[index].style.display = 'block';
}
return this;
}
//监听事件
Base.prototype.addEvent=function(obj,eventType,fn,isCapture=false){
if(window.addEventListener){
obj.addEventListener(eventType,fn,isCapture)
}else if(window.attachEvent){
obj.attachEvent('on'+eventType,fn)
}else{
obj['on'+eventType]=fn
}
return this
}
//设置点击切换方法
Base.prototype.toggle=function(){
console.log(this.elements)
for (let index = 0; index < this.elements.length; index++) {
var count=0
var args=arguments
this.addEvent(this.elements[index],'click',function(){
console.log(count)
args[count++%args.length]()
})
}
return this;
}
//设置鼠标移入移除
Base.prototype.hover=function(over,out){
for (let index = 0; index < this.elements.length; index++) {
this.addEvent(this.elements[index],'mouseover',over)
this.addEvent(this.elements[index],'mouseout',over)
}
return this
}
//获取元素属性
Base.prototype.getStyle=function(element,attr){
if(typeof window.getComputedStyle!='undefined'){
return window.getComputedStyle(element,null)[attr];
}else{
//IE
return element.currentStyle[atrr];
}
}
//插件
Base.prototype.extend = function (name, fn) {
Base.prototype[name] = fn;
}
以上是最新的
var $=function(){
return new Base()
}
var Base=function(){
}
///Base.prototype
/*常用工具*/
//兼容模式获取element样式
function getStyle(element,attr){
if(typeof window.getComputedStyle!='undefined'){
return window.getComputedStyle(element,null)[attr];
}else{
//IE
return element.currentStyle[atrr];
}
}
//判断class是否存在
function hasClass(element,className){
//\s 等价 [\f\n\r\v] 匹配任何空白字符{空格、制表符、换页符等}
return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|^$)'))
};
//绑定事件
function addEvent(element,name,fn){
if(element.addEventListener){
//在非IE中会执行这一句,监听多个,指向顺序,按照绑定的顺序
return element.addEventListener(name,fn,false);
}else{
//在ie中执行这一句 监听多个,指向顺序,按照绑定的逆序
return element.attachEvent('on'+name,fn);
}
};
------------------------------以下-----------------------------------------------------------
> // 因为IE旧版本6-8 不支持 DOMContentloaded。 借用document.readyState,模拟
> > DOMContentloaded。
> > //但是当页面有iframe时就无法及时触发了(等到iframe加载完毕readyState的值才会变为complete)
> > DOMContentLoaded仅支持IE9以及更高的浏览器,基本上所有主流浏览器都支持(chrome,oprea,firefox) onreadystatechange支持IE4以上以及所有主流浏览器(同上)(但是我电脑没有IE4,只有IE6,我这里对IE6测试后的兼容还好。)
> doscroll的兼容性为IE8以下的浏览器。
function ieIsComputed() {
document.onreadystatechange=function(){
/*
document.readyState:
uninitialized:未初始化
loading:加载中
interactive:交互中
compute 加载完成,有点浏览器返回 loaded
*/
if(/loaded|complete/.test(document.readyState)){
//
}
};
/*doScroll判断ie6-8的DOM是否加载完成 *
*doScroll判断DOM是否加载完成
*/
function doScroll(){
try{
// DOM树未创建完之前调用doScroll会抛出错误
document.documentElement.doScroll('left');
}
catch(error){
return setTimeout(doScroll,20);
};
//后续代码
};
------------------------------以上是分解过程---------------------------------------------------
// finally
/**
@param fn DOM文档加载完就执行fn回调
*/
function addDomLoaded(fn){
var isReady=false;
var timer=null;
function doReady(){
if(isReady)
return;
isReady=true;
if(timer)
clearInterval(timer);
fn();
}
function doScroll(){
try{
// DOM树未创建完之前调用doScroll会抛出错误
document.documentElement.doScroll('left');
doReady();
}
catch(error){
timer=setTimeout(doScroll,20)
//return setTimeout(doScroll,20);
};
doScroll();
};
}
/*
主流浏览器版本检测
*/
function navigatorVersion(){
window.sysnav={};
var ver;
var nav=navigator.userAgent.toLowerCase();
//因为火狐浏览器也有rv:xxxx,所以判断ie11要/trident.*\brv:([\d.]+)/
(ver=nav.match(/trident.*\brv:([\d.]+)|msie ([\d.]+)/))?sysnav.ie=ver[1]:
(ver=nav.match(/edg\/([\d.]+)/))?sysnav.edge=ver[1]:
(ver=nav.match(/firefox\/([\d.]+)/))?sysnav.fiefox=ver[1]:
(ver=nav.match(/chrome\/([\d.]+)/))?sysnav.chrome=ver[1]:
(ver=nav.match(/opera\/([\d.]+)/))?sysnav.opera=ver[1]:
(ver=nav.match(/Version\/([\d.]+).*safari/))?sysnav=ver[1]:0;
}
//navigatorVersion()
//sysnav