基于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实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 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
SSI指令
2006/11/25 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python多重继承实例
2014/10/11 Python
Python编程中的异常处理教程
2015/08/21 Python
python 文件转成16进制数组的实例
2018/07/09 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
工程质量承诺书
2014/03/27 职场文书
委托证明模板
2014/09/16 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
人与自然观后感
2015/06/16 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
z-index不起作用
2021/03/31 HTML / CSS
详解Vue的options
2021/05/15 Vue.js
Java的Object类的九种方法
2022/04/13 Java/Android