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

最新文章
  • 夏天喝什么粥防中暑 夏天喝什么粥防中暑

    夏天喝什么粥防中暑?喝粥不仅可以补充水分及营养,还能预防中暑,那么你知道夏天喝什么粥防中暑吗?下面小编为你推荐十款防暑粥的做法. 本站阅读配图 1.西瓜皮粥 做法:西瓜皮200克,粳米100克,白糖30克.西瓜皮削去外表硬皮,切成丁,与粳米同煮.先用旺火煮沸,再转用小火煮成粥,放入白糖即成. 功效:西瓜皮具有清热解暑.利尿消肿的作用. 2.荷叶粥 做法:新鲜荷叶1张,粳米50-100q,冰糖30g,先将新鲜荷叶1张,洗净后煮汤,去荷叶,用汤同米煮成稀粥,待粥将成时,加入冰糖,再煮2-3分钟即可.

  • PhotoShop为照片调出欧美怀旧色调效果教程 PhotoShop为照片调出欧美怀旧色调效果教程

    原图 效果 高光素材 详细教程 1.打开原图,Ctrl + J 复制一层,然后添加一个渐变映射调整层,渐变设置如图,同时设置图层混合模式为 滤色,不透明度为 50%

  • 最新小学端午节活动总结大全

    小学端午节活动总结一: 端午节为我校提供了一个很好的教育机会,利用学生对过节的兴趣,不仅能激发学生从不同的角度感受节日的意义所在,刺激他们的想象力以及正在形成的民族正义感和爱国情,还灵活地激发每位学生的探索创造精神. 一.端午节的活动我们侧重于"溯"源.从三个环节展开师生间的交流与互动. 1.师生互动墙报.(在3-4年级开展)通过教室整个的外墙布置,以小报.手工制作.绘画作品等形式反映师生在第一阶段的学习体会与成果. 2.师生互动演出.(在5-6年级开展主题队会)队会以文艺演出的形式再

  • 高端商务的代表 特顶系列手机发布会在北京举行 高端商务的代表 特顶系列手机发布会在北京举行

    2016年1月24日,特顶手机首次新品发布会在北京国家会议中心举行.此次活动共带来了8款产品,先期发布的5款特顶(TD)系列手机将陆续上市.特顶手机的问世将为掌上商务办公.娱乐购物.云计算等带来完美的综合体验,真正诠释了智能手机的新特性.特顶通讯科技有限公司创始人兼CEO于光远详细介绍了这5款产品的各项功能. 特顶"掌电"系列(TD-1)手机 特顶"掌电"系列(TD-1)手机,是全球首款商务全能一体机,具有超薄三能,全折叠,三摄像头,双屏,双功能键等特点,外形采用斜

  • 效率极低人群之七大习惯 效率极低人群之七大习惯

    低效是工作和学习的大敌,它看起来不是那么容易改变.有幸的是本文作者为我们总结了低效人群的7大常见习惯,能够对此审视自身,发现自身的一些不良习惯.推荐这篇实用文,或许这其中有你的影子. 就像寻找对你有益的习惯一样,寻找妨碍你的习惯同样重要.这7种习惯中大多数都可能会轻易成为你日常生活的一部分,使你难以察觉它的存在(或者它如何影响到你).我曾经略微尝试了这些习惯,结果毫无疑问,那些重要的事情没有几个可以完成.同时我也要添加说明的是,这只是在生活中你可能形成的影响效率的主要的7个习惯,我很确定绝不仅仅

  • 2014年政风行风“回头看”工作总结

    根据区政府统一部署,我局行风评议"回头看"工作在区纠风办和各位行评代表的监督指导下,按照"整体部署,分步实施,纠建并举,扎实推进"的工作思路,以"树立财政新风.优化发展环境"为主题,以加强政风行风建设为核心,以提高队伍素质和树立部门形象为根本,抓住热点,突出重点,攻破难点,全面深入地开展"回头看"工作,财政行风建设在巩固去年行评成果的基础上,进一步取得了明显成效. 一.加强组织领导,深入宣传发动. 一是成立专班,明确责任.成立

  • 咋地快速卸载电脑应用 咋地快速卸载电脑应用

    1.点击你的菜单面板右边的"控制面板" 点击"控制面板"进入到下一个窗口找到"程序和功能" 点击这个功能后你就直接进入到应用的删除界面了,你看到的应用都可以卸载掉,只需右键.

  • 黑胡椒牛肉披萨的做法

    主料:200克,400克 辅料:12克,20克,45克,100克,20克,15克,130克 调料:12克,25克,40克 教您黑胡椒牛肉披萨怎么做,如何做黑胡椒牛肉披萨 1. 将面皮放入抹油的烤盘中,移入预热210℃的烤箱中: 2. 烘烤约7分钟,至颜色呈金黄色取出: 3. 将牛肉洗净切片: 4. 青.红.黄椒洗净.去蒂切圈: 5. 洋葱去皮切条,备用: 6. 将烤盘刷上一层薄油,放入饼皮,并抹上黑胡椒酱(25克): 7. 接着在饼皮上菜上奶酪丝: 8. 再均匀铺上牛肉.青(6克).红(6克).

  • 雅虎将关闭GeoCities免费托管用户个人主页服务 雅虎将关闭GeoCities免费托管用户个人主页服务

    雅虎将关闭其GeoCities服务.这是一项免费的为消费者托管个人主页的服务,这项服务是雅虎在10年前用40多亿美元收购的. 雅虎GeoCities服务的帮助网页本周四发布公告称,这项服务将不再接受新的用户.这项服务将在今年晚些时候关闭.有关个人如何存储自己的数据的细节将在今年夏季公布.这是雅虎在宣布它将裁减将近700名员工(占雅虎员工总数的大约5%)的几天之后采取的行动. 自从雅虎首席执行官卡罗尔·巴茨今年1月上任以来,雅虎已经撤销了许多产品和资产以便削减成本和把重点放在重要的业务上,因为雅虎

  • 2016最好看的卡通个性头像 2016最好看的卡通个性头像

