TAG添加标签 做了个方法方便调用

一、JS版本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>创建元素</title>

    <script>

    window.onload = function() {

        function addTags(iput, btn, ul, number) {

            var ainput = document.getElementById(iput);

            var aBtn = document.getElementById(btn);

            var Oul = document.getElementById(ul);

            var n = number;

            var n = 4;

            var arrs = [];

            if (typeof(number) == "undefined") {

                n = 4;

            } else {

                n = number;

            }

            aBtn.onclick = function() {

                var newLi = document.createElement('li');

                var aLi = Oul.getElementsByTagName('li'); //选中所有LI

                newLi.innerHTML = '<span>' + ainput.value + '</span>' + '<a href=\"javascript:;\" class=\"del\">删除</a>';

                newLi.className = "classname";

                //判断数组中是否存在的方法

                Array.prototype.S = String.fromCharCode(2);

                Array.prototype.in_array = function(e) {

                    var r = new RegExp(this.S + e + this.S);

                    return (r.test(this.S + this.join(this.S) + this.S));

                };

                //先判断是否存在，再进行操作

                if (arrs.in_array(ainput.value) /*有重复返回ture*/ ) {

                    alert("有重复了");

                } else if (arrs.length > n - 1) {

                    alert('最多' + n + '个');

                } else {

                    arrs.push(ainput.value); //添加到数组

                    Oul.appendChild(newLi); //创建元素

                };

                delLi(btnA); //删除的方法

                ainput.value = ""; //清空input

            }

            var btnA = Oul.getElementsByTagName("a");

            //删除标签方法

            function delLi(e) {

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

                    e[i].onclick = function() {

                        var x = arrs.indexOf(text(this.previousSibling)); //获取兄弟节点的值

                        Oul.removeChild(this.parentNode);

                        arrs.splice(x, 1);

                    }

                }

            };

            //indexof（）兼容写法

            if (!Array.prototype.indexOf) {

                Array.prototype.indexOf = function(ele) {

                    // 获取数组长度

                    var len = this.length;

                    // 检查值为数字的第二个参数是否存在，默认值为0

                    var fromIndex = Number(arguments[1]) || 0;

                    // 当第二个参数小于0时，为倒序查找，相当于查找索引值为该索引加上数组长度后的值

                    if (fromIndex < 0) {

                        fromIndex += len;

                    }

                    // 从fromIndex起循环数组

                    while (fromIndex < len) {

                        // 检查fromIndex是否存在且对应的数组元素是否等于ele

                        if (fromIndex in this && this[fromIndex] === ele) {

                            return fromIndex;

                        }

                        fromIndex++;

                    }

                    // 当数组长度为0时返回不存在的信号：-1

                    if (len === 0) {

                        return -1;

                    }

                }

            }

            //兼容浏览器获取节点文本的方法

            function text(e) {

                var t = "";

                //如果传入的是元素，则继续遍历其子元素

                //否则假定它是一个数组

                e = e.childNodes || e;

                //遍历所有子节点

                for (var j = 0; j < e.length; j++) {

                    //如果不是元素，追加其文本值

                    //否则，递归遍历所有元素的子节点

                    t += e[j].nodeType != 1 ?

                        e[j].nodeValue : text(e[j].childNodes);

                }

                //返回区配的文本

                return t;

            }

        };

        addTags("Input", "Btn", "Oul");

        addTags("Input1", "Btn1", "Oul1", 5);

    }

    </script>

</head>

<body>

    <input type="text" value="" id="Input">

    <input type="button" value="添加" id="Btn">

    <ul id="Oul"></ul>

    <div style="height: 10px; background-color: #000;"></div>

    <input type="text" value="" id="Input1">

    <input type="button" value="添加" id="Btn1">

    <ul id="Oul1"></ul>

</body>

</html>

二、JQUERY版本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery.tag</title>

    <script src="http://www.xybsyw.com/jquery/jquery.min.js"></script>

</head>

