基于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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 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
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
php生成随机颜色的方法
2014/11/13 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
vue实现微信分享功能
2018/11/28 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
在Python中使用异步Socket编程性能测试
2014/06/25 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
安装python及pycharm的教程图解
2019/10/10 Python
下载官网python并安装的步骤详解
2019/10/12 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
中英双版中文教师求职信
2013/10/27 职场文书
户外宣传策划方案
2014/05/25 职场文书
培养联系人考察意见
2015/06/01 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书