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

最新文章
  • 我想说下 Xshell 真 tm 好用

    是我到目前为止用过最爽的 ssh 工具了 那个复制和粘贴可以自定义映射.重要的是不要钱 --cut-- holinhot在2016-05-09 00:40:25回答到: 好用 holinhot在2016-05-09 00:40:25回答到: 我理想的 ssh 工具 wayslog在2016-05-09 00:40:25回答到: ~~! zsh 表示路过--啥, windows 是啥-- mgoophile在2016-05-09 00:40:25回答到: 确实非常好用.想在 Linux 上找一个同

  • 美图秀秀表情工厂安卓版下载方法 美图秀秀表情工厂安卓版下载方法

    1)打开手机浏览器,输入m.3533.com,进入3533手机世界移动版后在类目那里选择"软件".(如下图所示) 2)然后输入表情工厂,有iphone版和安卓版,选择安卓版后点击下载,待下载完成后安装即可,那么美图秀秀表情工厂安卓版下载就已经成功了.

  • 装修收尾工程需要的材料清单一览

    收尾工程需购买的材料清单有哪些?一起来看看下面列出来的,供正在装修的朋友们参考: 厨卫 马桶.浴缸.淋浴房.整体玻璃隔断.面盆.卫浴五金.龙头.水槽. 五金类 门锁.合叶.门吸. 开关电器 开关面板.插座面板.浴霸 .各类灯具.换气扇. Tips:购买这些材料时,还需要注意一些挑选细节.挑选不善,会对安装和今后的使用造成很大的影响.特别要注意的是在洁具的选择上,更要慎之又慎.很多业主家的卫浴间常出问题,就与洁具挑选有关. 1.座便器的选择要注意坑距 首先,要根据自己的实际情况和个人爱好确定自己的

  • 父母的4种行为影响宝宝心里 父母的4种行为影响宝宝心里

    社会学家认为,父母在家庭生活中的行为,尤其是情绪,是幼儿心理健康发育的直接影响因素;父母的行为是孩子的标杆,是孩子心理发育的影响指针.研究表明,父母在家中情绪友善平和,接人待物谦虚礼貌,有助于幼儿的心理健康发育;而如果父母在家里经常情绪恶劣,吵架斗嘴,则会让幼儿经常处于紧张和恐惧之中,对于孩子的心理发育极其不利. 1.吵架动粗 父母在孩子面前不做任何避让的吵架动粗,或者家长与他人吵架动粗,都会让孩子产生紧张心理和恐惧感.家长经常在孩子面前大吵大闹,会让孩子精神高度不安,心理会滋生不安全的感觉.

  • 北京天龙潭旅游区

    天龙潭旅游区位于昌平区南口镇西北7公里处龙潭村内,这里风景优美,水量充足,山清水秀,鸟语花香,有陡峭的山壁.潺潺流水,山泉突出形成湖光山色的佳境.交通便利,距八达岭高速公路仅1公里,"燕平八景"之一的龙泉喷玉即位于此.有停车场和可容纳百余人的大会议室,为团体召开会议提供方便.另外以龙潭水库为依托的摸鱼池.钓鱼池,也给游人提供了休闲娱乐的场所. 天龙潭自然风景区地处军都山脉与燕山山脉交汇处,属冰川地貌.这里山壁陡峭,谷底开阔,形如"U"字,故又称幽谷.由于地壳的变迁,

  • CSS3面包屑导航和多步骤向导效果 CSS3面包屑导航和多步骤向导效果

    面包屑我相信前段人员都知道是什么了今天我信下面介绍的是通过css3来实现面包屑导航和多步骤向导效果,具体的细节如例子如下所示. 面包屑是用来做当前页面所在的站点位置的导航作用,它一层层的表示站点分类或目录层级关系,而多步骤指示经常用在一些分步流程向导的应用,如分步注册向导,货物订购流程.今天我们来用CSS制作面包屑和多步骤指示的应用. HTML结构非常简单,一个有序列表ol,外面又<nav>包裹. 面包屑导航条的结构,我们给ol加上class样式为:.cd-breadcrumb,那么当前位置的

  • 北京房山云居寺

    云居寺云居寺位于北京西南房山区境内,距市中心70公里.占地面积70000多平方米.由云居寺石经山藏经洞.唐.辽塔群构成我国古代佛教文化特色一大宝库. 云居寺建于隋末唐初,经过历代修葺,形成五大院落六进殿宇.两侧有配殿和帝王行宫.僧房,并有南.北两塔对峙:寺院坐东朝西而建筑规模非常宏伟.云居寺是佛教经籍荟萃之地,寺内珍藏着石经.纸经.木版经号称三绝.云居寺东接上方山国家森林公园,西邻十渡自然风景区.以云居寺为中心,向外辐射的景区有周口店猿人遗址.韩村河.石花洞.青龙湖水上游乐园.银狐洞.仙

  • TTP-244CE条形码打印机不安装碳带与标签纸能打印测试页吗?解决方法

    TTP-244CE条形码打印机不安装碳带与标签纸能打印测试页吗? 本帖最后由 lhrong 于 2009-08-28 15:58:38 编辑 请教各位高手,TTP-244CE条形码打印机不安装碳带与标签纸能打印测试页吗?如果能打印该怎样操作?由于客户把硬件价格压得很低,我们代客户买打印机的时候没有买碳带与打印标签纸,现在想打印测试一下,居然搞不定,请大家支招. ------解决方案-------------------- 一般机器里应该随带少部分耗材,没有的话打不了测试.

  • java集合类 - 实现 细节

    java集合类 ------------ 实现 细节 深入Java集合学习系列:ArrayList的实现原理 http://zhangshixi.iteye.com/blog/674856 深入Java集合学习系列:HashMap的实现原理 http://zhangshixi.iteye.com/blog/672697 深入Java集合学习系列:LinkedHashMap的实现原理 http://zhangshixi.iteye.com/blog/673789 深入Java集合学习系列:Hash

  • 入大公司还是进小公司 入大公司还是进小公司

    进大公司还是进小公司 对于这个问题始终没有一个固定的答案,就像两条路始终都有人失败和成功.因为成长的道路上会有太多的因素在影响着我们.这里我想举一个可能不是特别恰当的例子但是相似的例子就是读大学.一个好的大学和一个普通大学都可能出人才,可是它们的概率一样吗?他们在学校的资源又是一样吗?出了校门所享受的社会资源又是一样吗? 所以结论也很简单,如果你刚毕业,有实力进大公司不要唐突的选择一个公司就进去了.找准一个行业,然后在这个行业中找一个有实力的大公司学习是一个比较好的选择,也许未来总是存在风险,然

