模拟jquery封装选择器

最新推荐文章于 2024-07-12 09:36:48 发布

zzm_

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量97

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/zeng91/p/5955761.html

版权

<!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>
  <script>
   //测试模拟tquery选择器封装的效果
    
        function btn_click(){
            console.log($("#btnName").val());
        }

        function btn_setValue(){
            $("#btnName").val("hello world");
        }
    
    /*封装的id、class、元素选择器的选择操作*/
    var $=function(selector){
        this.tqObject=new TQObject();
        //id选择器的操作
        if(selector.substring(0,1)=="#"){
            var elem=document.getElementById(selector.substring(1,selector.length));
            tqObject.data.push(elem);//存入tqObject对象的数组中
        }else if(selector.substring(0,1)=='.'){
            //类选择器的操作
            var elems=document.getElementsByTagName('*');//获取页面中的所有元素
            var className=selector.substring(1);//获取className
            var reg=new RegExp("(^|\\s)"+className+"($|\\s)");//定义正则表达式
            for(var i=0;i<elems.length;i++){
                if(reg.test(elems[i].className)){//如果匹配上，则存入tqObject对象的数组中
                    this.tqObject.data.push(elems[i]);
                }
            }
        }else{
            //标签选择器
            var elems=document.getElementsByTagName(selector);
            this.tqObject.data=elems;
        }
        return tqObject;
    }

    /*封装选择器
    *封装TQObject对象，提供一个数组元素，以及若干自定义的操作方法
    *通过封装$("#id|.class|element")来获取元素
    */

    /*封装TQObject对象*/
    var TQObject=function(){
        this.data=[];
    }
   
    TQObject.prototype={
        //TQObject添加原型方法

        //返回data数组的个数
        size:function(){
            return this.data.length;
        },

        //封装innerHTML
        html:function(content){
            if(content){
                //为元素设置html值(xx.innerHTML="")
                for(var i=0;i<this.data.length;i++){
                    //innerHTML兼容性比较好
                    this.data[i].innerHTML=content;
                }
            }else{
                //获取html值(return xx.innerHTML)
                if(this.data.length!=0){
                    return this.data[0].innerHTML;
                }
                return;
            }
        },


        //获得/设置value属性
        val:function(value){
            if(value){
                //为value属性设置值
                for(var i=0;i<this.data.length;i++){
                    this.data[i].value=value;
                    //this.data[i].setAttribute("value",value);
                }
                return this;//为了使用连缀的效果
            }else{
                if(this.data.length!=0){
                    return this.data[0].value;
                    //return this.data[0].getAttribute("value");
                }
            }
        },

        //获得/设置任意属性
        attr:function(name,value){
            //如果有两个参数
            if(name && value){
                for(var i=0;i<this.data.length;i++){
                    //这里只能处理出现在标签中的属性
                    this.data[i].setAttribute(name,value);
                }
                return this;
            }else if(name){
                if(this.data.length!=0){
                    return this.data[0].getAttribute(name);
                }
            }
        },

        //追加样式
        addClass:function(className){
            for(var i=0;i<this.data.length;i++){
                var elem=this.data[i];
                if(elem.getAttribute("class")){
                    //如果有class属性了
                    var oldClassName=elem.getAttribute("class");
                    var newClassName=oldClassName+""+className;
                    elem.setAttribute("class",newClassName);
                }else{
                    //设置class属性
                    elem.setAttribute("class",className);
                }
            }
        },

        //移除样式
        /*removeClass(className)  移除指定样式
          removeClass()           移除所有样式
        */
        removeClass:function(className){
            if(className){
                //删除指定名称的样式
                //<input class="a b c"/>
                for(var i=0;i<this.data.length;i++){
                    var arr=this.data[i].getAttribute("class").split(" ");//得到一个数组
                    var newClassName="";
                    for(var j=0;j<arr.length;j++){
                        if(arr[j]==className){
                            continue;
                        }
                        newClassName+=arr[j]+" ";
                        newClassName=newClassName.substring(0,newClassName.length-1);
                        this.data[i].setAttribute("class",newClassName);
                    }
                    return this;
                }
            }else{
                //移除所有类样式
                for(var i=0;i<this.data.length;i++){
                    this.data[i].setAttribute("class","");
                }
                return this;
            }
        }
    };
  </script>
 </head>

 <body>
  <div class="redBorder" id="myDiv"></div>
  <div class="redBorder"></div>
  <div class="grayBorder"></div>
  <input type='text' id="btnName"/>
  <input type="button" value="测试" onclick="btn_click()"/>
  <input type="button" value="设置值" onclick="btn_setValue()"/>
 </body>
</html>

转载于:https://www.cnblogs.com/zeng91/p/5955761.html

zzm_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟jquery封装选择器

<!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> &...
复制链接

扫一扫