封装常用Javascript功能, 后续持续追加


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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值