105 css选择器的深入 $("#div div div p")

//demo.js   调用

window.onload = function () {
    // $("#box").find("p").find(".a").css("color","red")  //上一节课find的方法
//$("#box p .a").css("color","red");
   // $("#box ").css("color", "red");多个“ "问题就好出现问题
   // $("#box ").css("color", "red")
   // $("#box #q").css("color", "red")
   // $("#box p").css("color", "red")
    //$("#box .q").css("color", "red")
    $("p .a").css("color", "red")
    $("div div").css("color", "green")
};

//Base.js

var $=function(args)//调用,把this传递过来
{
    return new Base(args);


};
//对象式
function Base(args)
{
    //创建一个数组来获取节点和节点的数组
    this.elements=[];//私有化，不共用
    if(typeof args=="string")//$(".a").css("color","green")这样调用执行这里
    {
        //css模拟
        if(args.indexOf(" ")!=-1)
        {
            var elements=args.split(" ");//把节点分开分别保存到数组
            var childElements=[];//存放临时节点的数组,避免覆盖问题
            var node=[];//用来存放父节点，$("#box  p span").css("color", "red") 因为可能会出现这样的多个父节
           for(var i=0;i<elements.length;i++)
           {
             if(node.length==0) node.push(document);//$("p .a").css("color", "red")针对这种没有父级情况
               switch (elements[i].charAt(0))  //判断数组中各个元素的第一个字符
               {
                   case "#"://调用：$("#box #q").css("color", "red")
                       childElements=[];//每次都清理掉零食节点，以便父节点失效，子节点失效
                       childElements.push(this.getId((elements[i].substring(1))));
                       node=childElements;//保存第一个父节点,因为childElement要清理，所以创建node数组
                       break;
                   case ".":  //调用： $("#box .q").css("color", "red")
                       childElements=[];//每次都清理掉零食节点，以便父节点失效，子节点失效
                       for(var j=0;j<node.length;j++)
                       {

                        //临时数组,elements[i].substring(1) 从第二个字符开始取，去掉"."
                           var temps=this.getClass(elements[i].substring(1),node[j]);

                           for(var k=0;k<temps.length;k++)
                           {
                               childElements.push(temps[k]);
                           }
                       }
                       node=childElements;
                       break;
                   default :  //调用：$("#box p").css("color", "red")
                  childElements=[];//每次都清理掉零食节点，以便父节点失效，子节点失效
                  for(var j=0;j<node.length;j++)
                  {
                     var temps=this.getTagName(elements[i],node[j]);//临时数组


                      for(var k=0;k<temps.length;k++)
                      {
                          childElements.push(temps[k]);
                      }
                   }
                       node=childElements;
               }
            }
            this.elements=childElements;//把临时数组赋值给他，css选择器只需要执行返回一个数值便可
        }
        else //处理$("#box").css()这样的选择器
        {
            //find模拟
            switch (args.charAt(0))
            {
                case "#":
                    this.elements.push(this.getId(args.substring(1)));
                    break;
                case ".":
                    this.elements=this.getClass(args.substring(1));//getClassreturn的是数组所以直接赋值
                    break;
                default :
                    this.elements = this.getTagName(args);//getClassreturn的是数组所以直接赋值
            }
        }


    }
    else if(typeof  args=="object") // $().getClass("a").css("color","red");这样调用就执行这里
    {
        if(args!=undefined)//这里的_this是一个对象，undefined也是个对象，却别typeof放回的带单引号的 “undefined”
        {
            this.elements[0]=args; //把this放到数组的第一个
        }
    }


}
//设置css选择子节点
Base.prototype.find=function(str)
{
    var childElements=[];//临时数组避免和base.element[]冲突
    for(var i=0;i<this.elements.length;i++)
    {
        switch (str.charAt(0))
        {
            case "#":
                childElements.push(this.getId(str.substring(1)));
                break;
            case ".":
              /*  var all=this.elements[i].getElementsByTagName("*");
                for(var j=0;j<all.length;j++)
                {
                    if(all[j].className==str.substring(1))
                    {
                        childElements.push(all[j]);
                    }
                }*/
                var temps = this.getClass(str.substring(1), this.elements[i]);
                for (var j = 0; j < temps.length; j ++) {
                    childElements.push(temps[j]);
                }
                break;
            default :
                var tags=this.elements[i].getElementsByTagName(str);
                for(var j=0;j<tags.length;j++)
                {
                    childElements.push(tags[j]);
                }
        }
    }
    this.elements=childElements;
    return this;
};


//获取ID节点
Base.prototype.getId = function (id) {
    //返回ID节点的本身对象
    return document.getElementById(id);
};
//获取元素节点数组
Base.prototype.getTagName = function (tag, parentNode) {
    var node = null;
    var temps = [];
    if (parentNode != undefined) {
        node = parentNode;
    } else {
        node = document;
    }
    var tags = node.getElementsByTagName(tag);
    for (var i = 0; i < tags.length; i ++) {
        temps.push(tags[i]);
    }
    return temps;
};
//class获取
Base.prototype.getClass=function(className,parentNode)
{
    var node=null;
    var temps=[];//临时数组避免和base.element[]冲突
    if(parentNode!=undefined)
    {
        node=parentNode;
    }
    else
    {
        node=document;
    }
    var all=node.getElementsByTagName("*");
    for(var i=0;i<all.length;i++)
    {
        if(all[i].className==className)
        {
            temps.push(all[i]);//给临时数组添加
        }
    }
    return temps;  //返回临时数组
};
//获取某个节点,并且返回Base对象
Base.prototype.eq=function(num)
{
    var element=this.elements[num];
    this.elements=[];//清空数组
    this.elements[0]=element;//重新赋值
    return this;  //返回如jq的eq（）一样的东西
};


