我们在QQ个人中心或者新浪微博等网站上可以看到一个发表话题的应用。该应用实现了即时统计输入字数，并且通过Ajax与后台交互，将输入内容插入到话题列表中。本文讲解第一部分jQuery实现前端交互操作。
XHTML代码
<ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">form</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"myform"</span><span> </span><span class="attribute">action</span><span>=</span><span class="attribute-value">"say.php"</span><span> </span><span class="attribute">method</span><span>=</span><span class="attribute-value">"post"</span><span class="tag">></span><span> </span></span></span></li> <li> <span> </span><span class="tag"><span class="tag-name">h3</span><span class="tag">></span><span class="tag"><span class="tag-name">span</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"counter"</span><span class="tag">></span><span>140</span><span class="tag"></span><span class="tag-name">span</span><span class="tag">></span><span>说说你正在做什么...</span><span class="tag"></span><span class="tag-name">h3</span><span class="tag">></span><span> </span></span></span> </li> <li class="alt"> <span> </span><span class="tag"><span class="tag-name">textarea</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"saytxt"</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"saytxt"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"input"</span><span> </span><span class="attribute">rows</span><span>=</span><span class="attribute-value">"2"</span><span> </span><span class="attribute">cols</span><span>=</span><span class="attribute-value">"40"</span><span class="tag">></span><span class="tag"></span><span class="tag-name">textarea</span><span class="tag">></span><span> </span></span> </li> <li> <span> </span><span class="tag"><span class="tag-name">p</span><span class="tag">></span><span> </span></span> </li> <li class="alt"> <span> </span><span class="tag"><span class="tag-name">input</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"image"</span><span> </span><span class="attribute">src</span><span>=</span><span class="attribute-value">"images/btn.gif"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"sub_btn"</span><span> </span><span class="attribute">alt</span><span>=</span><span class="attribute-value">"发布"</span><span> </span><span class="tag">/></span><span> </span></span> </li> <li> <span> </span><span class="tag"><span class="tag-name">span</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"msg"</span><span class="tag">></span><span class="tag"></span><span class="tag-name">span</span><span class="tag">></span><span> </span></span> </li> <li class="alt"> <span> </span><span class="tag"></span><span class="tag-name">p</span><span class="tag">></span><span> </span> </li> <li> <span class="tag"></span><span class="tag-name">form</span><span class="tag">></span><span> </span> </li> <li class="alt"><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"clear"</span><span class="tag">></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li> <li><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"saywrap"</span><span class="tag">></span><span> </span></span></li> <li class="alt"> <span> </span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"saylist"</span><span class="tag">></span><span> </span></span> </li> <li> <span> </span><span class="tag"><span class="tag-name">a</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span class="tag">></span><span class="tag"><span class="tag-name">img</span><span> </span><span class="attribute">src</span><span>=</span><span class="attribute-value">"images/user.gif"</span><span> </span><span class="attribute">alt</span><span>=</span><span class="attribute-value">""</span><span> </span><span class="tag">/></span><span class="tag"></span><span class="tag-name">a</span><span class="tag">></span><span> </span></span></span> </li> <li class="alt"> <span> </span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"saytxt"</span><span class="tag">></span><span> </span></span> </li> <li> <span> </span><span class="tag"><span class="tag-name">p</span><span class="tag">></span><span class="tag"><span class="tag-name">strong</span><span class="tag">></span><span class="tag"><span class="tag-name">a</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span class="tag">></span><span>Demo</span><span class="tag"></span><span class="tag-name">a</span><span class="tag">></span><span class="tag"></span><span class="tag-name">strong</span><span class="tag">></span><span>发布的内容...</span><span class="tag"></span><span class="tag-name">p</span><span class="tag">></span><span> </span></span></span></span> </li> <li class="alt"> <span> </span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"date"</span><span class="tag">></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span> </span></span> </li> <li> <span> </span><span class="tag"></span><span class="tag-name">div</span><span class="tag">> <p align="left"></p> <div style="display:none;"> <span id="url" itemprop="url">http://www.bkjia.com/PHPjc/486081.html</span><span id="indexUrl" itemprop="indexUrl">www.bkjia.com</span><span id="isOriginal" itemprop="isOriginal">true</span><span id="isBasedOnUrl" itemprop="isBasedOnUrl">http://www.bkjia.com/PHPjc/486081.html</span><span id="genre" itemprop="genre">TechArticle</span><span id="description" itemprop="description">我们在QQ个人中心或者新浪微博等网站上可以看到一个发表话题的应用。该应用实现了即时统计输入字数，并且通过Ajax与后台交互，将输入...</span> </div> <div class="art_confoot"></div> </span> </li> </ol>
