﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-坚持是底基-文章分类-javascript</title><link>http://www.blogjava.net/soken/category/47573.html</link><description>寻求</description><language>zh-cn</language><lastBuildDate>Wed, 09 Nov 2011 19:48:51 GMT</lastBuildDate><pubDate>Wed, 09 Nov 2011 19:48:51 GMT</pubDate><ttl>60</ttl><item><title>form表单提交到隐藏iframe，2次提交解决方案</title><link>http://www.blogjava.net/soken/articles/362615.html</link><dc:creator>soken</dc:creator><author>soken</author><pubDate>Thu, 03 Nov 2011 09:05:00 GMT</pubDate><guid>http://www.blogjava.net/soken/articles/362615.html</guid><description><![CDATA[<div>最近碰到用form和隐藏iframe来做假的ajax实现，但老碰到form表单向后台提交两次。<br />以下是个人的解决方案。<br />1.form的target不要设<br />2.js方法中动态添加target，form提交后加上return.<br /></div><img src ="http://www.blogjava.net/soken/aggbug/362615.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/soken/" target="_blank">soken</a> 2011-11-03 17:05 <a href="http://www.blogjava.net/soken/articles/362615.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>html之marquee详解（转载）</title><link>http://www.blogjava.net/soken/articles/355512.html</link><dc:creator>soken</dc:creator><author>soken</author><pubDate>Mon, 01 Aug 2011 11:21:00 GMT</pubDate><guid>http://www.blogjava.net/soken/articles/355512.html</guid><description><![CDATA[<div>该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果<br />该标签是个容器标签<br />语法： 
<div>&lt;marquee&gt;&lt;/marquee&gt;</div>
<div><br />以下是一个最简单的例子：</div>
<div><br />代码如下:</div>
<div>&lt;marquee&gt;&lt;font size=+3 color=red&gt;Hello, World&lt;/font&gt;&lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div>下面这两个事件经常用到：<br />onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动<br />onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动</div>
<div>代码如下:</div>
<div>&lt;marquee onMouseOut="this.start()" onMouseOver="this.stop()"&gt;onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动&lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div>这是一个完整的例子：</div>
<div><br />代码如下:</div>
<div>&lt;marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()"&gt;<br />这是一个完整的例子<br />&lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div><br />该标签支持的属性多达11个：</div>
<div>&nbsp;</div>
<div><br />align<br />设定&lt;marquee&gt;标签内容的对齐方式<br />absbottom：绝对底部对齐（与g、p等字母的最下端对齐）<br />absmiddle：绝对中央对齐<br />baseline：底线对齐<br />bottom：底部对齐（默认）<br />left：左对齐<br />middle：中间对齐<br />right：右对齐<br />texttop：顶线对齐<br />top：顶部对齐</div>
<div><br />代码如下:</div>
<div>&lt;marquee align="absbottom"&gt;align="absbottom"：绝对底部对齐（与g、p等字母的最下端对齐）。 &lt;/marquee&gt;<br />&lt;marquee align="absmiddle"&gt;align="absmiddle"： 绝对中央对齐。 &lt;/marquee&gt;<br />&lt;marquee align="baseline"&gt;align="baseline"： 底线对齐。 &lt;/marquee&gt;<br />&lt;marquee align="bottom"&gt;align="bottom"： 底部对齐（默认）。 &lt;/marquee&gt;<br />&lt;marquee align="left"&gt;align="left"： 左对齐。 &lt;/marquee&gt;<br />&lt;marquee align="center"&gt;align="middle"： 中间对齐。 &lt;/marquee&gt;<br />&lt;marquee align="right"&gt;align="right"： 右对齐。 &lt;/marquee&gt;<br />&lt;marquee align="texttop"&gt;align="texttop"： 顶线对齐。 &lt;/marquee&gt;<br />&lt;marquee align="top"&gt;align="top"： 顶部对齐。 &lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div><br />behavior<br />设定滚动的方式：<br />alternate： 表示在两端之间来回滚动。<br />scroll： 表示由一端滚动到另一端，会重复。<br />slide：&nbsp; 表示由一端滚动到另一端，不会重复。</div>
<div>代码如下:</div>
<div>&lt;marquee behavior="alternate"&gt;alternate：表示在两端之间来回滚动。 &lt;/marquee&gt;<br />&lt;marquee behavior="scroll"&gt;scroll：表示由一端滚动到另一端，会重复。&lt;/marquee&gt;<br />&lt;marquee behavior="slide"&gt;slide：&nbsp; 表示由一端滚动到另一端，不会重复。&lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div><br />bgcolor<br />设定活动字幕的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设定。</div>
<div>代码如下:</div>
<div>&lt;marquee bgcolor="#006699"&gt;设定活动字幕的背景颜色 bgcolor="#006699"&lt;/marquee&gt;<br />&lt;marquee bgcolor="RGB(10%,50%,100%,)"&gt;设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"&lt;/marquee&gt;<br />&lt;marquee bgcolor="red"&gt;设定活动字幕的背景颜色 bgcolor="red"&lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div><br />direction<br />设定活动字幕的滚动方向</div>
<div>代码如下:</div>
<div>&lt;marquee direction="down"&gt;设定活动字幕的滚动方向direction="down"：向下&lt;/marquee&gt;<br />&lt;marquee direction="left"&gt;设定活动字幕的滚动方向direction="left"：向左&lt;/marquee&gt;<br />&lt;marquee direction="right"&gt;设定活动字幕的滚动方向direction="right"：向右&lt;/marquee&gt;<br />&lt;marquee direction="up"&gt;设定活动字幕的滚动方向direction="up"：向上&lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div><br />height<br />设定活动字幕的高度</div>
<div>代码如下:<br />&lt;marquee height="500" direction="down" bgcolor="#CCCCCC"&gt;设定活动字幕的高度height="500"&lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div><br />width<br />设定活动字幕的宽度</div>
<div>代码如下:<br />&lt;marquee width="500" bgcolor="#CCCCCC"&gt;设定活动字幕的宽度width="500"&lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div>hspace<br />设定活动字幕里所在的位置距离父容器水平边框的距离<br />This controls the horizontal（水平）space around the display box.</div>
<div>代码如下:</div>
<div>&nbsp; &lt;table width="500" border="1" align="center" cellpadding="0" cellspacing="0"&gt;<br />&nbsp;&nbsp;&nbsp; &lt;tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;marquee hspace="100" bgcolor="#CCCCCC"&gt;hspace="100"&lt;/marquee&gt;&lt;/td&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/tr&gt;<br />&nbsp; &lt;/table&gt;</div>
<div>&nbsp;</div>
<div><br />vspace<br />设定活动字幕里所在的位置距离父容器垂直边框的距离<br />This controls the vertical（垂直） space around the display box.</div>
<div>代码如下:<br />&lt;marquee vspace="100" bgcolor="#CCCCCC"&gt;hspace="100"&lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div>loop<br />设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1</div>
<div>代码如下:</div>
<div>&lt;marquee loop="-1" bgcolor="#CCCCCC"&gt;我会不停地走。&lt;/marquee&gt;<br />&lt;p&gt;&amp;nbsp;&lt;/p&gt;<br />&lt;marquee loop="2" bgcolor="#CCCCCC"&gt;我只走两次哦&lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div><br />scrollamount<br />设定活动字幕的滚动速度，单位pixels</div>
<div>代码如下:</div>
<div>&lt;marquee scrollamount="10" &gt;scrollamount="10" &lt;/marquee&gt;<br />&lt;marquee scrollamount="20" &gt;scrollamount="20" &lt;/marquee&gt;<br />&lt;marquee scrollamount="30" &gt;scrollamount="30" &lt;/marquee&gt;</div>
<div>&nbsp;</div>
<div><br />scrolldelay<br />设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒）<br />值大了会有一步一停顿的效果</div>
<div>代码如下:</div>
<div>&lt;marquee scrolldelay="10" &gt;scrolldelay="10" &lt;/marquee&gt;<br />&lt;marquee scrolldelay="100" &gt; scrolldelay="100"&lt;/marquee&gt;<br />&lt;marquee scrolldelay="1000"&gt;scrolldelay="1000" &lt;/marquee&gt;</div></div><img src ="http://www.blogjava.net/soken/aggbug/355512.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/soken/" target="_blank">soken</a> 2011-08-01 19:21 <a href="http://www.blogjava.net/soken/articles/355512.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>jquery validate</title><link>http://www.blogjava.net/soken/articles/355156.html</link><dc:creator>soken</dc:creator><author>soken</author><pubDate>Wed, 27 Jul 2011 08:28:00 GMT</pubDate><guid>http://www.blogjava.net/soken/articles/355156.html</guid><description><![CDATA[<p style="text-align: left; line-height: 150%" align="left"><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">做网页表单经常要用到数据</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">的功能</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">.</span><strong><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">JavaScript</span></strong><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">是一种比较常用的手段。最近写页面写得比较多，发现了一个比较好用的</span><strong><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">js</span></strong><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">框架</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">--</span><strong><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">jQuery.validate</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">。她是一款基于</span><strong><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">jquery</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">的</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">工具，基本可以满足我们大多数的页面</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">需要，且支持</span><strong><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">ajax</span></strong><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">。支持各种自定义的扩展，包括自定义</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">规则，自定义错误显示的方式等。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"> </span></p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">通过一段时间的使用，感觉用起来还是非常简单的。这里做一下使用方法的简单介绍，而后会介绍一个我自己扩展的一种错误提示方式（感觉默认的信息提示的方式比较一般实在不怎么好看）。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">闲话少说，先说下用法：</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">先导入必要的两个</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">js</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">文件</span></p>
<p style="text-align: left; line-height: 150%" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">XML/HTML</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">代码</span></p>
<p>&lt;script&nbsp;type="text/javascript"&nbsp;src="lib/jquery-1.4.2.min.js"&gt;&lt;/script&gt;&nbsp;&nbsp;</p>
<p>&lt;script&nbsp;type="text/javascript"&nbsp;src="lib/jquery.validate.js"&gt;&lt;/script&gt;&nbsp;&nbsp;</p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"><span style="line-height: 150%; font-family: 宋体">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="line-height: 150%; font-family: 宋体">另外还有一段css，用来突出显示出错的表单控件和错误信息的显示样式:</span></p>
<p style="text-align: left; line-height: 150%" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">CSS</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">代码</span></p>
<p>input.error&nbsp;{&nbsp;border:&nbsp;1px&nbsp;dotted&nbsp;red;&nbsp;} &nbsp;&nbsp;</p>
<p>label.error&nbsp;{ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;red;display:&nbsp;none; &nbsp;&nbsp;</p>
<p>} &nbsp;&nbsp;</p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; label.error </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">的</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">display: none</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">是为了让我们可以在页面上任意位置放置显示错误的</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">label</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">以及上面的内容，并在没有进行</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">时不显示出来。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">需要的东西都齐了，我们可以为我们的表单元素添加</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">了。添加</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">的方法总的说有两种：一种写在控件的标签上；另一种写在</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">js</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">脚本中。并且两种方法可混合使用。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">第一种写在标签中的如下：</span></p>
<p style="text-align: left; line-height: 150%" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">XML/HTML</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">代码</span></p>
<p>&lt;input&nbsp;type="text"&nbsp;class="required&nbsp;number"&nbsp;max="10"&nbsp;name="t1"&gt;&nbsp;&nbsp;</p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; class="required number" </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">表示必须字段且为数值型，</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">max="10" </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">表示最大值为</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">10</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">另一种使用</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">JavaScript</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">脚本的写法如下</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">:</span></p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left">&nbsp;</p>
<p style="text-align: left; line-height: 150%" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">XML/HTML</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">代码</span></p>
<p>&lt;script&nbsp;type="text/javascript"&gt;&nbsp;&nbsp;</p>
<p>$('#test_form').validate({ &nbsp;&nbsp;</p>
<p>rules:{ &nbsp;&nbsp;</p>
<p>&nbsp;t2&nbsp;:&nbsp;{required:true,number:true} &nbsp;&nbsp;</p>
<p>}, &nbsp;&nbsp;</p>
<p>messages:{t2:{required&nbsp;:"<span style="font-family: 宋体">这个字段你必须填</span>~~<span style="font-family: 宋体">！</span>",number:"<span style="font-family: 宋体">这个字段真可以是数字</span>"}} &nbsp;&nbsp;</p>
<p>}); &nbsp;&nbsp;</p>
<p>&lt;/script&gt;&nbsp;&nbsp;</p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">其中</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">test_form</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">是表单</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">form</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">的</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">id</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">，</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">t2</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">是需要</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">的控件的名字。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">rules</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">后面的</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">json</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">描述的是</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">规则，</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">messages</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">是自定义的错误信息。顺便说一句，有时候我们</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">form</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">中控件的</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">name</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">中是带</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&#8220;.&#8221;</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">的，比如：</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">user.name,</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">这时候用</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">js</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">脚本定义</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">规则时，需要加上引号：</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&#8221;user.name&#8221;</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">这两种写法各有利弊，直接写在控件标签上的比较简单直观，相对来说</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">js</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">的写法过于复杂，可灵活性更强。而且有时候我们可能没机会在控件的标签上写规则，假如我们用了标签库，如</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">struts</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">标签库，有些标签我们写上</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">max=&#8220;10&#8221;</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">这样的东西，标签库将无法解析直接报错。总之，这两种写法</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">jQuery.validate</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">都认识，我们在合适的场景选择合适的方式就可以了。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">另外，如果你想把规则写在控件的标签上，仅仅写上规则是不行的，还需要在页面加载完的时候调用一下</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">$('#test_form').validate();</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">为</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">form</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">添加</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">，这样在你点提交按钮的时候就会自动</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">了。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">说了这么多，该上个图了，看看</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">的效果：</span></p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&nbsp; </span></p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">成功了，</span><strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">校验</span></strong><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">的效果有了，表单也不会被提交。可能有的同学要说了，</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&#8220;</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">要不要这么难看啊？</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&#8221;</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">。这正是我下面要解决的问题。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">我们来自定义一个错误显示的方式，效果如下：</span></p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"></p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">错误控件突出显示的方式没有改，为了兼容有些浏览器有些控件比如火狐中单选按钮没法标注红框的问题，在每个错误的控件后面放了一个红色的小叉号，另外当鼠标移动到错误控件或者小叉号上时显示错误的信息。</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">实现这个效果的主要</span><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">js</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">代码如下：</span></p>
<p style="text-align: left; line-height: 150%" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">JavaScript</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">代码</span></p>
<p>function&nbsp;showErrors(){ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;t&nbsp;=&nbsp;this; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(&nbsp;var&nbsp;i&nbsp;=&nbsp;0;&nbsp;this.errorList[i];&nbsp;i++&nbsp;)&nbsp;{ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;error&nbsp;=&nbsp;this.errorList[i]; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.settings.highlight&nbsp;&amp;&amp;&nbsp;this.settings.highlight.call(&nbsp;this,&nbsp;error.element,&nbsp;this.settings.errorClass,&nbsp;this.settings.validClass&nbsp;); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;elename&nbsp;=&nbsp;this.idOrName(error.element); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;<span style="font-family: 宋体">错误信息</span>div &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;errdiv&nbsp;=&nbsp;$('div[htmlfor='+&nbsp;elename&nbsp;+&nbsp;']'); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;errimg&nbsp;=&nbsp;$('img[htmlfor='+&nbsp;elename&nbsp;+&nbsp;']'); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(errdiv.length&nbsp;==&nbsp;0){&nbsp;//&nbsp;<span style="font-family: 宋体">没有</span>div<span style="font-family: 宋体">则创建</span> <span>&nbsp;&nbsp;</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;<span style="font-family: 宋体">纯</span>css<span style="font-family: 宋体">不用图片的圆角</span>div<span style="font-family: 宋体">，存在在</span>IE6<span style="font-family: 宋体">下显示过长的问题</span> <span>&nbsp;&nbsp;</span></p>
<p>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errdiv&nbsp;=&nbsp;$('&lt;div&gt;'&nbsp; &nbsp;&nbsp;</p>
<p>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;'&lt;b&nbsp;class="rtop"&gt;&lt;b&nbsp;class="r1"&gt;&lt;/b&gt;&lt;b&nbsp;class="r2"&gt;&lt;/b&gt;&lt;b&nbsp;class="r3"&gt;&lt;/b&gt;&lt;b&nbsp;class="r4"&gt;&lt;/b&gt;&lt;/b&gt;' &nbsp;&nbsp;</p>
<p>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;'&lt;span&nbsp;class="errmsg"&gt;&nbsp;&lt;/span&gt;' &nbsp;&nbsp;</p>
<p>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;'&lt;b&nbsp;class="rbottom"&gt;&lt;b&nbsp;class="r4"&gt;&lt;/b&gt;&lt;b&nbsp;class="r3"&gt;&lt;/b&gt;&lt;b&nbsp;class="r2"&gt;&lt;/b&gt;&lt;b&nbsp;class="r1"&gt;&lt;/b&gt;&lt;/b&gt;&nbsp;' &nbsp;&nbsp;</p>
<p>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;'&lt;/div&gt;&nbsp;'); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;<span style="font-family: 宋体">带图片的圆角</span>div<span style="font-family: 宋体">在所有浏览器兼容</span> <span>&nbsp;&nbsp;</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errdiv&nbsp;=&nbsp;$('&lt;div&gt;'&nbsp; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;'&lt;img&nbsp;src="img/left_icon.gif"&nbsp;width="6"&nbsp;height="24"&nbsp;align="absmiddle"&nbsp;class="fl"&nbsp;/&gt;'&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;'&lt;div&nbsp;class="errmsgdiv&nbsp;fl&nbsp;errmsg"&gt;&lt;/div&gt;'&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;'&lt;img&nbsp;src="img/right_icon.gif"&nbsp;width="6"&nbsp;height="24"&nbsp;align="absmiddle"&nbsp;class="fl"&nbsp;/&gt;'&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;'&lt;/div&gt;'); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errdiv.attr({"for":&nbsp;&nbsp;this.idOrName(error.element),&nbsp;generated:&nbsp;true}) &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.addClass(this.settings.errorClass); &nbsp;&nbsp;</p>
<p>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errdiv.css({left&nbsp;:&nbsp;$.getLeft(error.element)&nbsp;+&nbsp;'px',top&nbsp;:&nbsp;$.getTop(error.element)&nbsp;+&nbsp;'px'});&nbsp;//&nbsp;<span style="font-family: 宋体">显示在控件的下面</span> <span>&nbsp;&nbsp;</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errdiv.appendTo($('body')); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(errimg.length&nbsp;==&nbsp;0){&nbsp;//&nbsp;<span style="font-family: 宋体">没有</span>img<span style="font-family: 宋体">则创建</span> <span>&nbsp;&nbsp;</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errimg&nbsp;=&nbsp;$('&lt;img&nbsp;alt="<span style="font-family: 宋体">错误</span>"&nbsp;src="img/unchecked.gif"&gt;') &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errimg.attr({"for":&nbsp;&nbsp;this.idOrName(error.element),&nbsp;generated:&nbsp;true}); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errimg.insertAfter(error.element); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errimg.show(); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errdiv.find(".errmsg").html(error.message&nbsp;||&nbsp;""); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;<span style="font-family: 宋体">鼠标放到图片显示错误</span> <span>&nbsp;&nbsp;</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(errimg).hover(function(e){ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('div[htmlfor="'+&nbsp;$(this).attr('htmlfor')&nbsp;+&nbsp;'"]').css({left&nbsp;:&nbsp;(e.pageX+20)&nbsp;+&nbsp;'px',top&nbsp;:&nbsp;(e.pageY+20)&nbsp;+&nbsp;'px'});&nbsp;//&nbsp;<span style="font-family: 宋体">显示在鼠标位置偏移</span>20<span style="font-family: 宋体">的位置</span> <span>&nbsp;&nbsp;</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('div[htmlfor="'+&nbsp;$(this).attr('htmlfor')&nbsp;+&nbsp;'"]').fadeIn(200); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(){ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('div[htmlfor="'+&nbsp;$(this).attr('htmlfor')&nbsp;+&nbsp;'"]').fadeOut(200); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;<span style="font-family: 宋体">鼠标放到控件上显示错误</span> <span>&nbsp;&nbsp;</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(error.element).hover(function(e){ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('div[htmlfor="'+&nbsp;t.idOrName(this)&nbsp;+&nbsp;'"]').css({left&nbsp;:&nbsp;(e.pageX+20)&nbsp;+&nbsp;'px',top&nbsp;:&nbsp;(e.pageY+20)&nbsp;+&nbsp;'px'});&nbsp;//&nbsp;<span style="font-family: 宋体">显示在鼠标位置偏移</span>20<span style="font-family: 宋体">的位置</span> <span>&nbsp;&nbsp;</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('div[htmlfor="'+&nbsp;t.idOrName(this)&nbsp;+&nbsp;'"]').fadeIn(200); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(){ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('div[htmlfor="'+&nbsp;t.idOrName(this)&nbsp;+&nbsp;'"]').fadeOut(200); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;<span style="font-family: 宋体">校验成功的去掉错误提示</span> <span>&nbsp;&nbsp;</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(&nbsp;var&nbsp;i&nbsp;=&nbsp;0;&nbsp;this.successList[i];&nbsp;i++&nbsp;)&nbsp;{ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('div[htmlfor="'+&nbsp;this.idOrName(this.successList[i])&nbsp;+&nbsp;'"]').remove(); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('img[htmlfor='+&nbsp;this.idOrName(this.successList[i])&nbsp;+&nbsp;']').hide(); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;<span style="font-family: 宋体">自定义高亮</span> <span>&nbsp;&nbsp;</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.settings.unhighlight)&nbsp;{ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(&nbsp;var&nbsp;i&nbsp;=&nbsp;0,&nbsp;elements&nbsp;=&nbsp;this.validElements();&nbsp;elements[i];&nbsp;i++&nbsp;)&nbsp;{ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.settings.unhighlight.call(&nbsp;this,&nbsp;elements[i],&nbsp;this.settings.errorClass,&nbsp;this.settings.validClass&nbsp;); &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;</p>
<p>$.extend({ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getLeft&nbsp;:&nbsp;function(object)&nbsp;{ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;go&nbsp;=&nbsp;object; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;oParent,&nbsp;oLeft&nbsp;=&nbsp;go.offsetLeft; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(go.offsetParent&nbsp;!=&nbsp;null)&nbsp;{ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oParent&nbsp;=&nbsp;go.offsetParent; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oLeft&nbsp;+=&nbsp;oParent.offsetLeft; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;go&nbsp;=&nbsp;oParent; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;oLeft; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getTop&nbsp;:&nbsp;function(object)&nbsp;{ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;go&nbsp;=&nbsp;object; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;goHeight&nbsp;=&nbsp;go.height; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;oParent,&nbsp;oTop&nbsp;=&nbsp;go.offsetTop; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(go.offsetParent&nbsp;!=&nbsp;null)&nbsp;{ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oParent&nbsp;=&nbsp;go.offsetParent; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oTop&nbsp;+=&nbsp;oParent.offsetTop; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;go&nbsp;=&nbsp;oParent; &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;oTop&nbsp;+&nbsp;22;//&nbsp;<span style="font-family: 宋体">之所以加</span>22<span style="font-family: 宋体">不加控件高度</span>,<span style="font-family: 宋体">为了兼容</span>ie6. &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;</p>
<p>}); &nbsp;&nbsp;</p>
<p>//&nbsp;<span style="font-family: 宋体">本地语言</span> <span>&nbsp;&nbsp;</span></p>
<p>jQuery.extend(jQuery.validator.messages,&nbsp;{ &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required:&nbsp;"<span style="font-family: 宋体">必选字段</span>", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remote:&nbsp;"<span style="font-family: 宋体">请修正该字段</span>", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;email:&nbsp;"<span style="font-family: 宋体">请输入正确格式的电子邮件</span>", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;"<span style="font-family: 宋体">请输入合法的网址</span>", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;date:&nbsp;"<span style="font-family: 宋体">请输入合法的日期</span>", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dateISO:&nbsp;"<span style="font-family: 宋体">请输入合法的日期</span>&nbsp;(ISO).", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number:&nbsp;"<span style="font-family: 宋体">请输入合法的数字</span>", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;digits:&nbsp;"<span style="font-family: 宋体">只能输入整数</span>", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;creditcard:&nbsp;"<span style="font-family: 宋体">请输入合法的信用卡号</span>", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;equalTo:&nbsp;"<span style="font-family: 宋体">请再次输入相同的值</span>", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;accept:&nbsp;"<span style="font-family: 宋体">请输入拥有合法后缀名的字符串</span>", &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maxlength:&nbsp;jQuery.validator.format("<span style="font-family: 宋体">请输入一个长度最多是</span>&nbsp;{0}&nbsp;<span style="font-family: 宋体">的字符串</span>"), &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minlength:&nbsp;jQuery.validator.format("<span style="font-family: 宋体">请输入一个长度最少是</span>&nbsp;{0}&nbsp;<span style="font-family: 宋体">的字符串</span>"), &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rangelength:&nbsp;jQuery.validator.format("<span style="font-family: 宋体">请输入一个长度介于</span>&nbsp;{0}&nbsp;<span style="font-family: 宋体">和</span>&nbsp;{1}&nbsp;<span style="font-family: 宋体">之间的字符串</span>"), &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range:&nbsp;jQuery.validator.format("<span style="font-family: 宋体">请输入一个介于</span>&nbsp;{0}&nbsp;<span style="font-family: 宋体">和</span>&nbsp;{1}&nbsp;<span style="font-family: 宋体">之间的值</span>"), &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max:&nbsp;jQuery.validator.format("<span style="font-family: 宋体">请输入一个最大为</span>&nbsp;{0}&nbsp;<span style="font-family: 宋体">的值</span>"), &nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min:&nbsp;jQuery.validator.format("<span style="font-family: 宋体">请输入一个最小为</span>&nbsp;{0}&nbsp;<span style="font-family: 宋体">的值</span>") &nbsp;&nbsp;</p>
<p>}); &nbsp;&nbsp;</p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体">自定义一个showErrors的方法，然后在为表单添加<strong>校验</strong>时，指定使用这个方法显示错误信息。</span></p>
<p style="text-align: left; line-height: 150%" align="left"><span style="line-height: 150%; font-family: 'Verdana','sans-serif'; font-size: 7.5pt">JavaScript</span><span style="line-height: 150%; font-family: 宋体; font-size: 7.5pt">代码</span></p>
<p>$('#test_form').validate({ &nbsp;&nbsp;</p>
<p>rules:{ &nbsp;&nbsp;</p>
<p>&nbsp;t2&nbsp;:&nbsp;{required:true,number:true} &nbsp;&nbsp;</p>
<p>}, &nbsp;&nbsp;</p>
<p>messages:{t2:{required&nbsp;:"<span style="font-family: 宋体">这个字段你必须填</span>~~<span style="font-family: 宋体">！</span>",number:"<span style="font-family: 宋体">这个字段真的可以是数字</span>"}}, &nbsp;&nbsp;</p>
<p>showErrors:&nbsp;showErrors&nbsp;&nbsp;//<span style="font-family: 宋体">使用自定义的错误显示方法</span> <span>&nbsp;&nbsp;</span></p>
<p>});&nbsp;&nbsp;</p>
<p style="text-align: left; line-height: 150%; margin: 2.7pt 0cm" align="left"><span style="line-height: 150%; font-family: 宋体">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="line-height: 150%; font-family: 宋体">这样子我们想要的效果就实现了，是不是感觉比原来的样子好多了呢？<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>jQuery.validate</strong>是一个非常灵活的<strong>JavaScript校验</strong>框架，上面只是介绍了一下基本的用法和自定义了一个错误显示的样式。一般的表单<strong>校验</strong>基本可以搞定了，不过一些比较特殊，比如身份证号的<strong>校验</strong>，页面上FCK编辑器的<strong>校验</strong>，还是需要我们自己来<strong>扩展</strong>的。个人感觉这是个很不错的<strong>js校验</strong>框架，所以介绍给大家，希望有所帮助。</span></p>
<p>&nbsp;</p><img src ="http://www.blogjava.net/soken/aggbug/355156.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/soken/" target="_blank">soken</a> 2011-07-27 16:28 <a href="http://www.blogjava.net/soken/articles/355156.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>jQuery对Radio/CheckBox的操作集合</title><link>http://www.blogjava.net/soken/articles/354875.html</link><dc:creator>soken</dc:creator><author>soken</author><pubDate>Fri, 22 Jul 2011 11:40:00 GMT</pubDate><guid>http://www.blogjava.net/soken/articles/354875.html</guid><description><![CDATA[<span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">input[name='radio_name'][checked]</span><span style="color: #000000">"</span><span style="color: #000000">).val();&nbsp; </span><span style="color: #008000">//</span><span style="color: #008000">选择被选中Radio的Value值</span><span style="color: #008000"><br /></span><span style="color: #000000">&nbsp;</span><span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">#text_id</span><span style="color: #000000">"</span><span style="color: #000000">).focus(</span><span style="color: #0000ff">function</span><span style="color: #000000">(){</span><span style="color: #008000">//</span><span style="color: #008000">code...}); //事件 当对象text_id获取焦点时触发</span><span style="color: #008000"><br /></span><span style="color: #000000">&nbsp;</span><span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">#text_id</span><span style="color: #000000">"</span><span style="color: #000000">).blur(</span><span style="color: #0000ff">function</span><span style="color: #000000">(){</span><span style="color: #008000">//</span><span style="color: #008000">code...});&nbsp; //事件 当对象text_id失去焦点时触发</span><span style="color: #008000"><br /></span><span style="color: #000000">&nbsp;</span><span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">#text_id</span><span style="color: #000000">"</span><span style="color: #000000">).select();&nbsp; </span><span style="color: #008000">//</span><span style="color: #008000">使文本框的Vlaue值成选中状态</span><span style="color: #008000"><br /></span><span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">input[name='radio_name'][value='要选中Radio的Value值'</span><span style="color: #000000">"</span><span style="color: #000000">).<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; attr(</span><span style="color: #000000">"</span><span style="color: #000000">checked</span><span style="color: #000000">"</span><span style="color: #000000">,</span><span style="color: #0000ff">true</span><span style="color: #000000">);&nbsp; </span><span style="color: #008000">//</span><span style="color: #008000">根据Value值设置Radio为选中状态</span><br /><br /><br /><br /><pre><div><span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">input[name='checkbox_name'][checked]</span><span style="color: #000000">"</span><span style="color: #000000">);  </span><span style="color: #008000">//</span><span style="color: #008000">选择被选中CheckBox元素的集合 如果你想得到<br />                                           Value值你需要遍历这个集合</span><span style="color: #008000"><br /></span><span style="color: #000000">$($(</span><span style="color: #000000">"</span><span style="color: #000000">input[name='checkbox_name'][checked]</span><span style="color: #000000">"</span><span style="color: #000000">)).<br />each(</span><span style="color: #0000ff">function</span><span style="color: #000000">(){arrChk</span><span style="color: #000000">+=</span><span style="color: #0000ff">this</span><span style="color: #000000">.value </span><span style="color: #000000">+</span><span style="color: #000000"> </span><span style="color: #000000">'</span><span style="color: #000000">,</span><span style="color: #000000">'</span><span style="color: #000000">;});</span><span style="color: #008000">//</span><span style="color: #008000">遍历被选中CheckBox元素的集合 得到Value值</span><span style="color: #008000"><br /></span><span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">#checkbox_id</span><span style="color: #000000">"</span><span style="color: #000000">).attr(</span><span style="color: #000000">"</span><span style="color: #000000">checked</span><span style="color: #000000">"</span><span style="color: #000000">);   </span><span style="color: #008000">//</span><span style="color: #008000">获取一个CheckBox的状态(有没有被选中,返回true/false)</span><span style="color: #008000"><br /></span><span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">#checkbox_id</span><span style="color: #000000">"</span><span style="color: #000000">).attr(</span><span style="color: #000000">"</span><span style="color: #000000">checked</span><span style="color: #000000">"</span><span style="color: #000000">,</span><span style="color: #0000ff">true</span><span style="color: #000000">); </span><span style="color: #008000">//</span><span style="color: #008000">设置一个CheckBox的状态为选中(checked=true)</span><span style="color: #008000"><br /></span><span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">#checkbox_id</span><span style="color: #000000">"</span><span style="color: #000000">).attr(</span><span style="color: #000000">"</span><span style="color: #000000">checked</span><span style="color: #000000">"</span><span style="color: #000000">,</span><span style="color: #0000ff">false</span><span style="color: #000000">); </span><span style="color: #008000">//</span><span style="color: #008000">设置一个CheckBox的状态为不选中(checked=false)</span><span style="color: #008000"><br /></span><span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">input[name='checkbox_name']</span><span style="color: #000000">"</span><span style="color: #000000">).attr<br />(</span><span style="color: #000000">"</span><span style="color: #000000">checked</span><span style="color: #000000">"</span><span style="color: #000000">,$(</span><span style="color: #000000">"</span><span style="color: #000000">#checkbox_id</span><span style="color: #000000">"</span><span style="color: #000000">).attr(</span><span style="color: #000000">"</span><span style="color: #000000">checked</span><span style="color: #000000">"</span><span style="color: #000000">));</span><span style="color: #008000">//</span><span style="color: #008000">根据3,4,5条，你可以分析分析这句代码的意思</span><span style="color: #008000">                                               </span><span style="color: #008000"><br /></span><span style="color: #000000">$(</span><span style="color: #000000">"</span><span style="color: #000000">#text_id</span><span style="color: #000000">"</span><span style="color: #000000">).val().split(</span><span style="color: #000000">"</span><span style="color: #000000">,</span><span style="color: #000000">"</span><span style="color: #000000">);  </span><span style="color: #008000">//</span><span style="color: #008000">将Text的Value值以','分隔 返回一个数组</span></div></pre><img src ="http://www.blogjava.net/soken/aggbug/354875.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/soken/" target="_blank">soken</a> 2011-07-22 19:40 <a href="http://www.blogjava.net/soken/articles/354875.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript中的scope</title><link>http://www.blogjava.net/soken/articles/342760.html</link><dc:creator>soken</dc:creator><author>soken</author><pubDate>Tue, 11 Jan 2011 04:27:00 GMT</pubDate><guid>http://www.blogjava.net/soken/articles/342760.html</guid><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp;只有注册用户登录后才能阅读该文。<a href='http://www.blogjava.net/soken/articles/342760.html'>阅读全文</a><img src ="http://www.blogjava.net/soken/aggbug/342760.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/soken/" target="_blank">soken</a> 2011-01-11 12:27 <a href="http://www.blogjava.net/soken/articles/342760.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>