js组件的写法

工作之中的不足,报了js培训班,因为工作加班原因缺了几天课(js组件开发),现在拾起来补补

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="智能社 - zhinengshe.com" />

<meta name="copyright" content="智能社 - zhinengshe.com" />

<title>智能社 - www.zhinengshe.com</title>

<!-- 写组件的步骤:

1 先布局 写css

2 创建元素 插入到指定位置

3 添加事件

4 联动

5 隐藏系统元素

6 封装

    1 js

    2 css  -->

<script src="myRadio.js"></script>

<script>

//var added = true;

window.onload = function(){

    myRadio("sex");

    myRadio("city");

};

</script>

</head>

<body>



<form id="form1" action="http://www.zhinengshe.com/" >



    <input type="radio"  name="sex"  value="male"/><input type="radio" name="sex"  value="female"/><input type="radio" name="sex"  value="unknow" />未知

    <br />

    <input type="radio"  name="city"  value="city1"/>city1

    <input type="radio" name="city"  value="city2"/>city2

    <input type="radio" name="city"  value="city3" />city3

    <input type="submit"/>

</form>





</body>

</html>
//版权 北京智能社©, 保留所有权利

(function(){

var added = false;

console.log('1');

window.myRadio = function (name){

    

    var aRadio = document.getElementsByName(name);



    var aSpan = [];

    //创建span

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

        var oSpan = document.createElement("span");

        aSpan.push(oSpan);

        oSpan.className = "my_radio";

        aRadio[i].parentNode.insertBefore(oSpan,aRadio[i]);

        

        (function(index){

            oSpan.onclick = function(){

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

                    aSpan[i].className = "my_radio";

                }    

                this.className = "my_radio_active";

                aRadio[index].checked = true;

            };

        })(i);

        

        aRadio[i].style.display = "none";

    }

    console.log('aaaaaa');

    if(added) return;

    console.log('2');

    added = true;

    console.log('3');

    var oLink = document.createElement("link");

    oLink.rel = "stylesheet";

    oLink.href = "myRadio.css";

    var oHead = document.getElementsByTagName("head")[0];

    oHead.appendChild(oLink);

    

}



})();

js组件的写法

你可能感兴趣的:(js)