热门推荐
  • UPYUN 云存储免费了! UPYUN 云存储免费了! 在这个风和日丽.喜大普奔的周五,我们愉快地宣布: UPYUN 云存储从 9 月 1 日开始正式免费啦! ...... 欲知具体,请 [传送门] https://console.upyun.com/#/login/ 上张图: [文末福利] 今天开始,截止到 8 月 31 日 正午 12 点,评论本帖子即有机会获得 <三体·死神永生>(共 15 本) 规则:取本帖至活动截止时间总楼数的个位数为"幸运数字",所有以幸运数字为个位数的评论楼层都将获奖(比如截止时达到 146 楼,所
  • 微软的开始用Outlook代替Hotmail了... 微软的开始用Outlook代替Hotmail了... 界面暂时没有看到广告...好清新好清新... --cut-- hq5261984在2012-08-01 11:23:1回答到: 新界面看着比GMAIL酥糊啊! gracehunter在2012-08-01 11:32:4回答到: 设置界面 光这个就值得拉出去吐槽三天了. tylr在2012-08-01 11:34:5回答到: hotmail.xn--com?-no1g">[email protected]? tylr在2012-08-01 12:09:3回答到: outlook.xn-
  • Photoshop制作简洁网页导航 Photoshop制作简洁网页导航 最终效果图 图00 1.创建一个 1000×750像素大小的文件,双击背景图层将其变为可编辑的图层,并打开图层样式>颜色叠加,用#47382e叠加. 图01 2.打开标尺(视图 > 标尺),按下图添加一些参考线. 图02 3.用矩形工具创建一个矩形,将该图层命名为header. 图03 4.将前景色设为黑色,选择椭圆工具创建一个阴影区域,大小要高于白色的矩形.将椭圆形图层命名为shadow,并将其置于header图层下面.然后打开滤镜>转换智能滤镜,之后滤镜>模糊>高斯模糊,
  • PPTV怎么去除广告 PPTV怎么去除广告 1.在开始菜单打开计算机; 2.在地址栏输入地址:C:ProgramDataPPLivePPTVCachepluginad (xp系统输入地址:C:Documents and SettingsAll UsersApplication DataPPLivePPTVcachepluginad)点击回车; 3.在该文件夹下找到文件:adconfig,右键单击该文件,然后选择[打开方式]--[记事本]; 4.在记事本中,清除所有内容:按下ctrl+a选中所有,按下delete删除; 5.接着点击:文件-
  • P2P行业大佬齐聚中关村,共谋P2P创业之道 P2P行业大佬齐聚中关村,共谋P2P创业之道 P2P创业大潮伴随互联网+概念的升温逐渐进入白热化,在P2P行业模式分化渐趋严重的背景下,P2P行业的未来该何去何从?4月24日,飞马旅.安宜投共同主办的主题为"P2P网贷平台的创业经"的沙龙活动在北京中关村创业大街举行,P2P行业大佬齐聚中关村,天使投资人.资深金融律师.媒体人士悉数到场,共同为P2P创业把脉. 首先安宜投COO蓝成菲女士发表了名为<一个女汉子的创业经>的主题演讲.蓝成菲认为,创业需要最大的企图心和最大步伐.如今我们正处于互联网快速发展的时代,也是充满野心
  • 年轻人,你何必着急呢 年轻人,你何必着急呢 这个时代比以往任何时候都更充满诱惑,看到以前的同学忙着谈婚论嫁,而自己却苦逼的为找个工作四处奔波,能不着急吗?然而,真正的富有,是让自己的心灵得到满足,不攀比,不张望. 博士第二年,其实博士生涯开始也没多久,我突然想放弃了,为此挣扎了很久,虽然挣扎的时间并不长,但是这个想法就想伊甸园的苹果,不断诱惑我,刺激我,左右着我的情绪.但是到了现在,逐渐淡了,我想我会继续坚持下去,拿到博士学位. 我把我的这段心路历程记录下来,也许以后迷茫的时候,可以再翻翻. 得益于发达的网络媒体,这个时代比以往任何时候都
  • 小米3显示Surface更新哪里关闭? 小米3显示Surface更新哪里关闭? 1)首先在手机桌面打开[设置],然后往下拉点击[开发者选项]. 2)上面所示:进去以后往下拉,看到[显示Surface更新]之后在后方点击按钮关闭掉即可完成!
  • asp.net中WinForm窗体属性默认值更改的教程 asp.net中WinForm窗体属性默认值更改的教程 下面给大家介绍一个WinForm窗体属性默认值更改方法,希望例子能帮助到各位 每次新建WinForm应用程序项目后,第一件事就是修改Form1窗体FormBorderStyle.MaximizeBox和StartPosition三个属性值,有没有办法创建项目时自动修改好这些属性值呢?Form类没办法修改,自定义控件太麻烦,退而求其次,只要在创建项目时能在Form1.Designer.cs文件自动添加下边三句代码就可以了: 代码如下 复制代码 this.FormBorderStyle = Syst