jQuery教程(1)-操作DOM之操作属性

文章标签: jquery教程,jquery-dom
2014-12-25 10:11:06     44 人阅读    

所谓Web体验,就是Web服务器与Web浏览器之间合作的结果。过去,都是由服务器生成 HTML文档,然后浏览器负责解释并显示该文档。后来,正如我们所看到的,这种情况发生了变化,我们可以用CSS技术来动态修改页面的外观。然而,要想把JavaScript的威力真正发挥出来, 还得学会修改文档本身。


本章将学习以下内容:
□利用DOM提供的接口修改文档;
□在网页中根据需要创建元素和文本;
□移动或删除元素;
□通过添加、删除或修改它们的属性来实现文档内容的变换。
5.1操作属性
在本书前4章里,我们经常使用.addClass()和.removeClass()方法来示范如何改变页 面上元素的外观。虽然我们一般会说这两个方法在操作类属性,但jQueiy实际上是在操作DOM 中的className属性。换句话说,.addClass()方法创建或增加这个属性,而.removeClass() 则删除或缩短该属性。而具备了这两种操作的.toggleClass()方法能够交替地添加和移 除类。这样,我们就具有了处理类的一种有效而可靠的方式。这些方法特别有用,因为它们可 以在某个类已经存在的情况下不添加该类(例如,不会出现<div class="first first"> 的情况),也可以正确处理给一个元素应用多个类的情况(比如<div class="first
second"> )。
5.1.1非类属性
有时候,我们还需要操作其他一些属性,比如id、rel和title属性。jQuery为此也提供 了 .attr()和.revoveAttr()方法。这些方法让修改属性变成了小菜一碟。此外,通过jQuery 还可以一次修改多个属性,同我们在第4章中使用.css()方法修改多个CSS属性的方式类似。
比如,我们可一次性修改链接的id、rel和title属性。首先来看一看我们例子中的HTML 代码:

<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 <span class="drop">Law of Nature</span> with us 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>
<!-- . . . code continues . . . -->
</div>
■

如同本书其他HTML、CSS以及JavaScript示例一样,上面的标记只是完整文 档的一个片段。如果读者想试一试这些示例,可以从以下地址下载完整的示例 代码:Packt Publishing 网站 http://www.packtpub.com/support,或者本书网站 http://book.leamingjquery.com/

对于以上HTML,我们可以循环遍历<div class="chapter">中的每个链接,并逐个为它 们添加属性。如果只想为所有链接设置一个公共的属性值,那么在$(document).ready处理程 序中通过一行代码即可完成这一操作,如代码清单5-1所示。
代码清单5-1

$(document).ready(function() {
$('div.chapter a').attr({rel: 'external'});
});


与.css()方法很相似,.attr()方法也接受一对参数,第一个是属性名,第二个是属性值。 不过,更常用的方式还是传人一个包含键值对的对象,如代码清单5-1所示。使用对象可以轻松 地扩展,以便一次性地修改多个属性,如代码清单5-2所示。
代码清单5-2

$(document).ready(function() {
$('div.chapter a').attr({ rel: 'external',
title: 'Learn more at Wikipedia'
});
});


值回调
如果我们想让每个匹配的元素都具有相同的一个或多个属性值,那么只要给.attr()传人 一个静态的对象即可。不过,更常见的情况是为每个元素添加或修改的属性都必须具有不同的 值。例如,对于任何给定的文档,如果要保证JavaScript代码有效,那么每个id属性的值必须唯 一。要为每个链接设置唯一的id,可以使用jQueiy的.css()和.each()方法的另一个特性:值 回调。
值回调其实就是给参数传人一个函数,而不是传人具体的值。这个函数会针对匹配的元素集 中的每个元素都调用一次,调用后的返回值将作为属性的值。例如,可以使用值回调来为每个元 素生成唯一的id值,参见代码清单5-3。
代码清单5-3

$(document).ready(function() {
$('div.chapter a').attr({ rel: 'external',
title: 'Learn more at Wikipedia',
id: function(index, oldValue) {
return 'wikilink-' + index;
”;
});


每次触发值回调,都会给它传人两个参数。第一个是一个整数,表示迭代次数,我们在此利 用这个值为第一个链接生成的id是wikilink-◦,为第二个链接生成的id是wikilink-1,以此 类推。代码清单5-3并没有用到第二个参数,这个参数中保存的是修改之前属性的值。
我们是通过title属性来邀请人们学习维基百科中的术语的。在我们目前为止使用的HTML 中,所有链接都指向维基百科。不过,考虑到其他链接,还应该把选择符表达式定义得更具体一 些,参见代码清单5-4。
代码清单5-4

$(document).ready(function() {
$('div.chapter a[href*=HwikipediaH]').attr({ rel: 'external',
title: 'Learn more at Wikipedia',
id: function(index, oldValue) {
return 'wikilink-' + index;
}
});
});


为了把.attr()方法的使用讲得更透彻,下面演示怎么让这些链接的title属性更具体地包 含链接的目标。同样,解决这个问题还是要使用值回调,参见代码清单5-5。
代码清单5-5

$(document).ready(function() {
$('div.chapter a[href*="wikipedia"]').attr({ rel: 'external',
title: function() {
return 'Learn more about ' + $(this).text()
+ ' at Wikipedia.';
},
id: function(index, oldValue) {
return 'wikilink-' + index;
}
});
});


这一次我们利用了值回调的上下文。就像在事件处理程序中一样,在值回调函数中,this
关键字指向每次调用回调时正在操作的那个DOM元素。在此,我们把这个元素封装为jQuery对象, 这样就可通过.text()方法(第4章介绍过)来取得链接的文档内容了。结果,每个链接的title 属性都给出了具体的提示信息,非常贴心。

图5-1

jquery-dom

 

 


原文地址:http://www.itmmd.com/201412/377.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

Java程序常用算法 判断网页请求和 FTP 请求   上一篇
下一篇  Java程序常用算法 判断字符串是否为数字

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!