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

最新文章
  • [上海](立即职位提供)数据库项目喜爱 REST 风格编程一起来

    提示:立即职位提供!可能需要偶尔加班! 工作地点:上海市祁连山南路 2199 号 工作时间: AM11-PM8:30 直招人数 5 人 一. UI 设计及界面交互人员 1 .熟悉各个终端界面展示及交互方式: 2 .熟悉使用 HTML 界面制作(含 HTML5 ): 3 .(可选)安卓和 iOS 界面设计开发: 4 .通过( REST ) API 实现数据交互动态应用: 任职人员要求: 1 .全日制大学专科以上计算机方向专业: 2 .一年及以上实际项目开发(简历中详细注明负责项目模块具体内容):

  • 来电信息-一个获取来电位置和其他信息(如推销、诈骗)的 Android 应用 来电信息-一个获取来电位置和其他信息(如推销、诈骗)的 Android 应用

    来电信息 一个获取来电位置和其他信息(如推销.诈骗)的安卓应用. Github 地址 下载地址 (github release) Play store 稍后上传,欢迎反馈意见.提交 BUG .提交 PR 功能 1. 查询来电号码并显示悬浮窗,显示位置和其他号码信息. 2. 主界面显示最近来电列表. 3. 在主界面可以查询电话号码信息. 4. 在设置界面可以自定义设置卡片及悬浮窗的颜色. 屏幕截图 来电悬浮窗 --cut-- WD40在2016-05-10 09:01:55回答到: 既然都能查询并

  • 用Flash MX制作MOV短片(1) 用Flash MX制作MOV短片(1)

    现在大多数的数码相机都附有短片拍摄功能,有的相机所拍的为AVI格式的短片,但更多数码相机所拍摄的短片为MOV格式,由于相机本身的局限,这些短片一般无法记录声音,拍下的短片成了"哑剧",并且能对MOV短片进行合并.格式转换的工具很少,这都给人们的使用带来了很大不便与遗憾.如果利用动画制作工具 MX,就可以非常方便地对多个MOV短片进行合并,而且还可以为这些无声短片添加片头动画.背景声音,把影片用DivX MPEG4等编码来压缩成AVI文件,这样既减小了文件体积,也便于与他人分享. 一.导

  • 美国科学家成功解开食道癌的遗传密码 美国科学家成功解开食道癌的遗传密码

    美国的一个专家团队揭开了149位病人肿瘤细胞的遗传密码,他们将之与健康细胞进行对比来鉴定食道癌(EAC)的一种突变信号.食道癌通常源自一种名为巴雷特食管的疾病,这种疾病是由慢性胃酸反流导致的.据统计,在过去30多年的时间里癌症的发病率已经增加了600%,而且在西方国家特别严重.食道癌每年大约会杀死1.5万美国人,全世界每年的死亡人数为40万.这种类型的食道癌或者咽喉癌的病人存活5年的几率大约只有15%到20%. 美国科学科学家们已经在26个基因中发现了可能导致食道癌的基因突变. 现在这种癌症的最

  • 手机中毒后可以连接电脑杀毒吗 手机中毒后可以连接电脑杀毒吗

    手机中毒后不可以直接连接电脑杀毒,首先确定病毒程序所在在手机存储卡中还是在手机程序中. 1.如果病毒在手机存储卡里,首先要及时拆下存储卡,不要在继续使用,之后连入电脑杀毒,方可解救.杀毒之后,存储卡可以继续使用,建议杀软使用A2.,国外著名杀软,对待U盘顽固病毒效果显著. 2.如果是手机本身程序已经中毒,或者程序文件被病毒破坏,可以使用手机杀毒软件先杀毒试试,如果不行,建议立即交到手机修理部,不要再自己修复了,以免贻误战机. 如果手机经常连接电脑,中毒后,手机依然可正常开机并使用,没有出现程序性

  • 30+提高wordpress用户访问量的插件 30+提高wordpress用户访问量的插件

    我们建立博客的初衷是记录.分享工作.生活.技术等方面知识,也有人写博客是为了装逼.但最终能够坚持下来的却少之又少.主要原因是从起初的单相思到后来 无人问津,没什么人来光顾我们的博客,自己也没有再写下去的动力了.看到别人的博客评论无数,盖楼高高,我们也希望自己的博客能够得到多数人的访问. 提高博客的访问量主要也在于你博客的内容是不是够吸引人,其次就是一些硬件条件,外部宣传有没有到位.我们如今使用较多的wordpress程序有些插件也能够提高我们的访问量.下面itbulu就来分享wordpress程

  • Java编程语言程序的认识误区

    越来越多人开始使用Java,但是他们大多数人没有做好足够的思想准备(没有接受OO思想体系相关培训),以致不能很好驾驭Java项目,甚至导致开发后的Java系统性能缓慢甚至经常当机.很多人觉得这是Java复杂导致,其实根本原因在于:我们原先掌握的关于软件知识(OO方面)不是太贫乏就是不恰当,存在认识上和方法上的误区. 软件的生命性 软件是有生命的,这可能是老调重弹了,但是因为它事关分层架构的原由,反复强调都不过分. 一个有生命的软件首先必须有一个灵活可扩展的基础架构,其次才是完整的功能. 目前很多

  • 《剑灵》洪门秘籍材料获取途径 《剑灵》洪门秘籍材料获取途径

    剑灵洪门还丹怎么获得?剑灵里秘籍是一个玩家变强的必备条件,这些秘籍学的时候需要花费一定的材料,那么这些材料怎么获得呢?下面以咒术师为例给大家介绍一下左键秘籍材料. 剑灵洪门秘籍材料获取大全 找回的洪门秘典一篇 找回的洪门秘典二篇 找回的洪门秘典3篇 冰焰石油材料获取途径 洪门秘籍材料获取途径 左键秘籍: 5种料理: 在成就商人处兑换,需要1250个成就点,这个比较方便 聚灵阁也能产出,对于经常开聚灵阁的玩家获取很方便 还有风之平原怪物也能掉落,需要花时间打 洪门还丹: 门派制作其实成本略高,直接

  • MySQL源码学习:关于 'A' =='A '的有关问题

    MySQL源码学习:关于 'A' =='A '的问题 昨天一位同事问到一个问题,他的MySQL中导入数据的时候,发现唯一索引冲突,原因是有两行记录,区别只是有一条记录多了最后的一个空格. 希望有方法将他们设置不同. 复现: CREATE TABLE `t` ( `c` varchar(20) NOT NULL DEFAULT '', PRIMARY KEY (`c`) ) ENGINE=InnoDB DEFAULT CHARSET=gbk; insert into t(c) values("A&

  • Java 从源中正确读取字节

    Java 从流中正确读取字节 Java 从流中正确读取字节 /** * 测试用途,把响应写入文件 * * @param in */ private void dumpToFile(InputStream in) { FileOutputStream fos; try { String fileName = "/tmp/res-" + System.currentTimeMillis() + ".dmp"; log.debug("fileName: &quo

热门推荐
  • QQ怎么解除绑定手机号? QQ怎么解除绑定手机号? 现在很多手机绑定qq,但是有朋友想要解除绑定或者更换绑定号码怎么办呢?今天大家介绍qq绑定手机号解除方法流程,不会的朋友可以来学学哦! qq怎么解除绑定手机号? 下载并安装最新版qq 登录QQ帐号点击如图标注图标进入设置界面. 进入QQ系统设置界面,选择安全设置---修改密码 进入QQ安全中心---密保工具---点击密保手机更改.如图标注: 输入你想要更改的手机号码(默认手机号码是中国大陆),点击确定.这时你原来绑定的手机号码会收到一条短信提醒,根据提示进入下一步设置即可! 进入安全中心---密
  • 油焖春笋怎么做好吃 油焖春笋怎么做好吃 比起冬笋,春笋的吃法也更多,可以凉拌,可以红烧,可以清煮,可以炖汤.我们家一般都拿来炖汤,或者煨红烧肉,这次单独炒了春笋,味道也很不错! 炒制的笋,嫩是首要.所以除了买的时候要选嫩一些的,季节也很重要,最好是清明节前后的春笋.因为过了清节,春笋就会慢慢变老了,变老的笋会因为纤维变粗而影响口感. 炒之前,春笋一定要焯水,而且要煮几分种,这样才能去除笋的涩味.炒的时候,要多放些油,因为笋比较吸油.这是道江南名菜,所以要多放些糖. 用料 春笋,高汤,生抽,老抽,糖,盐,醋,葱花 油焖春笋的做法 材料:
  • 宇宙最新发现9个矮星系 或可解开暗物质秘密 宇宙最新发现9个矮星系 或可解开暗物质秘密 据国外媒体报道,近日,来自剑桥大学的天文学团队一下发现了9个围绕银河系旋转的新矮星系,堪称有史以来一次性个数最多的发现.该发现或许能够帮助我们解开暗物质背后的秘密,正是这些暗物质聚合了整个银河系. 继2005和2006在南半球上空发现数十个矮星系之后的十年里,新矮星系首次现身于南半球上空的大小麦哲伦星云(Large and Small Magellanic Cloud)附近,后者是银河系轨道上久负盛名的最大的矮星系. 剑桥大学天文研究所联合美国能源局费米国家加速器实验室的另一个名为"暗能量调查&
  • 胎盘的功能 胎盘的功能 胎儿通过胎盘从母体中吸收营养,那么胎盘的功能仅仅是这个吗?胎盘的功能包括气体交换.营养物质供应.排除胎儿代谢产物.防御功能以及合成功能等. 1.气体交换 维持胎儿生命最重要的物质是O2,胎盘在母体与胎儿之间,O2及CO2以简单扩散方式进行交换,可替代胎儿呼吸系统的功能. 2.营养物质供应可替代胎儿消化系统的功能 (1)葡萄糖是胎儿热能的主要来源,以易化扩散方式通过胎盘;(2)氨基酸浓度胎血高于母血,以主动运输方式通过胎盘.电解质及维生素多数以主动运输方式通过胎盘;(3)胎盘中含有多种酶,如氧化酶
  • 写给亲爱的自己,别担心一切都会好好的 写给亲爱的自己,别担心一切都会好好的 亲爱的自己:人活在世上不可能事事尽如人意,遇到困难和烦心的事情,听听别人的奉劝,也有好处;但是,化解心里的矛盾主要还是得靠自己,心烦时不妨想想下面这些话,或许对调整心态有所帮助. 別担心,一切都会好的:上天对每个人都是公平的,它在关上一扇门的同时,必定会打开一扇窗;无论多么糟糕的东西,世界都为其预留了位置.相信雨点不会仅仅落在你一个人的屋顶之上,相信你自己,大千世界总有属于你的角落;拥有积极乐观的态度,是解决和战胜任何困难的第一步. 別害怕,天是不会塌的:只要下定决心克服恐惧,便几乎能克服任何恐
  • 全民k歌如何发起合唱?全民k歌发起合唱方法教程 全民k歌如何发起合唱?全民k歌发起合唱方法教程 全民k歌如何发起合唱?全民k歌就是一款唱歌的软件了,我们下面来介绍全民k歌发起合唱方法,如果你喜欢本文就分享吧,希望对各位有帮助. 全民k歌具有练歌.好友PK.调音.互动.分享等功能,并不能发起合唱哦~相信之后会加上这一功能的,大家一起期待吧~