工作之中的不足，报了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>

<!-- 写组件的步骤：

 先布局 写css

 创建元素 插入到指定位置

 添加事件

 联动

 隐藏系统元素

 封装

     js

     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('');

window.myRadio = function (name){

    var aRadio = document.getElementsByName(name);

    var aSpan = [];

    //创建span

    for(var i = ; 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 = ; 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('');

    added = true;

    console.log('');

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

    oLink.rel = "stylesheet";

    oLink.href = "myRadio.css";

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

    oHead.appendChild(oLink);

}

})();

js组件的写法的更多相关文章

  1. js 组件的写法

    var Test1 = function(){ var name = ""; this.setName = function(username){ name = username; ...

  2. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  3. JS组件系列——BootstrapTable 行内编辑解决方案：x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

  4. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  5. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  6. JS组件系列——封装自己的JS组件，你也可以

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...

  7. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  8. JS组件系列——Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  9. JS组件系列——分享自己封装的Bootstrap树形组件：jqTree

    前言:之前的一篇介绍了下如何封装自己的组件,这篇再次来体验下自己封装组件的乐趣.看过博主博客的园友应该记得之前分享过一篇树形菜单的使用JS组件系列——Bootstrap 树控件使用经验分享,这篇里面第 ...

随机推荐

  1. [c/c++]指针（4）

    现在讲一下指针的主要用途和常见错误. [用途] 1.用作形参 首先,常见新手写交换函数: void swap(int a,int b){ int t = a; a = b; b = t; } 主函数里 ...

  2. linux下有线网卡出现ADDRCONF(NETDEV_UP): eth0: link is not ready的解决方法

    一.背景 2018年5月24日,笔者的pc已经连续运转两天了,突然要使用有线网卡,却发现有线网卡无法正常工作,于是查看了一下内核日志: r8169 0000:05:00.0 eth0: link do ...

  3. hdu1866 A + B forever!（面积并）题解

    A + B forever! Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  4. java 类构造器中加入有参构造器及调用顺序【思路】

    package com.ykmimi.new1; /** * * @author deadzq * */ public class AnyThing { public AnyThing() { thi ...

  5. POJ 2117 Electricity（割点求连通分量）

    http://poj.org/problem?id=2117 题意:求删除图中任意一个顶点后的最大连通分量数. 思路: 求出每个割点对应的连通分量数,注意这道题目中图可能是不连通的. 这道题目我wa了 ...

  6. Java jdbc访问sqlserver,oracle数据库 DEMO

    1.JDBC访问Oracle数据库 public class Jdbc_Oracle { // 静态代码块,只会执行一次,类似C#静态构造方法 static { try { // 加载数据库驱动一次 ...

  7. Goroutines和Channels（三）

    clock服务器每一个连接都会起一个goroutine.在本节中我们会创建一个echo服务器,这个服务在每个连接中会有多个goroutine.大多数echo服务仅仅会返回他们读取到的内容,就像下面这个 ...

  8. ESXi6.7安装流程和bug处理

    ·前言 ·准备工作 ·安装 ·Initializing IOV卡住 ·缺少网卡驱动 ·安装ESXi6.7 ·Multiboot could not setup the video subsystem ...

  9. tp3.x和tp 5的区别

    由于TP5.0是一个全新的颠覆重构版本,所以现在面试很多面试官喜欢问TP3.2和TP5之间的区别,那他们之间到底有哪些区别呢?一.目录  TP5目录 二.需要摒弃的 3.X 旧思想 模型的变动     ...

  10. Codeforces 101487E - Enter The Dragon

    101487E - Enter The Dragon 思路:做的时候两个地方理解错了,第一个事我以为龙吸了水,水就干了,其实龙是在下雨之前吸的,下雨时湖水又满了,所以湖水永远不会干:第二个是以为只要找 ...