基于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 相关文章推荐
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
js打开新窗口方法整理
Feb 17 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
前端微信支付js代码
Jul 25 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
Angular 容器部署的方法
2018/04/17 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python的面向对象思想分析
2015/01/14 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Django 连接sql server数据库的方法
2018/06/30 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
出纳的岗位职责
2013/11/09 职场文书
优秀中专生推荐信
2013/11/17 职场文书
安全施工责任书
2014/08/25 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2014年城市管理工作总结
2014/12/02 职场文书