现在这个网页上有几个表单元素 … 这个可以输入评论内容的文本区域上定义了 comment ID，通知是一个复选框，上面有一个 notice ID，最后还有一个提交按钮，上面定义了 submit ID …

我们先试一下 focus 事件的事件处理器 … 当用户点击这个文本区域的时候，更改它的 rows 属性的值 .. 现在这个属性的值是 2 …

打开这个网页的脚本文件 … 先去选择这个评论的文本区域 … 再调用它的 .focus() 事件处理器 … 用一个函数作为它的参数 …

在这个函数里，要做的就是修改所选的元素的 rows 属性的值 … 可以使用它的 .attr 方法 … 把 rows 的值，修改成 5 …

$( '#comment' ).focus(function() {
$( this ).attr( 'rows', '5' );
});

回到浏览器 … 点击选中这个文本区域 .. 会触发它的 focus 事件 .. 这样就会执行 focus 事件处理器 … 把它的 rows 属性的值，改成 5 ..

你会发现这个文本区域会变长一些 …

.blur()

下面，我们再试一下 .blur() 事件 … 离开这个表单元素会触发 blur 事件 … 如果用户在评论这个文本区域里什么都没输入的话 … 再把它的 rows 属性的值改回成 2 …

同样先选择评论表单元素 … 使用 blur 事件的处理器 … 在它里面，用一个简单的 if 语句，判断一下文本框里是否有内容 … 如果没有的话 .. 就把它的 rows 属性的值改成 2 …

在要判断的条件里，我们用了一个 val() 方法 … 它可以获得表单元素的值 … 如果表单元素的值是空白的 .. 说明它里面还没有内容 … 这个条件就会这返回 true … 也就会执行在 if 后面的大括号里的代码 …

$( '#comment' ).blur(function() {
if ( $( this ).val() === '' ) {
$( this ).attr( 'rows', '2' );
};
});

再回到浏览器 … 选中文本区域 … 触发 focus 事件 … rows 属性的值会变成 5 ，文本区域会加长 … 离开的时候 … 会触发 blur 事件 … 因为还没输入内容，所以，rows 属性的值会变成 2 …