基于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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 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和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
如何理解python面向对象编程
2020/06/01 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
高职助产应届生自荐信
2013/09/24 职场文书
中秋节主持词
2014/04/02 职场文书
审计专业自荐信范文
2014/04/21 职场文书
幼儿评语大全
2014/04/30 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
公司辞职信模板
2015/05/13 职场文书
2016大一新生军训感言
2015/12/08 职场文书