基于jquery的點(diǎn)擊鏈接插入鏈接內(nèi)容的代碼
更新時(shí)間：2012年07月31日 23:04:48 作者：
基于jquery的點(diǎn)擊鏈接插入鏈接內(nèi)容的代碼，感覺有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://chabaoo.cn">腳本之家</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://chabaoo.cn">腳本之家</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)外部鏈接用新窗口打開的方法
相關(guān)文章
jquery 獲取 outerHtml 包含當(dāng)前節(jié)點(diǎn)本身的代碼
jQuery.html() 是獲取當(dāng)前節(jié)點(diǎn)下的html代碼，并不包含當(dāng)前節(jié)點(diǎn)本身的代碼，后來實(shí)驗(yàn)發(fā)現(xiàn)有一個(gè)jQuery的一個(gè)方法可以解決2014-10-10
Jquery使用each函數(shù)實(shí)現(xiàn)遍歷及數(shù)組處理
這篇文章主要介紹了Jquery使用each函數(shù)實(shí)現(xiàn)遍歷及數(shù)組處理,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
qTip2是一個(gè)灰常強(qiáng)大且精致的jQuery提示信息插件，是qTip的第2版，也是一個(gè)全新的版本，提供了豐富的功能及漂亮的外觀，非常易于使用2012-02-02
jquery實(shí)現(xiàn)動(dòng)態(tài)添加附件功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)添加附件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
通過Ajax使用FormData對(duì)象無刷新上傳文件方法
這篇文章主要介紹了通過Ajax使用FormData對(duì)象無刷新上傳文件方法，具有一定的參考價(jià)值，感興趣的朋友可以了解一下。2016-12-12
這篇文章主要為大家分享了適應(yīng)手機(jī)端的jQuery圖片滑塊動(dòng)畫,不僅在PC瀏覽器上可以使用，而且更適合在手機(jī)端的網(wǎng)頁(yè)中使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery憑借其簡(jiǎn)潔的API，對(duì)DOM強(qiáng)大的操控性，易擴(kuò)展性越來越受到web開發(fā)人員的喜愛，經(jīng)常有人詢問一些技巧，因此干脆寫這么一篇文章給各位jQuery愛好者，算是拋磚引玉吧。2014-11-11
使用jquery獲取url以及jquery獲取url參數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘query獲取url以及jquery獲取url參數(shù)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
本文給大家分享的是jQuery中的end()的定義和使用方法及示例，非常簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-07-07