<body>

    <script>

    $(function() {

        //添加tag方法

        function addTags(iput, btn, ul, number) {

            var ainput = $('#' + iput);

            var aBtn = $('#' + btn);

            var Oul = $('#' + ul);

            var n = number;

            var n = 4; //默认最多添加4个

            var arrs = []; //tag存在数组中

            //假如没有传number限制个数默认为4个

            if (typeof(number) == "undefined") {

                n = 4;

            } else {

                n = number;

            }

            aBtn.click(function() {

                var newLi = $('<li><span>' + ainput.val() + '</span><a href=\"javascript:;\" class=\"del\">删除</a></li>');

                if (arrs.length >= n) {

                    alert('最多' + n + '个');

                    //return;

                } else {

                    if ($.inArray(ainput.val(), arrs) == -1 && ainput.val() !== "") {

                        arrs.push(ainput.val()); //添加到数组

                        newLi.appendTo(Oul);

                    } else if (ainput.val() == "") {

                        alert("不能为空");

                    } else {

                        alert("有重复了");

                    };

                }

                ainput.val(""); //清空input

                var delBtn = Oul.find("li").find("a.del");

                //删除标签方法

                function delLi(e) {

                    for (var i = 0; i < delBtn.length; i++) { //循环出所有的a

                        e[i].onclick = function() {

                            var x = arrs.indexOf($(this).parent().find("span").text()); //获取兄弟节点的值

                            $(this).parent().remove();

                            arrs.splice(x, 1);

                        }

                    }

//解决Indexof在IE78中不能使用
if (!Array.indexOf) {
Array.prototype.indexOf = function(obj) {
for (var i = 0; i < this.length; i++) {
if (this[i] == obj) {
return i;
}
}
return -1;
}
}

                };

                delLi(delBtn);

            });

        };

        //使用addTag方法

        addTags("Input", "Btn", "Oul");

        addTags("Input1", "Btn1", "Oul1", 5);

    })

    </script>

    //////////////////////第一个//////////////////////////

    <br>

    <input type="text" value="" id="Input">

    <input type="button" value="添加" id="Btn">

    <ul id="Oul"></ul>

    <br> //////////////////////第二个//////////////////////////

    <br>

    <input type="text" value="" id="Input1">

    <input type="button" value="添加" id="Btn1">

    <ul id="Oul1"></ul>

</body>

</html>

添加标签2 jquery 和JS的更多相关文章

  1. win8 tiles风格标签插件jquery.wordbox.js

    http://www.html580.com/12180 jquery.wordbox.js轻松实现win8瓦片tiles式风格标签插件,只需要调用JS就能轻松实现瓦片菜单,自定义菜单背景颜色,支持响 ...

  2. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  3. jquery.validate.js插件使用

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  4. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  5. jQuery表单验证插件——jquery.validate.js

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...

  6. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  7. (转)jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  8. jquery.validate.js 一个jQuery验证格式控件

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  9. jQuery验证控件jquery.validate.js的使用介绍

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

随机推荐

  1. 天津Uber优步司机奖励政策（2月1日~2月7日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. 【转】【阮一峰的网络日志】Git 使用规范流程

    作者: 阮一峰 日期: 2015年8月 5日 团队开发中,遵循一个合理.清晰的Git使用流程,是非常重要的. 否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护. 下面是Th ...

  3. Creating InetAddress object in Java

    I am trying to convert an address specified by an IP number or a name, both in String (i.e. localhos ...

  4. 20169210《Linux内核原理与分析》第八周作业

    第一部分:实验 首先还是网易云课堂的学习,这次的课程是进程的创建和进程的描述. linux进程的状态与操作系统原理中的描述的进程状态有些不同,例如就绪状态和运行状态都是TASK_RUNNING. Li ...

  5. BBC 生命大设计

    BBC霍金的生命的意义一视频中,有一段图案特别漂亮,于是我就写了一下,具体的繁殖规则是这样的:有存活体和死方格两个部分构成,我分别用 ' * ' 和 ‘  ’ 表示.当一个存活体周围有超过三个存活体时 ...

  6. Android MediaPlayer Error/Info Code

    1. 常见错误 error(-38, 0) 我觉得-38表示在当前的MediaPlayer状态下,不能运行你的操作. 详细怎样做请參考:Android MediaPlayer 另外我在其它资料中.发现 ...

  7. C#调用java接口报“Fault occurred while processing”异常问题

    服务在通常项目中总是要用到的C#的webservice.wcf,还有第三方的,比如java服务.一般来说调用都不会有什么问题,因为服务的标准都是一样的.要注意的就是:1.参数个数匹配:2.参数类型和返 ...

  8. 【转】iOS应用崩溃日志揭秘2

    这篇文章还可以在这里找到 英语 场景 4: 吃棒棒糖时闪退! 用户邮件说, "当rage master吃棒棒糖时应用就闪退-" 另一用户说, "我让rage master ...

  9. Java基础知识强化之集合框架笔记50：Map集合之Map集合的概述和特点

    1. Map集合的概述: public interface Map<K,V> 作为学生来说,是根据学号来区分不同的学生的,那么假设我现在已经知道了学生的学号,我要根据学号去获取学生姓名,请 ...

  10. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...