添加标签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 使用说明 转载 ...
随机推荐
- 【转】谁说Vim不是IDE？（一）
谁说Vim不是IDE?(一) 话说操作系统.编程语言和编辑器似乎是程序员永恒的吐槽话题,技术发展了几十年,大家讨论起这几个“之争”还是充满愤怒.津津乐道.有人描述过Emacs和VI程序员,大家沿着 ...
- ASP.NET- 播放视频代码
在网上找的,还不错,支持很多格式.只需要在页面放个lable,建一个放视频文件的文件夹movie,加入代码: protected void Page_Load(object sender, Event ...
- 如何把select出来的一列数据放在第一个单元格
有如下表: STORE_ID | CUSTOMER_ID S001 | C001 S001 | C002 能不能把上表SELECT出来变成下面这种形式: ...
- GridControl 无数据时显示信息
图例: 主要代码如下: 说明:给GridView添加事件gv_CustomDrawEmptyForeground private void gv_CustomDrawEmptyForeground(o ...
- "http-8080-3" java.lang.OutOfMemoryError: PermGen space C3P0死锁的问题
Exception in thread ""http-bio-8080"-exec-1" java.lang.OutOfMemoryError: PermGen ...
- webbrowser selstart selLength
附件:http://files.cnblogs.com/xe2011/Webbrowser_SelStart.rar 1 获得webBrowser光标所在的位置 2 设置webBrowser光标的位置 ...
- careercup-数组和字符串1.7
1.7 编写一个算法,若M*N矩阵中某个元素为0,则将其所在的行与列清零. 类似于leetcode中的 Set Matrix Zeroes C++实现代码: #include<iostream& ...
- eclipse快速查找一个变量、方法或者类被引用的地方
最近不停debug,拿到一个变量之后总是要先概览一下才好下手,之前一直用Ctrl+F来做,太麻烦.今天查了下eclipse使用,发现有快捷键,使用方法: 先双击要查看的变量.方法或者类,使之被选中,然 ...
- plupload使用指南（转）
转自http://www.cnblogs.com/2050/p/3913184.html 现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SWFUpload显然就有点过时了,毕 ...
- ArcGIS 在地图上添加标注
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...