基于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 DOM 添加事件
Feb 14 Javascript
javascript 多级checkbox选择效果
Aug 20 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
基于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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php对数组排序代码分享
2014/02/24 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
node使用request请求的方法
2019/12/20 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python中is和==的区别详解
2018/11/15 Python
WxPython实现无边框界面
2019/11/18 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
tensorboard显示空白的解决
2020/02/15 Python
python logging模块的使用详解
2020/10/23 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
智能室内花园:Click & Grow
2021/01/29 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
主题党日活动总结
2014/07/08 职场文书
2014年电厂工作总结
2014/12/04 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