位置:首页 » 教程 » 基于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

最新文章
  • 大家的 iPhone SE 有没有竖纹的问题? 大家的 iPhone SE 有没有竖纹的问题?

    刚在苹果团买了一台 iPhone SE ,到手后发现屏幕整体比较黄,这个还算能忍,因为自己本身在 mac 上就用 flux ,色温低一点可以护眼. 但是用着用着总感觉不对劲,打字的时侯按钮总是有条纹在闪,各种 app 图标,只要有色块的,都会出现条纹闪动的现象.而且拍的照片在屏幕上看的也是各种条纹闪动,给人一种分辨率很低的感觉. 大家有没有相同的情况,求经验分享? --cut-- soland在2016-05-09 16:54:22回答到: 这是坏的啊 sengxian在2016-05-09 1

  • 大伙推荐一款不常驻后台的安卓音乐播放器呗

    目前的好几个大厂商的安卓音乐播放器都进程常驻后台,无缘无故的耗电或推送消息,挺烦的. --cut-- yylzcom在2014-06-03 15:34:0回答到: 我比较low,用的是qq music,下载到本地的歌曲没法添加到自建歌单中,每天午休前要听20分钟音乐都要用10多M流量 还好一个月包月流量用不完 faceair在2014-06-03 15:37:0回答到: 你可以试试绿色守护 播放器我用的网易云音乐,也还不错 xuc在2014-06-03 15:49:2回答到: 网易云音乐 Pow

  • 【DIY】动手打造如烟火般的漂亮散景 【DIY】动手打造如烟火般的漂亮散景

    摄影之所以好玩在于可以动手创造各种不同的可能性.通常得在有光源的条件下,才能突显主体,用散景为画面增添美丽的视觉效果.不过,并不是时时刻刻都能找到合适的背景,特别是在家中拍小东西,背景常会略显单调,下面就要告诉大家,如何运用玻璃纸及光纤灯,DIY出如烟火般的漂亮散景哦! 工具箱准备 要制造七彩散景,主要是把玻璃纸加装到闪光灯上头,再把光纤灯固定在闪光灯上面,这样在拍摄的同时,利用光触发,就能同时打亮主体,也能兼顾背景的营造.在整个拍摄的过程中,比较麻烦的是背景光纤灯的摆放位置,以及拍摄时距离的拿

  • 企业进入“软孵化”时代

    在当下,创业率高的大潮下企业存活率低的问题已经不再新鲜.许多新创企业在创立后五年内便达到瓶颈期,近两年企业的存活周期更是大大减短. 记者调查了解到,造成这种局面的原因有许多,而关键在于大部分的企业迫于运营压力,盲目地大量招收与其最初定位不相符的企业,只能提给企业提供一个办公场地,并不能对企业给予其他共性服务支持,企业入驻孵化器后基本上得不到包装.市场.营销方面的支持,导致新创企业对其各项工作都应接不暇,浪费了大量的精力和资源,降低了效率,主营业务得不到发展,经济效益更是远远达不到其所计划预期的目

  • 七喜控股改“玩”医药行业:进军LED数月就放弃 |七喜控股|LED|行业

    每经记者 宋戈 (002027,收盘价6.38元)上周六一则公告让投资者疑窦丛生,公司欲转让的LED公司-广州七喜光电有限公司 (以下简称七喜光电)在今年8月9日刚刚成立. <每日经济新闻>记者注意到,在变卖LED企业的同时,公司又喜欢上了医药行业:不仅参与设立一家医疗器械公司,并且还增资旗下的医药公司百奥泰. 转让多家公司股权 七喜控股上周六发公告称,公司与广州七喜资讯产业有限公司(以下简称七喜资讯)签署了<股权转让协议>,公司将所持有的广州七喜电子科技有限公司.广州精密模具有限

  • 上班族如何缓解背部疼痛 上班族如何缓解背部疼痛

    那么,背部疼痛是怎么发生的呢?据目前医学研究表明,一般引起背疼的原因有几种,主要是日常工作.生活中过度劳累.睡姿不对.坐姿不对.常用肩部背包等等,这些日常生活中我们习以为常的事情,都会引起背部疼痛.同时,随着社会节奏的加快,工作压力的增加,人们生活水平和生活工作环境的改善,腰背部疼痛的发病率正以惊人的速度增长,这也是受人们伏案工作时间延长,活动减少以及肥胖等因素有关,因此我们要重视这种疾病的发生. 那么,上班族应该如何缓解背部疼痛呢?下面笔者结合自身体验,跟大家谈谈几点建议. 首先,就是端正坐姿

  • CF7月123报告签到地址 武器宝箱天天领 CF7月123报告签到地址 武器宝箱天天领

    CF游戏中7月有两大签到活动:军火基地和123报告!其中军火基地需要玩家积攒兑换券才能换取道具,而123报告活动中,玩家只需每日登录活动页面签到,即可直接领取当日奖励.而累积签到指定天数,更有额外奖励哟.一起来看看吧! 活动时间:2015年7月1日--2015年7月31日 活动地址:点此进入 一.每日签到 玩家每日来到页面可以签到领取当日对应的奖励.玩家在7月内累计签到指定天数,可以领取对应天数的累计签到奖励. 二.宝箱兑换 玩家签到领取到宝箱后,点击对应的宝箱,抽取即可打开宝箱. 初级宝箱 中

  • 普陀水仙盆养管理

    浸泡清洗 雕刻后的球茎,入清水浸泡一天,如水中含有漂白粉,应放一天后再用.浸泡时,务必使球茎浸入水中,伤口向下.浸泡一天后将粘液.残存污泥.残根及枯皮除净:浸洗可防止球茎腐烂及变色.水仙球茎内流出的粘液营养丰富,易滋生细菌,或使洁白的球茎变为褐色,影响观赏.球茎捞起后,再用清水淋洗,直至洗净为止.为了保证根系迅速生长和防止伤口变黄,用脱脂棉或纱布盖住球茎伤口及球茎盘,并将棉花或纱布垂入水中,以吸水供刚萌发的根吸收.生长. 上盆水养 雕刻数量较多的,可先用粗钵(或用较大的盆.方盘)水养,待水仙含苞

  • 微信营销要做好微信情感营销 微信营销要做好微信情感营销

    同样是在朋友圈卖东西的,为什么有的人成交那么多,有的人成交那么少?在这个内容为王的年代,怎么经营你的朋友圈?朋友圈发内容有什么方法? 朋友圈情感营销是重点,打造差异化内容,促进和用户的感情交流,就能为推销产品打下良好的基础. 做微商的你是不是每天都在发微信朋友圈内容,但是效果却总是差强人意? 很多微商,在朋友圈发的内容不是满屏的刷广告的,就是在秀收入秀出单,或者是打鸡血,增加用户的紧迫感. 如果换成几个月前,这种方式或许能吸引一部分的用户,因为当初做微商的人比较少,人们总是愿意接受一些新鲜的事物

  • 穿越火线手游沙漠TD地图点位玩法分享 穿越火线手游沙漠TD地图点位玩法分享

    在穿越火线手机版的这一款游戏里面沙漠TD地图小编相信大家是早已经玩过了吧,那么今天小编在这里要教大家的是改中如何寻找点位去杀敌,各位还不知道的玩家们,那么下面就来看下小编分享的点位吧. 给各位穿越火线手机版的玩家们来详细的解析分享一下沙漠TD地图点位玩法. 分享一览: 内容: 沙漠TD地图建筑物比较多,楼道距离很远但路程复杂容易跑整个地图看不见人,但一看见就好几个,也有时候没看见敌人就死了.所以我的打法不太建议满图去跑.找到一个适合的点位就蹲点,这样效益高. 开局,如果玩家匹配的是保卫者那么下面

