vquery 一些应用

Posted 2020-11-05 朝颜陌

// javascript Document

function myAddEvent(obj,sEv,fn){
    if(obj.attachEvent){
        obj.attachEvent(‘on‘+sEv,function(){
            fn.call(obj);    
        });
    }else{
        obj.addEventListener(sEv,fn,false);
    }
}
/*getClassName 完整版*/
function getClassName(oParent,sClass){
    var aEle = oParent.getElementsByTagName(‘*‘);
    var iResult = [];
    /*一般如果需要传递参数就用new RegExp,不用//，//会把里面的所有内容都当场字符串*/
    var re = new RegExp(‘\\b‘+sClass+‘\\b‘);
    for(var i=0;i<aEle.length;i++){
        if(re.test(aEle[i].className)){
            iResult.push(aEle[i]);
        }
    }
    return iResult;
}
function getStyle(obj,attr){

    return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}

function Vquery(vArg){
    this.elements = [];
    switch(typeof vArg){
        case ‘function‘:
                myAddEvent(window,‘load‘,vArg);
            break;
        case ‘string‘:
            switch(vArg.charAt(0)){
                case ‘#‘://id
                    var obj = document.getElementById(vArg.substring(1));
                    this.elements.push(obj);
                    break;
                case ‘.‘://class
                    this.elements = getClassName(document,vArg.substring(1));
                    break;
                default    ://tagname
                    this.elements = document.getElementsByTagName(vArg);
                    break;
            }
            break;
        
        default: /*对象*/
            break;     
    }
}

function $(vArg){
    return new Vquery(vArg);
}

Vquery.prototype.click = function(fn){
    for(var i=0;i<this.elements.length;i++){
        myAddEvent(this.elements[i],‘click‘,fn);
    }
};

Vquery.prototype.css = function(attr,value){
    
    if(arguments.length == 2){ //设置样式
        for(var i=0;i<this.elements.length;i++){
            this.elements[i].style[attr] = value;
        }
    }else{
        return getStyle(this.elements[0],attr);
    }
};


Vquery.prototype.attr=function (attr, value)
{
    if(arguments.length==2)
    {
        var i=0;
        
        for(i=0;i<this.elements.length;i++)
        {
            this.elements[i][attr]=value;
        }
    }
    else
    {
        return this.elements[0][attr];
    }
};

Vquery.prototype.show = function(){
    
    for(var i=0;i<this.elements.length;i++){
            this.elements[i].style.display = ‘block‘;
        }
};

Vquery.prototype.hide = function(){
    
    for(var i=0;i<this.elements.length;i++){
            this.elements[i].style.display = ‘none‘;
        }
};

Vquery.prototype.hover = function(fnover,fnout){
    
    for(var i=0;i<this.elements.length;i++){
        myAddEvent(this.elements[i],‘mouseover‘,fnover);
        myAddEvent(this.elements[i],‘mouseout‘,fnout);
    }
};

Vquery.prototype.toggle = function(){

    var _arguments = arguments;
    for(var i=0;i<this.elements.length;i++){
        addToggle(this.elements[i]);
    }
    
    function addToggle(obj){
        var count = 0; //几个不同的函数就会有几个不同的变量
        myAddEvent(obj,‘click‘,function(){
            _arguments[count%_arguments.length].call(obj);
            count++;
        });
    }
    
};

Vquery.prototype.eq=function (n)
{
    return $(this.elements[n]); //注意这个传递的参数和返回$
};

function appendArr(arr1, arr2)
{
    var i=0;
    
    for(i=0;i<arr2.length;i++)
    {
        arr1.push(arr2[i]);
    }
}

Vquery.prototype.find=function (str)
{
    var i=0;
    var aResult=[];
    
    for(i=0;i<this.elements.length;i++)
    {
        switch(str.charAt(0))
        {
            case ‘.‘:    //class
                var aEle=getByClass(this.elements[i], str.substring(1));
                
                aResult=aResult.concat(aEle);
                break;
            default:    //标签
                var aEle=this.elements[i].getElementsByTagName(str);
                
                //aResult=aResult.concat(aEle); //注意这里是集合，集合没有push方法，数组有
                appendArr(aResult, aEle);
        }
    }
    
    var newVquery=$();
    
    newVquery.elements=aResult;
    
    return newVquery; //对元素的操作实际上就是元素的内容
};

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
 div{width:100px;height:100px;background:red;}
</style>
<script src=‘vQuery.js‘></script>
<script>
/*    
    test function
    new Vquery(function(){
        alert(‘a‘);
    });
    new Vquery(function(){
        alert(‘b‘);
    });

    $(function(){
        alert(‘a‘);
    });
*/
/*
    test click
    $(function(){
        $(‘#box1‘).click(function(){
            alert(‘a‘);
        });
    });
*/

    /*
    test css
    $(function(){
        $(‘#box1‘).css(‘width‘);
    });
    */
    /*
        test show hide
    $(function(){
        $(‘#btn1‘).click(function(){
            $(‘#box1‘).show();
        });
        $(‘#btn2‘).click(function(){
            $(‘#box1‘).hide();
        });
    });
    */
    /*
    test hover
    $(function(){
        $(‘#box1‘).hover(function(){
            document.title = ‘into‘;
        },function(){
            document.title = ‘out‘;
        });
    });
    */
    
    $(function(){
        $(‘#btn3‘).toggle(function(){
            $(‘#box2‘).hide();    
        },function(){
            $(‘#box2‘).show();
        });
    });
    
    
    
</script>
</head>

<body>
<input id="btn1" type="button" value="显示"/>
<input id="btn2" type="button" value="隐藏"/>
<div id="box1"></div>
<input id="btn3" type="button" value="显示隐藏"/>
<div id="box2"></div>
</body>
</html>