添加标签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 使用说明 转载 ...
随机推荐
- mongoDB启动参数备忘
本文转载 Mongodb启动命令mongod参数说明 mongod的主要参数有: 基本配置 ----------------------------------------------- ...
- [学习笔记]设计模式之Singleton
写在前面 为方便读者,本文已添加至索引: 设计模式 魔法手札索引 在前几篇笔记中,我们有了解了部分对象创建型模式,包括Builder(建造者).Abstract Factory(抽象工厂)和Facto ...
- Javascript数据类型——number类型
ECMAScript规范中使用IEEE754格式来表示整数和浮点数.支持十进制.八进制以及十六进制.有一点注意的是八进制数字在严格模式下是无效的,这可能会影响到程序的正常运行. 避免浮 ...
- Hibernate查询之Example查询
org.hibernate.criterion.Example 类允许你通过一个给定实例构建一个条件查询. 此实例的属性值将做成查询条件. Cat cat = new Cat(); cat.setSe ...
- (4/18)重学Standford_iOS7开发_框架和带属性字符串_课程笔记
第四课(干货课): (最近要复习考试,有点略跟不上节奏,这节课的内容还是比较重要的,仔细理解掌握对今后的编程会有很大影响) 本节课主要涉及到Foundation和UIKit框架,基本都是概念与API知 ...
- [TypeScript] Stopping a TypeScript Build When Errors Are Found
TypeScript will always compile even if there are ridiculous errors in your project. This lesson show ...
- mina编解码(摘录)
一.Mina对编解码的支持 我们知道网络通讯过程实际是对二进制数据进行处理的过程,二进制数据是计算机认识的数据.对于接收到的二进制数据我们需要将其转换成我们所熟悉的数据格式,此过程称为解码(decod ...
- ubuntu 14.04 编译安装 nginx
下载源码包 nginx 地址:http://nginx.org/en/download.html 下载nginx 1.4.7 编译前先安装两个包: 直接编译安装会碰到缺少pcre等问题,这时候只要到 ...
- 【bzoj1212】 [HNOI2004]L语言
题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的 ...
- dhcp源码编译支持4G上网卡
1. tar xvzf dhcp-4.2.5-P1.tar.gz 2. ./configure --host=arm-linux ac_cv_file__dev_random=yes 3. vi bi ...