基于jQuery的为attr添加id title等效果的实现代码

核心代码:


代码如下:

<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.jb51.net/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>

赞 (0)

相关推荐

  • niceTitle 基于jquery的超链接提示插件

    niceTitle 基于jquery的超链接提示插件

    这不是真正的预览,在读取文字列表的时候同时读取每个文章的内容概要(即想要预览的内容),然后使用该插件就可以实现假预览. 效果图如下,自己可以相应修改 代码如下: 复制代码 代码如下: <link rel="Stylesheet" type="text/css" href="Styles/jQuery.niceTitle.css" /> <script type="text/javascript" src=&q

  • jquery鼠标滑过提示title具体实现代码

    jquery鼠标滑过提示title具体实现代码

    复制代码 代码如下: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){     var x=20;     var y=0;     $("

  • 以WordPress为例讲解jQuery美化页面Title的方法

    这里选取的例子,便是 WordPress 中比较有名的美化超链接Title效果,一般的 title 效果是把鼠标放到 a 元素中便会显示一个黄底色框,而且是延时显示,这样显然不是一个好的 UE ,所以美化的 Title 便诞生了,在本站现在的主题 Line 的侧边栏中把鼠标放到文章标题便显示文章摘要的功能便是使用美化 Title 的原理做的,之所以选取这个例子,一是该例子中很好的体现了 jQuery 中的 DOM 操作,二是美化 Title 在 WordPress 中比较常用,可以供需要做美化

  • Jquery修改页面标题title其它JS失效的解决方法

    Jquery代码 复制代码 代码如下: $("title").html("hello"); 后来只好用下面这段js代码来实现 Js代码 复制代码 代码如下: document.title="hello";

  • 用jquery模仿的a的title属性的例子

    用jquery模仿的a的title属性的例子

    用jQuery实现的模仿a的title属性的例子,在测试的时候ie6,7上出现了层次混乱,不过最终解决了. html代码如下: <div class="wrap"> <ul class="list clearfix"> <li><a href="">UI设计师</a> <div class="show"> <p>所属部门:技术部</p&g

  • 用jquery模仿的a的title属性(兼容ie6/7)

    用jquery模仿的a的title属性(兼容ie6/7)

    用jQuery实现的模仿a的title属性的例子,在测试的时候ie6,7上出现了层次混乱,不过最终解决了. html代码如下: 复制代码 代码如下: <div class="wrap"> <ul class="list clearfix"> <li><a href="">UI设计师</a> <div class="show"> <p>所属部门:

  • 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框

    使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

  • jquery 简单的title显示插件

    jquery 简单的title显示插件

    学到插件 自己也倒弄出来一个. 效果图如下: 代码如下: 无标题页 #conBox{ position:absolute; width:200px;padding:5px;display:none;background:#666;z-index:999;border-radius:5px;} 你好 四大发送 12331 12331 12331 12331 1的爽肤水 1撒旦法1 12撒旦法112331 12331 12331 12331 $(function(){ //插件主题 $.fn.ext

  • 基于jQuery的为attr添加id title等效果的实现代码

    核心代码: 复制代码 代码如下: <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({ '

  • 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码

    基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码

    打造 漂亮 动态 友好的 精选随机色彩 投票百分比展示 效果 HTML结构: 复制代码 代码如下: <ul class="vote-box-list clearfix" id="appVoteBox"> <li class="vl-item" id="voteItem0" > <div class="vote-item-wrap"> <h4>A:</h4

  • 基于jQuery下拉选择框插件支持单选多选功能代码

    基于jQuery下拉选择框插件支持单选多选功能代码

    由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表 具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu

  • 基于jquery fly插件实现加入购物车抛物线动画效果

    基于jquery fly插件实现加入购物车抛物线动画效果

    先给大家展示下效果图: 在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jquery fly插件实现加入购物车抛物线动画效果. 使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能 一.插件下载 插件官方:https://github.com/amibug/fly 二.载入jQuery库文件和jquery.fly.min.js插件 <scr

  • 基于jQuery实现的向下滑动二级菜单效果代码

    基于jQuery实现的向下滑动二级菜单效果代码

    本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jQuery制作向下滑动的二级菜单,本二级菜单带有动画效果,而且比较流畅,鼠标放在一级菜单上,就可以向下滑出二级子菜单,相对实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-down-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • 基于jQuery实现的单行公告活动轮播效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <div class="lunbo123" style="position:relative;height: 45px;overflow: hidden;background-color:white" ;> <ul id="myul" style="margin:6px;padding:0px;position:absolute;width: 700px; heig

  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

  • 基于jQuery Bar Indicator 插件实现进度条展示效果

    基于jQuery Bar Indicator 插件实现进度条展示效果

    Bar Indicator是一款基于jQuery的进度条数据展示插件,它可应用于数据统计展示.投票统计以及任务进度等诸多场景中.它使用简单.选项丰富,几乎可以满足用户所有基于进度条的WEB设计需求,本文将结合实例给大家讲解Bar Indicator的使用. 查看演示 下载源码 HTML 首先加载jQuery和Bar Indicator相关js文件以及css文件. <link href="bi-style.css" rel="stylesheet" />

  • 基于jQuery和CSS3实现APPLE TV海报视差效果

    基于jQuery和CSS3实现APPLE TV海报视差效果

    用CSS和jQuery来实现它,尽量看起来和原效果一样. 本教程里,我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果,如果你正在阅读,我假设你对上述三种技术都有基本的了解. 废话不多说,开始第一部分. HTML页面 我们的页面结构像下面这样: <div class="poster"> <div class="shine"></div> <div class="layer-1"&

  • 基于jQuery实现的仿百度首页滑动选项卡效果代码

    基于jQuery实现的仿百度首页滑动选项卡效果代码

    本文实例讲述了基于jQuery实现的仿百度首页滑动选项卡效果代码.分享给大家供大家参考,具体如下: 今天给大家分享一款基于jQuery的仿百度首页滑动选项卡,可实现tab选项卡内容上下翻滚切换的功能.这款选项卡适用浏览器有:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-baidu-hd-nav-style-codes/ 完整实例代码代码点击

随机推荐