基于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模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
jquery禁用右键示例
Apr 28 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 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
php函数的常用方法及注意之处小结
2011/07/10 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
js网页版计算器的简单实现
2013/07/02 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
轮播的简单实现方法
2016/07/28 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python实现多线程抓取妹子图
2015/08/08 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
应届生会计求职信
2013/11/11 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
承诺书格式
2014/06/03 职场文书
布达拉宫导游词
2015/02/02 职场文书
孟佩杰观后感
2015/06/17 职场文书
就业证明函
2015/06/17 职场文书
庆元旦主持词
2015/07/06 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
Javascript webpack动态import
2022/04/19 Javascript