添加标签2 jquery 和JS
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的更多相关文章
- win8 tiles风格标签插件jquery.wordbox.js
http://www.html580.com/12180 jquery.wordbox.js轻松实现win8瓦片tiles式风格标签插件,只需要调用JS就能轻松实现瓦片菜单,自定义菜单背景颜色,支持响 ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jquery.validate.js插件使用
jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- jQuery表单验证插件——jquery.validate.js
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- (转)jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jquery.validate.js 一个jQuery验证格式控件
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jQuery验证控件jquery.validate.js的使用介绍
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
随机推荐
- 【转】如何实现一个malloc
任何一个用过或学过C的人对malloc都不会陌生.大家都知道malloc可以分配一段连续的内存空间,并且在不再使用时可以通过free释放掉.但是,许多程序员对malloc背后的事情并不熟悉,许多人甚至 ...
- 使用wampserver安装Composer的注意事项
http://getcomposer.org/Composer-Setup.exe 修改C:\wamp\bin\php\php5.3.10中php.ini中的配置 在php.ini中开启php_ope ...
- hdoj 1873 看病要排队【优先队列】
看病要排队 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- 如何引入一个Schema 文件
Schema(掌握如何引入一个schema文件) * 名称空间 : 指的是一个环境,所用的标签来自于哪个环境定义的. * 掌握引用schema文件: xml中引入s ...
- Sublime Text 3 格式代码插件 codeFormatter
一款可以对html.JS.CSS.PHP.python代码格式化的sublime插件 默认快捷键ctrl+alt+F,默认可以对html.js.css格式代码, 如果想对PHP格式化,需要PHP5.6 ...
- ABAP程序的效率(转)
在网上看到的一篇文章: 程序的效率是每个程序员都应该重视的,无论您是采用哪一种语言进行开发. 程序有时候越短,并不一定越快,有时候程序很多代码,但不一定会很慢. 性能是一把双刃剑, 获得时间效率的同时 ...
- 屌丝程序猿赚钱之道 之APP
假设你已经通过APP赚到了钱,那么本文对你而言没有意义.倒是希望你可以给我们诸多建议. 通过制作APP或者说手机应用赚钱,相信是非常多程序猿希望做的事情.也确实有一些人通过APP赚到了钱. 对于程序猿 ...
- Android注解支持(Support Annotations)
注解支持(Support Annotations) Android support library从19.1版本开始引入了一个新的注解库,它包含很多有用的元注解,你能用它们修饰你的代码,帮助你发现bu ...
- HDU-4879-ZCC loves march(map+set+并查集)
Description On a m*m land stationed n troops, numbered from 1 to n. The i-th troop's position can be ...
- 如何获取Android系统中申请对象的信息
最近一直在做有关内存方面的优化工作,在做优化的过程,除了关注内存的申请量以及GC的情况之外,我们经常需要想方法找出是那些对象占用了大量内存,以及他们是如何导致GC的,这意味着我们需要获取对象申请的信息 ...