热门推荐
  • 2016最值得期待的科技产品盘点:iphone7入选 2016最值得期待的科技产品盘点:iphone7入选 12月28日,马上就要和2015年说拜拜了,现在正是去展望新的一年的时候.2015年,无数科技产品带给我们不同凡响的体验,而2016年,更多的科技产品将会改变我们的生活.下面就让我们来看看2016年有哪些值得期待的创新产品. Oculus Rift和Oculus Touch 我们可以肯定的是,2016年将是虚拟现实技术爆发的一年.Oculus Rift很有可能成为首款正式进入市场的产品,这台Facebook旗下的设备需要与电脑相连才能使用,同时它支持通过Xbox手柄进行控制. 另外,Oculus
  • 乾陵封藏!女皇武则天的惊天秘闻 乾陵封藏!女皇武则天的惊天秘闻 素有考古界的"三峡工程"之称的乾陵埋葬着唐高宗和大周女皇帝武则天.一对夫妇,两朝皇帝,合葬一室,这在全世界也是稀罕的.更让世人无法弄明白的还有,武则天为何要为自己竖一块无字碑?乾陵被盗过么?以及乾陵"藏宝500吨"猜测是否有科学依据?所有这一切,在发掘之前,都是谜. 半个世纪以来,发掘乾陵始终是个热门话题,四十多年前,陕西省文化部门曾正式向中央政府递交了<乾陵发掘计划>,但周恩来总理提笔在这份可能"石破天惊"的计划书上写道:"
  • 酷派锋尚pro电话无法拨打怎么办 酷派锋尚pro电话无法拨打怎么办 酷派锋尚pro电话无法拨打怎么办 1.请确认手机信号强度处于正常状态,如果手机无信号或者信号较弱,请到信号较强的地方再进行测试; 2.请确认飞行模式是否已经开启,如果开启请进入飞行模式设置菜单,将飞行模式关闭; 3.确保SIM卡处于正常状态,将此SIM卡放到其他手机中进行测试,确认SIM卡是否有问题; 4.请恢复出厂设置后重新检查是否正常,如果仍不正常可以尝试刷入新的系统解决.
  • 网络当红动漫形象幸福鸡(Happy&nbsp;chicken)可爱表情图片第三期 网络当红动漫形象幸福鸡(Happy&nbsp;chicken)可爱表情图片第三期 幸福鸡,英文名Happy chicken .网络当红动漫形象,由小朵儿文化传播有限公司开发,本着传递幸福带来欢乐的理念.目前幸福鸡的网络表情.漫画.周边已推出,并在不断更新中.
  • Java表格FineReport在医院院长查询分析系统中有什么用 Java表格FineReport在医院院长查询分析系统中有什么用 Java报表FineReport在医院院长查询分析系统中有什么用 1.医院院长查询系统的价值 目前,大中型医院的信息处理正从传统手工方式飞速向电脑信息化建设方案转变,一个大中型医院担负着繁重的医疗和科研任务,以及繁杂的事务性工作,院长必须时刻与各科室保持密切的连续,以便随时了解全院的情况,及时发现问题,方案并解决问题. 院长是医院的首脑决策工作部分,其工作效率.工作质量关系到医院的社会效益和经济效益.在以往手工管理模式下,难免有因数据量大,医院情况反映不及时,或因为事物繁多,以至于出现不能全面及