位置:首页 » 教程 » 基于jquery的点击链接插入链接内容的代码

基于jquery的点击链接插入链接内容的代码

日期:2012-08-02 阅读:0num
Advertisement

点击链接插入链接内容。
亮点:
  1.正则匹配<a>标记。
  2.jQuery单击添加,双击删除。
  3.textarea加入换行。
核心代码:

. 代码如下:

<!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">
<head>
<title>Click to Text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="clickContain">
<a href="http://www.jb51.net">脚本之家</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com">QQ</a>
<a href="http://www.sina.com.cn">新浪</a>
<a href="http://www.sina.com.cn">abc</a>
</div>
<div id="textContain">
<textarea rows="10" cols="50"></textarea>
</div>
<script type="text/javascript">
$(document).ready(function(){
var textareaContain = $("#textContain textarea").eq(0);
//单击插入链接
$("#clickContain a").click(function(){
if(!$(this).hasClass('lock')) {
var p = eval('/<a(?:.*)'+$(this).html()+'(?:.*)a>/i');
var addString = $(this).parent().html().match(p); //正则提取<a>标签
if(!!addString) addString = addString[0]+'\n'; //正则匹配后的[0]是全部匹配的值,加入换行\n
textareaContain.val(textareaContain.val()+addString);
$(this).addClass('lock'); //阻止第二次点击
}
return false;
});
//双击删除链接
$("#clickContain a").dblclick(function(){
$(this).attr('class',null); //删除整个class属性,以免出现class=""
var p = eval('/<a(?:.*)'+$(this).html()+'(?:.*)a>(\\n*)/gi');
textareaContain.val(textareaContain.val().replace(p,''));
return false;
});
});
</script>
</body>
</html>

作者:Zjmainstay    
出处:http://www.cnblogs.com/Zjmainstay/

