基于jQuery的为attr添加id title等效果的实现代码


Posted in Javascript onApril 20, 2011

核心代码:

<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':'你好,现在在试验'+$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.3water.com/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':'你好,现在在试验'+$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 href="http://en.wikipedia.org/wiki/Pentagon">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 href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>, and from thence rising in the number of their sides till they receive the honourable title of <a href="http://en.wikipedia.org/wiki/Polygon">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 href="http://en.wikipedia.org/wiki/Circle">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>
Javascript 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
学习Angularjs分页指令
Jul 01 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
javascript基础知识讲解
Jan 11 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 #Javascript
编写自己的jQuery插件简单实现代码
Apr 19 #Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 #Javascript
分享20款好玩的jQuery游戏
Apr 17 #Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 #Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 #Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 #Javascript
You might like
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
PHP生成器简单实例
2015/05/13 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
自动更新作用
2006/10/08 Javascript
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
JavaScript方法和技巧大全
2006/12/27 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
node中的session的具体使用
2018/09/14 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
python学习之编写查询ip程序
2016/02/27 Python
python Django批量导入数据
2016/03/25 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
django框架auth模块用法实例详解
2019/12/10 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
捐书寄语赠言
2014/01/18 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
公司门卫管理制度
2014/02/01 职场文书
采购部经理岗位职责
2014/02/10 职场文书
会计学专业求职信
2014/07/17 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
出售房屋委托书范本
2014/09/24 职场文书
五好家庭事迹材料
2014/12/20 职场文书
个人创业事迹材料
2014/12/30 职场文书