//获取某个节点,并且放回这个节点的对象
Base.prototype.get=function(num)//
{
   return this.elements[num];//返回如jq的get（）一样的东西
};
//设置CSS
Base.prototype.css = function (attr, value) {
    for (var i = 0; i < this.elements.length; i ++) {
        if (arguments.length == 1) {
            return getStyle(this.elements[i], attr);//为什么这里需要return呢
        }
        this.elements[i].style[attr] = value;
    }
    return this;
};
Base.prototype.click=function(fn)
{
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].οnclick=fn;
    }
    return this;
};
//设置innerHtml 获取innerHTML
Base.prototype.html=function(value)
{


    for(var i=0;i<this.elements.length;i++)
    {
        if(arguments.length==0)
        {
            return this.elements[i].innerHTML;
        }
        else
        {
            this.elements[i].innerHTML=value;
        }


    }
    return this;
};
//添加class
Base.prototype.addClass=function(className)
{
    for(var i=0;i<this.elements.length;i++)
    {
        if(!hasClass(this.elements[i],className))//判断是否已经有这个class
        {
            this.elements[i].className+=' '+className;
        }
    }
    return this;
};
//移出class
Base.prototype.removeClass=function(className) //调用方法$().getClass("dd").addClass("a").addClass("b").removeClass("b");
{
    for(var i=0;i<this.elements.length;i++)
    {
        if(hasClass(this.elements[i],className))//判断是否已经有这个class
        {
            this.elements[i].className=this.elements[i].className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),'');
        }
    }
    return this;
};
//添加link或style的css规则,不常用
Base.prototype.addRule=function(num,selectorText,cssText,position) //调用方法， $().addRule(0,"body","background:red",0)
{
    var sheet=document.styleSheets[num];
    if(typeof sheet.insertRule!="undefined")//w3c
    {
        sheet.insertRule(selectorText+"{"+cssText+"}",position);
    }
    else if(typeof  sheet.addRule!="undefined")//iE
    {
        sheet.addRule(selectorText,cssText,position);//sheet.addRule("body","background:red",)
    }
};
//移除link或style的css规则,不常用
Base.prototype.addRule=function(num,index) //调用方法，  $().removeRule(0);
{
    var sheet=document.styleSheets[num];
    if(typeof sheet.deleteRule!="undefined")//w3c
    {
        sheet.deleteRule(index);
    }
    else if(typeof  sheet.removeRule!="undefined")//iE
    {
        sheet.removeRule(index);//sheet.addRule("body","background:red",)
    }
};
//设置hover方法
Base.prototype.hover=function(over,out)
{
    for(var i=0;i<this.elements.length;i++)
    {
      //  this.elements[i].οnmοuseοver=over;
       // this.elements[i].οnmοuseοut=out;
        addEvent(this.elements[i],"mouseover",over);
        addEvent(this.elements[i],"mouseout",out)
    }
    return this;
};
//添加show
Base.prototype.show=function()
{
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].style.display="block"


    }
    return this;
};
//添加hide
Base.prototype.hide=function()
{
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].style.display="none"


    }
    return this;
};
//设置物体居中
Base.prototype.center=function(width,height)
{
    var top=(getInner().height-width)/2;
    var left=(getInner().width-height)/2;
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].style.top=top+"px";
        this.elements[i].style.left=left+"px";
    }
    return this;
};
//触发浏览器窗口事件
Base.prototype.resize = function (fn) {
    for(var i=0;i<this.elements.length;i++)
    {
        var element=this.elements[i];
       /* window.οnresize=function()
        {
            fn();
            if (element.offsetLeft > getInner().width - element.offsetWidth) {
                element.style.left = getInner().width - element.offsetWidth + 'px';
            }
            if (element.offsetTop > getInner().height - element.offsetHeight) {
                element.style.top = getInner().height - element.offsetHeight + 'px';
            }
        }*/
        addEvent(window,"resize",function()
        {
            fn();
            if (element.offsetLeft > getInner().width - element.offsetWidth) {
                element.style.left = getInner().width - element.offsetWidth + 'px';
            }
            if (element.offsetTop > getInner().height - element.offsetHeight) {
                element.style.top = getInner().height - element.offsetHeight + 'px';
            }
        })
    }
    return this;
};
//锁屏功能
Base.prototype.lock=function()
{
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].style.width=getInner().width+"px";
        this.elements[i].style.height=getInner().height+"px";
        this.elements[i].style.display="block";
        document.documentElement.style.overflow = 'hidden';
        addEvent(window,"scroll",scrollTop);
    }


    return this;
};
function scrollTop(){
    document.documentElement.scrollTop=0;// IE W3C
    document.body.scrollTop=0;//火狐
}
Base.prototype.unlock=function()
{
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].style.display="none";
        document.documentElement.style.overflow = 'auto';
        removeEvent(window,"scroll",scrollTop);
    }


    return this;
};
//插件入口
Base.prototype.extend=function(name,fn)
{
    Base.prototype[name]=fn;
};


$().extend("bbb",function(){
   alert("123")
});