相关文章
  • 基于jQuery鼠标点击碧波动画竖直导航代码 基于jQuery鼠标点击碧波动画竖直导航代码

    基于jQuery鼠标点击水波动画竖直导航代码 基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li&g

  • 基于jQuery+CSS3点击动画片弹出表单代码 基于jQuery+CSS3点击动画片弹出表单代码

    基于jQuery+CSS3点击动画弹出表单代码 分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog&quo

  • 基于jQuery+CSS3点击卡通弹出表单代码 基于jQuery+CSS3点击卡通弹出表单代码

    基于jQuery+CSS3点击动画弹出表单代码 分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog&quo

  • 基于jquery的点击链接插入链接内容的代码

    点击链接插入链接内容. 亮点: 1.正则匹配<a>标记. 2.jQuery单击添加,双击删除. 3.textarea加入换行. 核心代码: . 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht

  • 基于jQuery鼠标点击弹出登陆框成效 基于jQuery鼠标点击弹出登陆框成效

    基于jQuery鼠标点击弹出登陆框效果 基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2">

  • 基于jQuery实现左右div自适应高度完全相同实现代码

    基于jQuery实现左右div自适应高度完全相同实现代码, 浏览器分别为IE(Internet Explorer).NS(Netscape).Opera.FF(FireFox). clientHeight 大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关. offsetHeight IE.Opera 认为 offsetHeight = clientHeig

  • 基于jQuery插件的加载图片与页面特效代码 基于jQuery插件的加载图片与页面特效代码

    加载图片与页面的功能可以利用js来做但写起来复杂了,下文小编整理了一个基于jQuery插件的加载图片与页面特效代码了,这段代码不但简单并且非常的实用同时兼容性也非常的好. 我们使用jQuery的ajax在页面中就像使用iframe一样加载其他页面内容,今天我给大家分享一个名叫jQuery oLoader的插件,该插件还集成了oPageLoader,可以轻松实现加载图片和页面的漂亮效果. oLoader使用方法 不管是oLoader还是oPageLoader都是基于jQuery,所以调用前请先加载

  • 基于jQuery Bar Indicato的进度条展示特效代码

    进度条效果通常使用js实现不过现在的jquery插件越做越强大了,我们找到一款基于jQuery Bar Indicato插件可以直接制作成进度条了,下面来看看. Bar Indicator是一款基于jQuery的进度条数据展示插件,它可应用于数据统计展示.投票统计以及任务进度等诸多场景中.它使用简单.选项丰富,几乎可以满足用户所有基于进度条的WEB设计需求,本文将结合实例给大家讲解Bar Indicator的使用. 首先加载jQuery和Bar Indicator相关js文件以及css文件. <

  • 基于jquery的给文章加入关键字链接

    开始技术部门打算在后台添加或者修改文章的时候,把文章里面的关键字替换为<a>标签.但是这样就出现一些问题 如果新添加一个关键字,是不是所有的文章又要重新过滤一边.把新关键字替换掉. 如果修改了关键字的名字或者是修改了关键字的链接地址,那么又要重新过滤所有文件. 综合了一些情况后,感觉使用后台解决的方案行不通.于是我想到了前台脚本解决 思路: 关键字链接的信息任然存放在数据库中,在数据库中有一些字段来保存关键字的信息. 当用户添加,删除,更新关键字的时候,在后台生成一个js文件,格式如下: 代码

  • 基于jquery实现点击左右按钮图片横向滚动 基于jquery实现点击左右按钮图片横向滚动

    点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: . 代码如下: <!DOCTYPE html> <html lange="en"> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8" /> <style type="text/css"> * { margin:0

  • 基于jQuery实现点击同时更改两个iframe的网址

    个人推荐用jQuery实现,代码简洁,扩展性强. jQuery部分: 代码如下: function gotourl(url_a, url_b) { $('#ifr_a').get(0).src = url_a; $('#ifr_b').get(0).src = url_b; } html调用: <a href="javascript:void(0)" onClick="gotourl('http://g.cn/','http://baidu.com');"&g

  • 基于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"> <head> <meta http-eq

  • 基于jQuery实现左右div自适应高度完全相同的代码

    在线演示:http://demo.jb51.net/js/2012/jquery_demo/jquery_div_autoheihet.htm 完整代码: . 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • 基于Jquery的$.cookie()实现跨越页面tabs导航实现代码

    ---------tabs.js----------------- 代码如下: $(function(){ //init seleted tab var on= $.cookie('current_tab'); if(on!="" && !isNaN(on)) { $(".nav li").eq(on).addClass("on").siblings().removeClass(); } //default tab else {

  • 基于Jquery的开发个代阴影的对话框效果代码

    代码如下: <script type="text/javascript" src="http://img.zzl.com/script/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function() { $("#open").click(function() { openDialog(a1)

  • 基于jquery实现的可编辑下拉框实现代码 基于jquery实现的可编辑下拉框实现代码

    原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示这种字体,但可以通过一些其他方法实现,大家可以自己尝试下.下面是html代码 <span style="display:inline-block;positio

  • 基于jquery的DIV随滚动条滚动而滚动的代码

    核心代码: . 代码如下: <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function() { var top = $(win

  • jquery判断点击事件是否指定区域

    本文章给各位同学介绍一个jquery判断点击事件是否指定区域实例测试,各位朋友可参考,很多时候需要在鼠标点击非目标区域div将目标div隐藏的效果,这是需要判断点击事件是否在目标区域内, jquery的实现方法是:(最近更新,未测) 代码如下 复制代码 $(document).click(function(e){ e = window.event || e; // 兼容IE7 obj = $(e.srcElement || e.target); if ($(obj).is("#elem,#ele

  • 基于jquery ui的autocomplete(乱码处理,上拉列表内容) 基于jquery ui的autocomplete(乱码处理,上拉列表内容)

    基于jquery ui的autocomplete(乱码处理,下拉列表内容) 最终效果图: 所需jar包列表:commons-beanutils-1.8.3.jar,commons-collections-3.2.1.jar,commons-lang-2.5.jar,commons-logging-1.1.1.jar,ezmorph-1.0.6.jar,json-lib-2.1.jar jquery.ui.autocomplete.js 关键的地方已经写了注释 /* * jQuery UI Aut

  • 应用Jquery模拟点击链接

    使用Jquery模拟点击链接 错误的写法: $('#audit').click(); 正确的写法: $('#audit').get(0).click(); 注意:jquery对象和DOM对象的区别. 1.Jquery对象-->Dom对象 var jueryObj=$('jqueryObj'); var domObj=jueryObj.get(0); 或 var domObj=jqueryObje[0]; 2.Dom对象-->Jquery对象 var domObj=document.getEle

最新文章
  • 关于 Material Design 的一些问题

    新学 Android 没多久,就想用用最近比较火的 Material Design 来设计个 app .一般带侧滑栏的 app 主页面部分(除去侧滑栏)大多用 fragment 控制吗还是单单放在 activity 上比较好?有没有相关的开源 app 可以供参考?愁死我啦... --cut-- Drops在2016-05-09 18:35:39回答到: 开源的有用 fragment 也有用 activity 的,你直接搜索 navigation drawer 就能搜出一些开源的 app , Go

  • 【存】给Python 安装并编译第三方模块的一点小折腾

    安装第三方模块的方法很多,python文档中标准的方法是用 distutils并结合setup.py完成.还有一种方法是我在安装IPython的时候看到的,安装distribute,然后使用easy_install直接从PyPI远程下载安装. 昨天下午就是这么折腾把IPython和它的各种dependencies安装上咯.我的系统是win7,编译器使用mingw32. 之后我需要使用一个叫做svmlight的科学计算模块.开始我使用easy_install但是不起作用.也不知到底发生了什么. 后

  • oppo r7s怎么截图? oppo r7s怎么截图?

    oppo r7s是一款由oppo官方最新发售的手机产品,对于一些刚刚入手oppoR7手机的新手用户来说,不知道如何使用oppo r7s截取屏幕中的图像,故此河东软件园小编为大家提供了四种不同的截图方式,需要的用户赶快学习下吧! oppo r7s截图方法 方法一:快捷键组合 "电源键"加"音量减键",一起按住即可轻松截屏. 方法二:手势截屏 进入"设置"--"常规"--"手势体感"--将"三指截屏&

  • 我是歌手第三季张靓颖最新发型 我是歌手第三季张靓颖最新发型

    张靓颖时尚发型 1 半扎发公主头 在<我是歌手3>的舞台上,最瞩目的当然是张靓颖了,可以说是超女中最完美的蜕变,穿着与发型都特别的明星范,一袭蓝色抹胸长裙搭配优雅温婉的半扎发,蓬松而丰满的长卷发披在肩上,充满梦幻感. 张靓颖时尚发型 2 中分长卷发 在第二期<我是歌手3>的淘汰赛中,张靓颖以一曲<饿狼传说>夺冠,发型为整体的造型加分不少,中分的大波浪长卷发,尽显成熟魅惑的女人味,随意的发丝随风而动,尽显狼感"野"性. 张靓颖时尚发型 3 慵懒扎发 张

  • 防强奸的内衣:配备全球定位系统 防强奸的内衣:配备全球定位系统

    来自金奈的3名女汽车工程师发明一种配备全球定位系统模块的女性内衣,能够在女性遭到侵犯时通知其家人和警察,并向歹徒发射高压电流. 其中一名工程师玛尼莎·莫汉说:"该产品配备全球定位系统(GPS)模块和GSM移动通信模块,安装压力感应器,能够释放高达上千伏的瞬间冲击波,电流最多能发射82次,还能及时向女孩的家长和警察发出警报."她表示,这一设备能够让女性放心应对公交车和公共场合可能发生的安全状况,而不必像此前那样不敢求助于执法人员.

  • Apple Watch与iPhone6/6 Plus/5S/5配对教程 Apple Watch与iPhone6/6 Plus/5S/5配对教程

    步骤一 首先,你的iPhone上要升级到iOS8.2以上(同时必须是iPhone5以上的机型) ,也就是说在你的iPhone界面上会出现一个Apple Watch应用,该应用是用来与你的Apple Watch配对的,而且从中可以下载一些与手表相关的应用,顺带一提该应用无法卸载. 在iPhone里进入"设置"应用,点击"通用",然后再点击"软件更新"即可,推荐在Wi Fi下更新,并且保持电源在50%以上,更新前请别忘备份. 步骤二 请把Apple

  • 手把手教APP接入直播功能 手把手教APP接入直播功能

    随着网络技术的迅猛发展,网络直播已不再遥不可及.各行各业以直播为基础的应用场景更是如雨后春笋,遍地开花,相关数据也显示,无论是国内还是国外,市场需求层出不穷,不仅包含视频门户.视频社交.在线教育.娱乐直播,企业视频协作.新闻媒体.金融.监控以及医疗等各行业均存在巨大的视频需求.由此,也催生出很多帮助这些行业实现直播功能的第三方云服务平台,接入成本不到开发者自己开发的十分之一,相比自主研发,外包直播模块成为大多数开发者的首选. 如图所示,从2015年下半年开始,各大巨头纷纷发力视频云服务,推出直播

  • 我无法忘却你离别的 背影

    我无法忘 却 你离别的 背影 昏暗的 角 落 ... 我 等你归来 * [Rmore... [ftc=#37B400][fts=3]我[/ft][/ft][ftc=#5573B7]无法[/ft][ftc=#EF6EA8][fts=4]忘[/ft] [/ft] [ftc=#F16522]却[/ft] [ftc=#8FC63D]你[/ft][fts=6][ftc=#8FC63D]离[/ft][ftc=#FFF467][/ft][fts=4]别[/ft][/ft][ftc=#F79700]的[/ft]

  • 10款安卓最好玩的游戏合辑 凌少每周特荐第12期 10款安卓最好玩的游戏合辑 凌少每周特荐第12期

    10款安卓最好玩的游戏合辑:时间好快,又到了每周一凌少安卓最好玩的游戏特荐时间了,撒花鼓掌~~上周,Android平台更新了很多好玩的精品游戏:坦克对决.水果突击.疯狂海盗.银河特遣队等.虽然都不是非常大牌的那种,但是不论是游戏画面和游戏可玩性都非常高,绝对是椒友们值得一玩的游戏.OK,想要更新下自己手机中的游戏的椒友,就跟着凌少一起去看看吧. 下一页更精彩

  • 我的世界1.8.1怎么刷矿物 刷矿物方法分享 我的世界1.8.1怎么刷矿物 刷矿物方法分享

    在我的世界的这一款游戏里面的1.8.1的版本里面,玩家们究竟该怎么样刷矿物呢?对于这一个问题,今天小编就来给各位玩家们来说说刷矿物的方法,下面各位玩家们就来跟着小编一起看看这个方法吧. 给各位我的世界1.8.1的玩家们来详细的分享一下刷矿物的方法. 方法分享: 怎么做圆石呢?这样做 烈焰棒是这样做的 如果你想刷矿物的话,这样做 好了,以上的信息就是小编给各位我的世界这一款游戏里面的玩家们带来的1.8.1版本里面刷矿物方法分享的全部内容了,各位看到这里的玩家们,小编相信你们现在是非常的清楚了刷矿物

热门推荐