5.4　内容 setter 和 getter 方法

如果能够对突出引用稍作修改，去掉一些文本并代之以省略号，那么效果会更好。为此，我们在例子文本中已经将某些文本包装在了<span class="drop">元素中。

实现这种替换的最简便方式，就是直接用新的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')
        .html('…')
      .end()
      .prependTo($parentParagraph);
  });
});

代码清单5-19中新增的几行代码使用了我们在第2章讨论过的DOM遍历技术。首先，使用.find()方法找到<span class="drop">元素，对这些元素进行操作，然后通过调用.end()方法重新返回<span class="drop">元素集合。在此期间，我们调用.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('…')
      .end()
      .text($clonedCopy.text())
      .prependTo($parentParagraph);
  });
});

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

图　5-12