We can see an application for posting topics on websites such as QQ personal center or Sina Weibo. The application realizes real-time statistics of the number of input words, and interacts with the background through Ajax to insert the input content into the topic list. This article explains the first part of jQuery to implement front-end interactive operations.
XHTML code
<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>h3</span></li> <li>><span></span>span<span class="tag-name"></span> <span class="tag"></span>class<span class="tag"></span>= <span class="tag-name"></span>"counter"<span></span>><span class="attribute"></span>140<span></span><span class="attribute-value"></span>span<span class="tag"></span>><span></span>Tell me what you are doing...<span class="tag"></span><span class="tag-name"></span>h3<span class="tag"></span>><span></span> <span class="tag"></span><span class="tag-name"></span> <span class="tag"></span>textarea</li> <li class="alt"> <span></span>name<span class="tag"></span>=<span class="tag-name"></span>"saytxt"<span></span> <span class="attribute"></span>id<span></span>=<span class="attribute-value"></span>"saytxt"<span></span> <span class="attribute"></span>class<span></span>=<span class="attribute-value"></span>"input"<span></span> <span class="attribute"></span>rows<span></span>=<span class="attribute-value"></span>"2"<span></span> <span class="attribute"></span>cols<span></span>=<span class="attribute-value"></span>"40"<span></span>><span class="attribute"></span><span></span>textarea<span class="attribute-value"></span>><span class="tag"> </span> <span class="tag"></span> <span class="tag-name"></span>input<span></span> </li> <li>type<span></span>=<span class="tag"></span>"image" <span class="tag-name"></span> <span class="tag"></span>src<span></span>=</li> <li class="alt">"images/btn.gif"<span></span> <span class="tag"></span>class<span class="tag-name"></span>=<span></span>"sub_btn"<span class="attribute"></span> <span></span>alt<span class="attribute-value"></span>=<span></span>"publish"<span class="attribute"></span> <span> </span>/><span class="attribute-value"></span> <span></span><span class="attribute"></span> >id<span></span>=<span class="attribute-value"></span>"msg"<span></span>><span class="attribute"></span><span></span>span<span class="attribute-value"></span>> <span></span> <span class="tag"></span><span></span> </li> <li> <span></span>p<span class="tag"></span>><span class="tag-name"></span> ><span></span><span class="attribute"></span><span>form</span><span class="attribute-value">></span><span class="tag"> </span><span class="tag"></span><span class="tag-name"><span class="tag">div</span><span> </span></span> </li>class<li class="alt"> <span>=</span><span class="tag">"clear"</span><span class="tag-name">></span><span class="tag"><span>div</span></span> </li>><li> <span class="tag"> </span><span class="tag-name"></span><span class="tag"><span>div</span></span> </li> <li class="alt"> <span class="tag">id</span><span class="tag-name">=</span><span>"saywrap"</span><span class="attribute">></span><span> </span><span class="attribute-value"><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></span> </li> </ol>