添加标签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 使用说明 转载 ...
随机推荐
- modelsim使用命令
1. 常用仿真命令 vlib work // 建立work仿真库 vmap work wrok // 映射库 vlog -cover bcest *.v // 加覆盖率分析的编 ...
- java_method_MD5加密
/** * @param Original String * @return Encrypted String */ public String Md5(String plainText ) { tr ...
- Nice validator领先的表单验证解决方案 转
Nice validator是一个简单智能的Web表单验证插件,可以验证现有的所有格式,比如邮箱地址.电话号码等,您还可以自定义规则验证,插件基于jQuery库,支持多种语言配置. 安装 1.您可以访 ...
- java从mysql导出数据例子
import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...
- <%%>与<%=%>区别
1.<%= %>只能得到当前面定义的值.即你在这个页里有<% int a=100%>--你在下面才可以使用<%=a%>2.${ }这个是el表达式.可以从上下文中得 ...
- 【转载】ABAP-如何读取内表的字段名称
原文地址:ABAP-如何读取内表的字段名称 *&---------------------------------------------------------------------* ...
- 关于wordpress在修改固定链接后，总显示Not Found的问题
参考来源: http://chinablog.blog.51cto.com/276793/280278 一.问题背景 使用wordpress搭建网站,为了让文章URL看起来漂亮一点,wordpress ...
- SharePoint PerformancePoint Service-PowerShell
1. 配置托管服务账户 Set-SPPerformancePointSecureDataValues -ServiceApplication "PerformancePoint Servic ...
- strcmp函数和strcpy函数
(一)strcmp函数 strcmp函数是比較两个字符串的大小,返回比較的结果.一般形式是: i=strcmp(字符串,字符串); 当中,字符串1.字符串2均可为字符串常量或变量:i 是用于存放比 ...
- git 远程 强制合并本地
反过来,如果希望用代码库中的文件完全覆盖本地工作版本. 方法如下: git reset --hard git pull