jQuery实现tag便签去重效果的方法

2014-12-26  来源:本站原创  分类:jquery  人气:3 

这篇文章主要介绍了jQuery实现tag便签去重效果的方法,较为详细的分析了html页面及js代码的实现技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jQuery实现tag便签去重效果的方法。分享给大家供大家参考。具体实现方法如下:

html代码如下:

<head>

<script type="text/javascript" src="js/jQuery.js"></script>  <!--jquery引用代码-->

<script type="text/javascript" src="js/delRepeat.js"></script> <!--实现去重的js代码-->

</head>

<body>

<input id="repeatValue" type="text" onblur="delRepeat()">

</body>

delRepeat.js代码如下:

复制代码 代码如下:

function delRepeat(){

var str = $('#repeatValue').val();

var strArr=str.split(" ");//把字符串以空格分割成一个数组
var uniqueArr = [];

$.each(strArr, function(i, el){

   if($.inArray(el, uniqueArr) === -1) uniqueArr.push(el);

});

  $('#repeatValue').val(uniqueArr.join(" "));  //再将字符串组合

}

希望本文所述对大家的jQuery程序设计有所帮助。

相关文章
  • jQuery实现tag便签去重效果的方法 2014-12-26

    这篇文章主要介绍了jQuery实现tag便签去重效果的方法,较为详细的分析了html页面及js代码的实现技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery实现tag便签去重效果的方法.分享给大家供大家参考.具体实现方法如下: html代码如下: <head> <script type="text/javascript" src="js/jQuery.js"></script> <!--jquery引用代

  • jQuery使用fadeout实现元素渐隐效果的方法 2013-12-23

    这篇文章主要介绍了jQuery使用fadeout实现元素渐隐效果的方法,实例分析了jQuery中fadeout方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery使用fadeout实现元素渐隐效果的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码演示了jQuery控制色块元素逐渐隐藏的效果,可以控制隐藏速度 <!DOCTYPE html> <html> <head> <script src="js/jquery

  • jquery实现焦点图片随机切换效果的方法 2014-04-09

    这篇文章主要介绍了jquery实现焦点图片随机切换效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现焦点图片随机切换效果的方法.分享给大家供大家参考.具体如下: 1. 运行效果如下图所示: 2.完整实例代码点击此处本站下载. 3.完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c

  • jQuery实现行文字链接提示效果的方法 2014-05-12

    这篇文章主要介绍了jQuery实现行文字链接提示效果的方法,实例分析了jQuery操作文字提示效果的方法,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery实现行文字链接提示效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

  • jQuery实现跟随鼠标运动图层效果的方法 2015-01-14

    这篇文章主要介绍了jQuery实现跟随鼠标运动图层效果的方法,可实现实时显示鼠标坐标的图层跟随鼠标运动的效果,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery实现跟随鼠标运动图层效果的方法.分享给大家供大家参考.具体分析如下: 一.基本目标 写一个跟随鼠标运动的图层, 图层中显示当前鼠标的位置, 如下图所示: 此图层之所以使用jQuery,而不是因为javascript,是因为jQuery的代码其便于兼容当前的所有主流的浏览器,至少IE8是没有任何问题的,不用像javascri

  • Jquery实现地铁线路指示灯提示牌效果的方法 2015-02-11

    这篇文章主要介绍了Jquery实现地铁线路指示灯提示牌效果的方法,实例分析了jQuery动态显示特效的使用技巧,需要的朋友可以参考下 本文实例讲述了Jquery实现地铁线路指示灯提示牌效果的方法.分享给大家供大家参考.具体分析如下: 经常做地铁的朋友应该都有所观察吧,就是地铁开动的时候那个绿色的指示灯从一个方向到另一个方向一直来回走,知道到站了才停止运动,我一直都很想做这样的效果.今天细细琢磨下,总算摸到一点头绪了,并且有效果产生了,虽然还有地方优化,先把代码贴出来.不过,注释的地方代码有点问题

  • jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换 2014-01-01

    jquery实现隐藏显示层动画效果.仿新浪字符动态输入.tab效果等等,以下为所有代码,感兴趣的朋友可以练练手哈,希望对大家学习有所帮助 已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记. 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏

  • 基于jquery插件实现常见的幻灯片效果 2014-08-25

    使用幻灯片效果的网站目前很普遍,本以为很复杂,实现起来却发现很简单,现成的jquery插件jquery.KinSlideshow.js便可实现幻灯片效果 在网站中使用幻灯片效果的目前很普遍,如何实现,自己经过一番研究,本以为很复杂,想不到却很简单.有现成的jquery插件jquery.KinSlideshow.js. 使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果 htm代码: <div id="focusNews" style="visi

  • jQuery实现购物车数字加减效果 2014-12-25

    本文给大家分享的是jQuery实现购物车数字加减效果的3种实现方法,分别是左右加减数字.Bootstrap风格,右侧加减以及jQuery ui风格,右侧加减,效果非常棒,需要的小伙伴来参考下吧. 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法. 左右加减数字 像京东提交订单时目前使用的是左右加减数字的

  • 效能桌面便签 Efficient Sticky Notes 2009-10-27

    Efficient Sticky Notes 网站 : http://cn.efficientsoftware.net/stickynotes/ 软件类型:效能桌面便签 软件性质:免费软件 操作系统:Windows 应用平台:2003/XP/Win2000/ 文件名称:EfficientStickyNotes.exe 版 本:简体中文1.40.0.58版,无插件 软件介绍: 即 时贴扔掉了传统的纸张和开始使用完全免费的高效粘滞便笺! "棒"笔记在桌面上,你可以阅读屏幕上的任何重要信息的

  • js实现类似jquery里animate动画效果的方法 2013-10-15

    这篇文章主要介绍了js实现类似jquery里animate动画效果的方法,实例分析了javascript模拟实现jQuery中animate动画效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover

  • jQuery实现的一个tab切换效果内部还嵌有切换 2013-10-24

    这篇文章主要介绍了jQuery实现的一个tab切换效果,它的特色是内部还嵌有切换,需要的朋友可以参考下 大致效果如图 下面是代码:自己导入jQuery包. 样式: <style type="text/css"> body,ul,li,div,a{margin:0px;padding:0px;} body{margin-top:10px;margin-left:15px;} #all{border-left:1px solid #ccc;border-right:1px so

  • 基于JQuery的数字改变的动画效果--可用来做计数器 2013-11-03

    之前用javascript做个计数器,从网上搜了搜,找不到合适的,就想着用jquery自己做一个 因为要求是动态的,我就想到了应该是位置的变化,想到之前用过的JQuery,把里边的效果全试了试,最后选用了animate自定义,代码如下: <html> <head> <title>testAnimate</title> <script type="text/javascript"> function changeNum(n) {

  • Jquery同辈元素选中/未选中效果的实例代码 2013-11-20

    这篇文章介绍了Jquery同辈元素选中/未选中效果的实例代码,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • jQuery通过扩展实现抖动效果的方法 2013-12-07

    这篇文章主要介绍了jQuery通过扩展实现抖动效果的方法,涉及jQuery扩展的技巧及抖动特效的实现方法,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery通过扩展实现抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 1. JavaScript代码如下: jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Tim

  • jquery使用slideDown实现模块缓慢拉出效果的方法 2013-12-15

    这篇文章主要介绍了jquery使用slideDown实现模块缓慢拉出效果的方法,涉及slideDown方法操作模块展示效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery使用slideDown实现模块缓慢拉出效果的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过按钮控制指定的区域缓慢拉出显示的效果 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.

  • 基于jquery的手风琴图片展示效果实现方法 2014-01-28

    这篇文章主要介绍了基于jquery的手风琴图片展示效果实现方法,涉及jQuery基于事件实现改变css样式的方法,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了基于jquery的手风琴图片展示效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码运行效果如下图所示: index.html页面代码如下: <!DOCTYPE html> <html class=''> <head> <title>一款基于jquery的手风琴图片展示效果demo&l

  • jQuery实现菜单感应鼠标滑动动画效果的方法 2014-02-04

    这篇文章主要介绍了jQuery实现菜单感应鼠标滑动动画效果的方法,实例分析了jQuery中鼠标事件及animate的使用技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上sto

  • 两种方法基于jQuery实现IE浏览器兼容placeholder效果 2014-02-07

    这篇文章主要介绍了两种方法基于jQuery实现IE浏览器兼容placeholder效果,需要的朋友可以参考下 placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m).Firefox( v21.0 ).360安全( v6.3 极速模式 )中,输入栏获得焦点后,提示文字并不消失,如图( Chrome ): 获得焦点前: 获得焦点时: 偏偏IE11要搞点特殊: 获得焦点

  • jQuery实现的原图对比窗帘效果 2014-03-06

    这篇文章主要介绍了jQuery实现的原图对比窗帘效果,需要的朋友可以参考下 效果: HTML代码: <div class="vfx-image-wrap special"> <div class="before-image" style="width: 50%; transition: all 0.3s ease 0s;"> <img alt="" src="js/VFX-before.