基于jquery的點(diǎn)擊鏈接插入鏈接內(nèi)容的代碼
更新時(shí)間：2012年07月31日 23:04:48 作者：
基于jquery的點(diǎn)擊鏈接插入鏈接內(nèi)容的代碼，感覺(jué)有bug，解決的朋友可以留言方便更多的朋友
點(diǎn)擊鏈接插入鏈接內(nèi)容。
亮點(diǎn)：
1.正則匹配<a>標(biāo)記。
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.fzitv.net">腳本之家</a>
<a >百度</a>
<a >QQ</a>
<a >新浪</a>
<a >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>標(biāo)簽
if(!!addString) addString = addString[0]+'\n'; //正則匹配后的[0]是全部匹配的值，加入換行\(zhòng)n
textareaContain.val(textareaContain.val()+addString);
$(this).addClass('lock'); //阻止第二次點(diǎn)擊
}
return false;
});
//雙擊刪除鏈接
$("#clickContain a").dblclick(function(){
$(this).attr('class',null); //刪除整個(gè)class屬性，以免出現(xiàn)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/
亮點(diǎn)：
1.正則匹配<a>標(biāo)記。
2.jQuery單擊添加，雙擊刪除。
3.textarea加入換行。
核心代碼：
復(fù)制代碼 代碼如下:
<!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.fzitv.net">腳本之家</a>
<a >百度</a>
<a >QQ</a>
<a >新浪</a>
<a >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>標(biāo)簽
if(!!addString) addString = addString[0]+'\n'; //正則匹配后的[0]是全部匹配的值，加入換行\(zhòng)n
textareaContain.val(textareaContain.val()+addString);
$(this).addClass('lock'); //阻止第二次點(diǎn)擊
}
return false;
});
//雙擊刪除鏈接
$("#clickContain a").dblclick(function(){
$(this).attr('class',null); //刪除整個(gè)class屬性，以免出現(xiàn)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簡(jiǎn)單實(shí)現(xiàn)錨點(diǎn)鏈接的平滑滾動(dòng)
- jQuery動(dòng)態(tài)修改超鏈接地址的方法
- JQuery 實(shí)現(xiàn)在同一頁(yè)面錨點(diǎn)鏈接之間的平滑滾動(dòng)
- jquery如何實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)
- jquery 觸發(fā)a鏈接點(diǎn)擊事件解決方案
- jQuery模擬超鏈接點(diǎn)擊效果代碼
- jquery實(shí)現(xiàn)網(wǎng)站超鏈接和圖片提示效果
- jquery簡(jiǎn)單實(shí)現(xiàn)外部鏈接用新窗口打開(kāi)的方法
相關(guān)文章
jQuery slider Content(左右控制移動(dòng))
jQuery slider Content(左右控制移動(dòng))實(shí)現(xiàn)代碼，大家可以參考下。2009-09-09
這篇文章主要介紹了jQuery中each()方法用法,以實(shí)例形式詳細(xì)分析了each()方法的功能、定義及使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
本文搜集了大量 jQuery 表格插件，幫助 Web 設(shè)計(jì)者更好地駕御 HTML 表格，你可以對(duì)表格進(jìn)行橫向和豎向排序，設(shè)置固定表頭，對(duì)表格進(jìn)行搜索，對(duì)大表格進(jìn)行分頁(yè)，對(duì)表格進(jìn)行滾動(dòng)，拖放操作等等。這些插件很多都包含詳細(xì)的教程。2010-04-04
這篇文章主要介紹了jQuery橫向擦除焦點(diǎn)圖特效，一個(gè)具有自己特色的焦點(diǎn)圖會(huì)吸引用戶的注意力，讓用戶產(chǎn)生瀏覽網(wǎng)站的興趣至關(guān)重要，現(xiàn)在小編推薦給大家一款特別棒的焦點(diǎn)圖，感興趣的小伙伴可以參考下。2015-09-09
jQuery中的read和JavaScript中的onload函數(shù)的區(qū)別
這篇文章主要介紹了jQuery中的read和JavaScript中的onload函數(shù)的區(qū)別,這兩個(gè)函數(shù)在web編程中是最常用的,一定要搞清楚它們的區(qū)別,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了jQuery版本升級(jí)踩坑大全的相關(guān)資料,需要的朋友可以參考下2016-01-01
接下來(lái)幾篇教程，將重點(diǎn)講解jquery1.4新增的16個(gè)方法，有幾個(gè)方法還是非常實(shí)用的。2010-02-02
這篇文章主要介紹了jquery使用jxl插件導(dǎo)出excel的具體實(shí)現(xiàn)步驟,需要的朋友可以參考下2014-04-04
jQuery lazyLoad圖片延遲加載插件的優(yōu)化改造方法分享
jQuery lazyLoad.js插件 是一款基于jquery框架，可以“實(shí)現(xiàn)”圖片延遲加載的插件2013-08-08
jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過(guò)由下向上展開(kāi)效果示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過(guò)由下向上展開(kāi)效果,涉及jQuery基于事件響應(yīng)結(jié)合stop與animate方法控制頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04