jQuery教程(10)-DOM树操作之内容setter和getter方法

文章标签: jquery-dom,jquery
2015-1-7 13:10:52     69 人阅读    

dom内容setter和getter方法
           如果能够对突出引用稍作修改,去掉一些文本并代之以省略号,那么效果会更好。为此,我 们在例子文本中已经将某些文本包装在了 <span class="drop">X素中。
           实现这种替换的最简便方式,就是直接用新的HTML代替旧的内容。此时,就要用到.html() 方法了,参见代码清单5-19。
代码清单5-19

$(document).ready(function() {
$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative');
var $clonedCopy = $(this).clone();
$clonedCopy
.addClass('pulled')
.find(,span.drop,)
.htmlC'&hellip;')
.end()
.prependTo($parentParagraph);
});
});


          代码清单5-19中新增的几行代码使用了我们在第2章讨论过的DOM遍历技术。首先,使 用.find()方法找到^口技打class="drop__>兀素,对这些兀素进行操作,然后通过调用.end() 方法重新返回<span class="drop">X素集合。在此期间,我们调用.html()把相应的内容改 成了省略号(使用的是相应的HTML实体)。


          在调用.html()而不传递参数的情况下,这个方法返回匹配的元素中的HTML标记。而传人 参数后,元素的内容将被传人的HTML替换掉。在此要注意传人的HTML必须是有效的,而且要 对特殊字符进行转义。
这样,引用中的特定文本就被替换成了省略号,如图5-11所示。


图 5-11
            引用一般不会使用原来的字体样式,例如one more side的粗体。换句话说,我们真正想在引 用中显示的是去掉了 <span class="pull-qoute" >中的<strong>、 <em>、<a href>及其他 行内标签之后的文本。要想去掉这些HTML标签,就得使用.html()方法的“伙伴” .text()方 法了。
            与.html()方法类似,.text()也可以取得匹配元素的内容,或者用新字符串替换匹配元素 的内容。但是,与.html()不同的是,.text()始终会取得或设置纯文本内容。在使用.text() 取得内容时,所有HTML标签都将被忽略,而所有HTML实体也会被转换成对应的字符。而在通 过它设置内容时,诸如 <这样的特殊字符,都会被转换成等价的HTML实体,如代码清单5-20 所示。
代码清单5-20

$(document).ready(function() {
$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p');
$parentParagraph.css('position', 'relative'); var $clonedCopy = $(this).clone();
$clonedCopy
.addClass('pulled')
.find('span.drop')
.html('&hellip;')
.end()
.text($clonedCopy.text())
.prependTo($parentParagraph);
});


                在使用以上代码取得引用的内容时,我们得到的是纯文本,没有任何标签。因此在将这些文 本重新传人.text()时,就没有标记、粗体文本了,如图5-12所示。

 


图 5-12


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

mysql哈希索引   上一篇
下一篇  Java程序常用算法 对用户名进行比较排序

精彩回复
发表评论
姓名:       

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