您的位置：首页 > Web前端 > JavaScript

JavaScript基础入门 封装DOM 连缀

2016-10-11 16:09 281 查看
JavaScript基础入门 封装DOM 连缀 适合初学者

获取元素节点

获取ID

获取tagName

获取Name

设置

这个只能是设置CSS样式，添加html方法，添加click方法等。

封装的base.js

//前端调用的对象

var $=function(){

       return new Base();

}

function Base(){//创建一个对象 也是构造函数

//创建一个数组，来保存获取的节点（ID）和节点数组（name,tagName等）

this.elements=[];

/*获取元素节点*/

//获取ID节点

this.getId=function(id){

    /*push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。*/

     this.elements.push(document.getElementById(id)) ;

     return this;

};

//获取tagName

this.getTagName=function(tag){

    //tagName是一个集合 所有要在遍历

    var tag=document.getElementsByTagName(tag);

    for( var i=0;i<tag.length;i++){

    this.elements.push(tag[i]);

}

  eturn this;

};

//获取Name

this.getName=function(nmae){

      //tagName是一个集合 所有要在遍历

      var names=document.getElementsByName(nmae);

      for
4000
( var i=0;i<names.length;i++){

      this.elements.push(names[i]);

      }

   return this;

};

}

/*添加方法*/

//添上CSS方法

Base.prototype.css=function(attr,value){//两个参数 属性和值

   for(var i=0;i<this.elements.length;i++){

   this.elements[i].style[attr]=value;

}

return this

};

//添加innerHTML方法

Base.prototype.html=function(str){

    for(var i=0;i<this.elements.length;i++){

    this.elements[i].innerHTML=str;

}

return this;

};

//添加点击事件

Base.prototype.click=function(fn){

for(var i=0;i<this.elements.length;i++){

this.elements[i].onclick=fn;

}

return this;

};

调用dom.js

window.onload=function(){

 

    //alert(base.getTagName('p').elements.length);

    $().getId('box').css('color','red').css('backgroundColor','black').click(function(){

        alert($().getId('box').html='这是改变自后的文本哦');

    });

    $().getTagName('p').css('color','green').html('改变之后的文本咯');

    //alert($().getName('sex').elements.length);

    $().getName('sex').click(function(){

        alert('我是男生');

    });

};
html 代码

<head>

        <meta charset="utf-8" />

        <title>博客前端  连缀</title>

        <script src="js/base2.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/dome2.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <!--

        实现连缀的功能

        如：获取元的的节点，设计该节点的css样式，已经事件等

        -->

        <div id="box">

            这是测试获取ID的例子

        </div>

        <input type="radio" name="sex" id="sex" value="男"  checked="checked"/>男

        <input type="radio" name="sex" id="sex" value="女"  />女

        <p>测试获取标签的例子</p>

        <p>测试获取标签的例子</p>

        <p>测试获取标签的例子</p>

        <p>测试获取标签的例子</p>

    </body>
效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航