热门推荐
  • 五一民政局上班吗 五一民政局上班吗 五一民政局上班吗 很多小伙伴喜欢在喜庆的节假日领证,那么,五一民政局上班吗?下面本站小编为您介绍: 民政局是国家行政机关,严格按照国家法定假日调休.所以五一期间民政局是不上班的. 2016五一放假时间:2016年4月30日(星期六) .5月1日(星期日).5月2日(星期一) ,共休3天 本站阅读配图 五一放假可以登记结婚吗? 由于五一劳动节是法定节,所有国家机关单位都按国务院规定放假,所以按理来说,婚姻登记机关五一也是放假的.但是,有些地方的婚姻登记机关考虑到部分外地务工的劳动者平日假期少,都想
  • CMYK快速修复偏色照片 CMYK快速修复偏色照片 本教程主要是介绍在CMYK模式下一些非RGB偏色照片的调色技巧,思路在CMYK中有四种原色,色彩调节的范围相对广泛很多. 原图 最终效果 1.打开原图,选择菜单:图像 > 模式 > CMYK模式,按Ctrl + L调出色阶,选择下图所示的灰度吸管在图示的位置取样出点击 2.点通道面版,选择青色通道,选择菜单:图像 > 应用图像 参数设置如下图 3.选择洋虹通道,选择菜单:图像 > 应用图像 参数设置如下图 4.回到图层面版,选择菜单:图像 > 模式 > RGB模式,按C
  • php版微信api制作多客服插件例子 php版微信api制作多客服插件例子 微信客服开发的例子以前有介绍过一篇相关的文章下面我们来看更高级的关于在以前基本上我们制作多客服插件的功能例子. 其实多客服插件很简单,就是简单的HTML结构.当然结合异步AJAX来获取数据.至于微信后台怎么设置插件的URL这里不多说了,看看API,别告诉我你不懂?做个插件代码中只需要调用微信官方给出的window.external.PutMsg(JSON)就可以选定的三种内容(文本.图片.图文)调到多客服软件的发送框!下面以发送图片为例.过程中是AJAX后台取图片,然后显示出来,再鼠标单击点选发