基于jQuery的為attr添加id title等效果的實現(xiàn)代碼
更新時間:2011年04月20日 21:13:28 作者:
下面的例子是通過jquery為連接增加title描述的代碼,在當(dāng)前頁的連接上寫上,你好,現(xiàn)在在試驗連接文字的簡單描述。
核心代碼:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//$('div.chapter a').attr({'rel':'external'});
$('div.chapter a').each(function(index){
var $linkthis=$(this)
$linkthis.attr({
'rel':'external',
'id':'wikilink-'+index,
'title':'你好,現(xiàn)在在試驗'+$linkthis.text()
});
});
$('#wikilink-1').css('fontSize',33);
});
</script>
完整測試代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM Manipulation</title>
<script language="javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.5.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//$('div.chapter a').attr({'rel':'external'});
$('div.chapter a').each(function(index){
var $linkthis=$(this)
$linkthis.attr({
'rel':'external',
'id':'wikilink-'+index,
'title':'你好,現(xiàn)在在試驗'+$linkthis.text()
});
});
$('#wikilink-1').css('fontSize',33);
});
</script>
</head>
<body>
<!-- Begin example -->
<h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>
<div id="f-author">by Edwin A. Abbott</div>
<h2>Part 1, Section 3</h2>
<h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
<div id="excerpt">an excerpt</div>
<div class="chapter">
<p class="square">Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or <a >Pentagons</a>.</p>
<p class="nobility hexagon">Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or <a >Hexagons</a>, and from thence rising in the number of their sides till they receive the honourable title of <a >Polygonal</a>, or many-Sided. Finally when the number of the sides becomes so numerous, and the sides themselves so small, that the figure cannot be distinguished from a <a >circle</a>, he is included in the Circular or Priestly order; and this is the highest class of all.</p>
<p><span class="pull-quote">It is a Law of Nature <span class="drop">with us</span> that a male child shall have <strong>one more side</strong> than his father</span>, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on.</p>
</div>
</body>
</html>
復(fù)制代碼 代碼如下:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//$('div.chapter a').attr({'rel':'external'});
$('div.chapter a').each(function(index){
var $linkthis=$(this)
$linkthis.attr({
'rel':'external',
'id':'wikilink-'+index,
'title':'你好,現(xiàn)在在試驗'+$linkthis.text()
});
});
$('#wikilink-1').css('fontSize',33);
});
</script>
完整測試代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM Manipulation</title>
<script language="javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.5.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//$('div.chapter a').attr({'rel':'external'});
$('div.chapter a').each(function(index){
var $linkthis=$(this)
$linkthis.attr({
'rel':'external',
'id':'wikilink-'+index,
'title':'你好,現(xiàn)在在試驗'+$linkthis.text()
});
});
$('#wikilink-1').css('fontSize',33);
});
</script>
</head>
<body>
<!-- Begin example -->
<h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>
<div id="f-author">by Edwin A. Abbott</div>
<h2>Part 1, Section 3</h2>
<h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
<div id="excerpt">an excerpt</div>
<div class="chapter">
<p class="square">Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or <a >Pentagons</a>.</p>
<p class="nobility hexagon">Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or <a >Hexagons</a>, and from thence rising in the number of their sides till they receive the honourable title of <a >Polygonal</a>, or many-Sided. Finally when the number of the sides becomes so numerous, and the sides themselves so small, that the figure cannot be distinguished from a <a >circle</a>, he is included in the Circular or Priestly order; and this is the highest class of all.</p>
<p><span class="pull-quote">It is a Law of Nature <span class="drop">with us</span> that a male child shall have <strong>one more side</strong> than his father</span>, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on.</p>
</div>
</body>
</html>
相關(guān)文章
使用JavaScript+canvas實現(xiàn)圖片裁剪
這篇文章主要介紹了使用JavaScript+canvas實現(xiàn)圖片裁剪的方法,需要的朋友可以參考下2015-01-01
Jquery Validation插件防止重復(fù)提交表單的解決方法
在項目開發(fā)中,測試人員報告缺陷說,即時有表單驗證,但是如果快速點擊兩下“提交”按鈕,系統(tǒng)會產(chǎn)生兩條相同的記錄。2010-03-03
jQuery獲取table下某一行某一列的值實現(xiàn)代碼
這篇文章主要介紹了jQuery獲取table下某一行某一列的值實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
JQuery Ajax 異步操作之動態(tài)添加節(jié)點功能
異步操作動態(tài)添加節(jié)點,導(dǎo)致在代碼中給添加的節(jié)點全局綁定事件或者獲取元素?zé)o效,問題出在哪里呢?下文給大家介紹下,感興趣的朋友參考下吧2017-05-05
15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享
這篇文章收集了15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享給大家。jQuery 是一個非常優(yōu)秀的 JavaScript 框架,使用簡單靈活,同時還有許多成熟的插件可供選擇,jQuery 讓網(wǎng)站有更好的可用性和用戶體驗,給訪問者對網(wǎng)站留下非常好的印象。2011-07-07
jQuery添加/改變/移除CSS類及判斷是否已經(jīng)存在CSS
正如標(biāo)題所言會用到removeClass移除CSS類、addClass添加CSS類、toggleClass添加或者移除CSS類,hasClass判斷是否已經(jīng)存在CSS2014-08-08
精選的10款用于構(gòu)建良好易用性網(wǎng)站的jQuery插件
這篇隨筆收集了10款非常給力的jquery 插件,幫助你構(gòu)建易用性良好的網(wǎng)站,希望對你有用!2011-01-01

