【自创】jquery的 运用

多的


 使用 Jquery  插件集合 easyui 中的 弹框 iframe 时，发现附加的 src（即url）之后，页面为空，使用其它的页面时 可以显示， 后来 由经 chrom 中的调试，才发现是 载入的页面中含有 php 的语法错误，导致全部页面都无法显示，想起上次的某些个时候也由此情况，特有此一记，以待后期不犯此错误。

认识 noscript 
					
				
    元素用来定义在脚本未被执行时的替代内容（文本）。
    浏览器如果，无法识别  标签会把标签的内容显示到页面上。<br />
&nbsp; &nbsp; &nbsp;&nbsp;</span><span style="white-space:normal;font-family:Verdana, Arial, Helvetica, sans-serif;background-color:#F9F9F9;">如果识别<span style="line-height:17.98611068725586px;"><script> 标签</span>，那么它不会显示出 noscript 元素中的文本。</span><br style="white-space:normal;" />
<br />
				<div style="white-space:normal;">
					<p>
						<span style="color:#009900;font-size:16px;">eg：&nbsp;</span><span style="color:#009900;font-size:16px;"></span><span style="line-height:1.3;font-family:Consolas, monospace;font-size:16px;color:#009900;"><</span><span style="line-height:1.3;font-family:Consolas, monospace;font-size:16px;color:#009900;">noscript</span><span style="line-height:1.3;font-family:Consolas, monospace;font-size:16px;color:#009900;">></span><span style="line-height:1.3;font-family:Consolas, monospace;font-size:16px;color:#009900;">&nbsp;你的浏览器不识别 Javascript&nbsp;</span><span style="line-height:1.3;font-family:Consolas, monospace;font-size:16px;color:#009900;"><</span><span style="line-height:1.3;font-family:Consolas, monospace;font-size:16px;color:#009900;">/</span><span style="line-height:1.3;font-family:Consolas, monospace;font-size:16px;color:#009900;">noscript</span><span style="line-height:1.3;font-family:Consolas, monospace;font-size:16px;color:#009900;">> &nbsp; &nbsp;;;不识别Javascript的浏览器（好老的那种）才会显示标签中的内容。<br />
</span> 
					</p>
				</div>
</span> 
			</li>
		</ol>
	</div>
</div>
</span> <img src="/attachment/201303/21/26750788_1363865050JDXz.jpg" width="498" height="477" alt="" /><br />
<br />
<div>
	<p>
		<br />
	</p>
	<div>
		<div class="codeheads">
			<p>
				点击(<span style="cursor:pointer;color:red;" onclick="code_hide('code452')">此处</span>)折叠或打开
			</p>
		</div>
		<div id="code452" class="codeText">
			<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css">
				<li>
					<span style="color:#000000;">Jquery   元素选择，css 赋值<br />
</span> 
				</li>
				<li>
					<br />
				</li>
				<li>
					$<span style="color:#0000CC;">(</span><span style="color:#0000FF;">this</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">parent</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">next</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">children</span><span style="color:#0000CC;">(</span><span style="color:#FF00FF;">".refiname"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>css<span style="color:#0000CC;">(</span><span style="color:#0000CC;">{</span><span style="color:#0000FF;">float</span><span style="color:#0000CC;">:</span><span style="color:#FF00FF;">"right"</span><span style="color:#0000CC;">,</span><span style="color:#FF0000;">color</span><span style="color:#0000CC;">:</span><span style="color:#FF00FF;">"red"</span><span style="color:#0000CC;">,</span><span style="color:#FF0000;">margin</span><span style="color:#0000CC;">:</span><span style="color:#FF00FF;">"0px"</span><span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span><br />
				</li>
				<li>
					<br />
				</li>
				<li>
					该元素的父元素；的下一个元素；中class为refiname的子元素，为其设置css属性，用大括号包起来！
				</li>
			</ol>
		</div>
	</div>
	<p>
		<br />
	</p>
</div>
<br />
<div>
	<div>
		<p>
			<br />
		</p>
	</div>
	<div>
		<ol>
			<li>
				<br />
			</li>
			<li>
			</li>
			<li>
				<span style="font-size:medium;">&nbsp;&nbsp;<br />
				<div>
					<div class="codeheads">
						<p>
							<span style="font-size:16px;">Jquery 处理</span><span style="color:#009900;font-size:16px;">字符串空格</span> 
						</p>
					</div>
					<div id="code395" class="codeText">
						<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css">
							<li>
								<span style="color:#000000;"><span style="color:#FF0000;">&nbsp;</span></span> 
							</li>
							<li>
								<span style="color:#000000;"><span style="color:#FF0000;">String</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">prototype</span><span style="color:#0000CC;">.</span>trim <span style="color:#0000CC;">=</span>&nbsp;</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000FF;">function</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">(</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">)</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">{</span><span style="color:#5C5C5C;line-height:1.3;letter-spacing:0.1px;"> </span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000FF;">return</span><span style="color:#5C5C5C;line-height:1.3;letter-spacing:0.1px;"> </span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000FF;">this</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">.</span><span style="line-height:1.3;letter-spacing:0.1px;color:#FF0000;">replace</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">(</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">/</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">^</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">\</span><span style="color:#5C5C5C;line-height:1.3;letter-spacing:0.1px;">s</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">+</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">|</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">\</span><span style="color:#5C5C5C;line-height:1.3;letter-spacing:0.1px;">s</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">+</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">$</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">/</span><span style="color:#5C5C5C;line-height:1.3;letter-spacing:0.1px;">g</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">,</span><span style="line-height:1.3;letter-spacing:0.1px;color:#FF00FF;">""</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">)</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">}</span><span style="color:#5C5C5C;line-height:1.3;letter-spacing:0.1px;"> </span><span style="line-height:1.3;letter-spacing:0.1px;color:#FF9900;">//左右</span> 
							</li>
							<li>
								&nbsp;&nbsp;<span style="color:#FF0000;">String</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">prototype</span><span style="color:#0000CC;">.</span>ltrim <span style="color:#0000CC;">=</span> <span style="color:#0000FF;">function</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">{</span> <span style="color:#0000FF;">return</span> <span style="color:#0000FF;">this</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">replace</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">/</span><span style="color:#0000CC;">^</span><span style="color:#0000CC;">\</span>s<span style="color:#0000CC;">+</span><span style="color:#0000CC;">/</span>g<span style="color:#0000CC;">,</span><span style="color:#FF00FF;">""</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">}</span> <span style="color:#FF9900;">//左</span><br />
							</li>
							<li>
								&nbsp;&nbsp;<span style="color:#FF0000;">String</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">prototype</span><span style="color:#0000CC;">.</span>rtrim <span style="color:#0000CC;">=</span> <span style="color:#0000FF;">function</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">{</span> <span style="color:#0000FF;">return</span> <span style="color:#0000FF;">this</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">replace</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">/</span><span style="color:#0000CC;">\</span>s<span style="color:#0000CC;">+</span><span style="color:#0000CC;">$</span><span style="color:#0000CC;">/</span>g<span style="color:#0000CC;">,</span><span style="color:#FF00FF;">""</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">} //右&nbsp;</span> 
							</li>
							<li>
								<span style="color:#0000CC;">&nbsp;</span> 
							</li>
							<li>
								<span style="color:#0000CC;">&nbsp;&nbsp;<span style="white-space:normal;">&nbsp;看起来不怎么样， 动用了两次正则替换，实际速度非常惊人，主要得益于浏览器的内部优化。</span></span> 
							</li>
							<li>
								<span style="color:#0000CC;">缺点是，不能给去除中间的空格字符！</span> 
							</li>
							<li>
								<span style="color:#0000CC;"><span style="color:#0000CC;font-size:18px;line-height:27px;white-space:normal;">参考地址：</span> 【里面有解释其它js实现的方式】</span> 
							</li>
							<li>
								<span style="color:#0000CC;">&nbsp;</span> 
							</li>
							<li>
								<span style="color:#0000CC;"><br />
</span> 
							</li>
						</ol>
					</div>
				</div>
<br />
</span> 
			</li>
			<li>
				<br />
			</li>
			<li>
				&nbsp; &nbsp;
			</li>
			<li>
				<span style="color:#0000CC;font-size:18px;"><br />
</span> 
			</li>
		</ol>
	</div>
</div>
<br />
<div>
	<div>
		<p>
			<span style="color:#006600;font-size:18px;font-weight:bold;line-height:25px;background-color:#FFFFFF;">Jquery &nbsp; 获取input，div，span。。。的value，那么的值</span> 
		</p>
	</div>
	<div>
		<ol>
			<li>
				<span style="color:#000000;"><span style="font-size:18px;"><br />
</span></span> 
			</li>
			<li>
				<span style="color:#000000;"><span style="font-size:18px;">var &nbsp;filname </span><span style="color:#0000CC;font-size:18px;">=</span><span style="font-size:18px;"> $</span><span style="color:#0000CC;font-size:18px;">(</span><span style="color:#0000FF;font-size:18px;">this</span><span style="color:#0000CC;font-size:18px;">)</span><span style="color:#0000CC;font-size:18px;">.</span><span style="font-size:18px;">attr</span><span style="color:#0000CC;font-size:18px;">(</span><span style="color:#FF00FF;font-size:18px;">"value"</span><span style="color:#0000CC;font-size:18px;">)</span><span style="color:#0000CC;font-size:18px;">;</span><span style="font-size:16px;"><span style="font-size:18px;">&nbsp;</span>&nbsp; // 事件触发，获取相应的值，赋给变量filename</span></span> 
			</li>
			<li>
				<span style="color:#000000;"><span style="font-size:16px;">&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//value可替换为name之类的属性；</span></span> 
			</li>
			<li>
				<span style="color:#000000;"><span style="font-size:16px;">&nbsp;&nbsp;</span></span> 
			</li>
		</ol>
	</div>
</div>
<br />
<br />
<div>
	<div>
		<p>
			<br />
		</p>
		<div>
			<div class="codeheads">
				<p>
					<span style="font-family:Consolas, monospace;line-height:15px;white-space:normal;background-color:#FFFFFF;font-size:16px;color:#009900;">A</span><span style="font-family:Consolas, monospace;line-height:15px;white-space:normal;background-color:#FFFFFF;font-size:16px;color:#009900;">jax POST 方法的使用&nbsp;</span> 
				</p>
			</div>
			<div id="code113" class="codeText">
				<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css">
					<li>
						<span style="color:#000000;"><br />
</span> 
					</li>
					<li>
						<span style="color:#EE33EE;">//传2值</span> 
					</li>
					<li>
						$<span style="color:#0000CC;">.</span>post<span style="color:#0000CC;">(</span>http<span style="color:#0000CC;">:</span><span style="color:#FF9900;">//localhost/index.php,<span style="color:#E53333;">{name:name1,sex: sex1}</span>,function(data){</span><br />
					</li>
					<li>
						&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#FF0000;">alert</span><span style="color:#0000CC;">(</span><span style="color:#FF0000;">data</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span><br />
					</li>
					<li>
						<span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><br />
					</li>
					<li>
						<span style="color:#0000CC;">data 为标准名称，不能用其它的变量替换，不信你试试。</span> 
					</li>
					<li>
						<span style="color:#0000CC;"><br />
</span> 
					</li>
					<li>
						<span style="color:#EE33EE;">//传一值，birthday为在js中预先定义过的变量。</span> 
					</li>
					<li>
						<span style="color:#5C5C5C;line-height:1.3;letter-spacing:0.1px;">$</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">.</span><span style="color:#5C5C5C;line-height:1.3;letter-spacing:0.1px;">post</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">(“</span><span style="color:#5C5C5C;line-height:1.3;letter-spacing:0.1px;">http</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">:</span><span style="line-height:1.3;letter-spacing:0.1px;color:#FF9900;">//localhost/index.php”<span style="color:#E53333;">+ birthday</span>,function(data){</span> 
					</li>
					<li>
						<span style="color:#5C5C5C;line-height:1.3;letter-spacing:0.1px;">&nbsp; &nbsp;&nbsp;</span><span style="line-height:1.3;letter-spacing:0.1px;color:#FF0000;">alert</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">(</span><span style="line-height:1.3;letter-spacing:0.1px;color:#FF0000;">data</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">)</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">;</span> 
					</li>
					<li>
						<span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">}</span><span style="line-height:1.3;letter-spacing:0.1px;color:#0000CC;">)</span> 
					</li>
					<li>
						<span style="color:#0000CC;"><br />
</span> 
					</li>
					<li>
						该函数通常由三部分组成：<span style="color:#006600;">目标页面，值或数组值，回执函数。</span><br />
					</li>
					<li>
						目标页面一般用引号包含起来；<br />
					</li>
					<li>
						<span style="color:#337FE5;">name为传到目标页面值的名称，name1 为该文件内获取的值，可能是input得到的，也可能是php传的值，同样于sex，原则是可以传尽可能多的参数；</span><br />
					</li>
					<li>
						<span style="color:#337FE5;">&nbsp;&nbsp;&nbsp;&nbsp;在目标页面通过$_POST</span><span style="color:#337FE5;">[</span><span style="color:#337FE5;">‘name’</span><span style="color:#337FE5;">]</span><span style="color:#337FE5;"> 和 $_POST</span><span style="color:#337FE5;">[</span><span style="color:#337FE5;">‘sex’</span><span style="color:#337FE5;">]</span><span style="color:#337FE5;"> 获取传过来的值。</span><br />
					</li>
					<li>
						<span style="color:#4C33E5;font-size:16px;">Noting</span><span style="color:#4C33E5;font-size:16px;">(</span><span style="color:#4C33E5;font-size:16px;">注意</span><span style="color:#4C33E5;font-size:16px;">)</span><span style="color:#4C33E5;font-size:16px;">：<span style="color:#000000;">Function中的data值为目标页面打印输出的值，注意是打印输出的值而不是return的值。</span></span><br />
					</li>
					<li>
						<span style="font-size:14px;"><br />
</span> 
					</li>
					<li>
						<span style="font-size:14px;">补充关于post中文参数的问题： </span><br />
					</li>
					<li>
						<span style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ajax中使用Post提交中文及参数传递时，如果直接使用的是中文参数，这时在后台解析request便得不到中文；或者产生中文参数乱码的问题。</span><br />
					</li>
					<li>
						<span style="font-size:14px;">那么，此时就要用中js中的字符转码函数encodeURIComponent</span><span style="color:#0000CC;font-size:14px;">(</span><span style="color:#0000CC;font-size:14px;">)</span><span style="font-size:14px;"> ，然后在PHP服务器端使用rawurldecode函数解码即可使用。</span> 
					</li>
				</ol>
			</div>
		</div>
		<p>
			<br />
		</p>
	</div>
	<div>
		<ol>
			<li>
				<span style="font-size:18px;color:#333333;"><span style="color:#006600;"><span style="color:#454545;font-family:'Arial Black';font-size:16px;line-height:21px;background-color:#FFFFFF;"><span>在浏览器地址栏输入javascript:alert (document. cookie)就可以 弹出一个对话框显示本网站颁发的所有<span style="color:#009900;">Cookie的内容</span></span><span></span></span></span></span> 
			</li>
		</ol>
	</div>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;<br />
<br />
<div>
	<div class="codeheads">
		<p>
			点击(<span style="cursor:pointer;color:red;" onclick="code_hide('code967')">此处</span>) <span style="font-size:18px;">随机数</span> 
		</p>
	</div>
	<div id="code967" class="codeText">
		<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css">
			<li>
				<span style="color:#000000;"><span style="color:#FF9900;">&nbsp;&nbsp;&nbsp;&nbsp;/*<span style="color:#006600;">function：更换标签的背景图片</span><br />
</span></span> 
			</li>
			<li>
				<span style="color:#000000;"><span style="color:#FF9900;"><span style="color:#006600;">&nbsp; &nbsp; * bgimg 为图片背景的url地址，如：<br />
</span></span></span> 
			</li>
			<li>
				<span style="color:#000000;"><span style="color:#FF9900;"><span style="color:#006600;">&nbsp; &nbsp; *&nbsp;&nbsp;&nbsp;&nbsp;$bgimg&nbsp;= "http://localhost/file/images/login/".mt_rand(1,13).".jpg";<br />
</span></span></span> 
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp; *&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("body").css("background-image","url("+bgimg+")");<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;*/<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#FF9900;">/*<span style="color:#006600;"> function：javascript 生成随机数</span><br />
</span> 
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;*<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function GetRandomNum(Min,Max) {<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var Range = Max - Min;<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var Rand = Math.random();<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(Min + Math.round(Rand * Range));<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var num = GetRandomNum(1,10);<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(num);<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;*/
			</li>
		</ol>
	</div>
</div>
<br />
<br />
<br />
<div>
	<div class="codeheads">
		<p>
			账号，密码 登录界面的设计 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;(<span style="cursor:pointer;color:red;" onclick="code_hide('code453')">此处</span>) &nbsp;默认显示 input的文本内容，以及点击隐藏内容的实现。
		</p>
	</div>
	<div id="code453" class="codeText">
		<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css">
			<li>
				<span style="color:#000000;">&nbsp;密码框设计的时候，最初想法是：</span> 
			</li>
			<li>
				<span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;触发事件的时候，能够将input的type属性改掉，然后测试下，发现没用，还以为哪里出问题了呢，后来百度了下，原因是 type属性是input的只读属性，改不了的。肯定的是，IE下是不能改的。</span> 
			</li>
			<li>
				<span style="color:#000000;">&nbsp;于是找了另外一种方法。</span> 
			</li>
			<li>
				<span style="color:#000000;">&nbsp;</span> 
			</li>
			<li>
				<span style="color:#000000;">##账号的</span> 
			</li>
			<li>
				<span style="color:#000000;">$<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"#username"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">focus</span><span style="color:#0000CC;">(</span><span style="color:#0000FF;">function</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">{&nbsp; &nbsp; // username 为input的text的id</span><br />
</span> 
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$<span style="color:#0000CC;">(</span><span style="color:#0000FF;">this</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>val<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">""</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span><br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$<span style="color:#0000CC;">(</span><span style="color:#0000FF;">this</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">blur</span><span style="color:#0000CC;">(</span><span style="color:#0000FF;">function</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">{</span><br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$<span style="color:#0000CC;">(</span><span style="color:#0000FF;">this</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>val<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"账号/用户名"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span><br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span><br />
			</li>
			<li>
				<br />
			</li>
			<li>
				<span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span><br />
			</li>
			<li>
				#密码的 &nbsp;<br />
			</li>
			<li>
				$<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"input[name=passpromt]"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">focus</span><span style="color:#0000CC;">(</span><span style="color:#0000FF;">function</span> <span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span> <span style="color:#0000CC;">{</span> <br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"input[name=passpromt]"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">hide</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span> <br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"input[name=userpass]"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">show</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">focus</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span>&nbsp;
			</li>
			<li>
				<br />
			</li>
			<li>
				<span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span> <br />
			</li>
			<li>
				$<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"input[name=userpass]"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">blur</span><span style="color:#0000CC;">(</span><span style="color:#0000FF;">function</span> <span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span> <span style="color:#0000CC;">{</span> <br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#0000FF;">if</span> <span style="color:#0000CC;">(</span><span style="color:#0000CC;">$</span><span style="color:#0000CC;">(</span><span style="color:#0000FF;">this</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>val<span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span> <span style="color:#0000CC;">=</span><span style="color:#0000CC;">=</span> <span style="color:#FF00FF;">""</span><span style="color:#0000CC;">)</span> <span style="color:#0000CC;">{</span> <br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"input[name=passpromt]"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">show</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span> <br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"input[name=userpass]"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">hide</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span> <br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#0000CC;">}</span> <br />
			</li>
			<li>
				<span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span> 
			</li>
			<li>
				<span style="color:#0000CC;">&nbsp;&nbsp;</span> 
			</li>
			<li>
				<span style="color:#0000cc;">此处为密码的隐藏用了2个input，一个是type为text的input，另一个是type为password。</span> 
			</li>
			<li>
				<span style="color:#0000cc;">默认显示 text的，点击到输入框的时候触发事件，隐藏text，显示password。&nbsp;</span> 
			</li>
			<li>
				<span style="color:#0000cc;"><br />
</span> 
			</li>
		</ol>
	</div>
</div>
<br />
<div>
	<div class="codeheads">
		<p>
			<span style="color:#FF9900;font-family:Consolas, monospace;line-height:15px;white-space:normal;background-color:#E53333;font-size:16px;"><span style="background-color:#64451D;color:#DFC5A4;">/</span><span style="background-color:#64451D;color:#DFC5A4;">* 监视回车按钮触发登录 */</span><span style="background-color:#64451D;color:#DFC5A4;"></span></span> 
		</p>
	</div>
	<div id="code359" class="codeText">
		<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css">
			<li>
				&nbsp;监视键盘的回车 Enter 按钮触发事件
			</li>
			<li>
				&nbsp; &nbsp; //<span style="color:#FF00FF;font-family:Consolas, monospace;line-height:15px;white-space:normal;background-color:#FFFFFF;">login &nbsp; &nbsp;</span>为id为login的input
			</li>
			<li>
				&nbsp; &nbsp; //<span style="color:#FF00FF;font-family:Consolas, monospace;line-height:15px;white-space:normal;background-color:#FFFFFF;">click</span>&nbsp; &nbsp; 为触发的事件类型
			</li>
			<li>
				&nbsp; &nbsp; //&nbsp;<span style="color:#FF0000;font-family:Consolas, monospace;line-height:15px;white-space:normal;">event</span><span style="color:#0000CC;font-family:Consolas, monospace;line-height:15px;white-space:normal;">.</span><span style="color:#FF0000;font-family:Consolas, monospace;line-height:15px;white-space:normal;">keyCode</span><span style="color:#5C5C5C;font-family:Consolas, monospace;line-height:15px;white-space:normal;background-color:#FFFFFF;">&nbsp;</span><span style="color:#0000CC;font-family:Consolas, monospace;line-height:15px;white-space:normal;">=</span><span style="color:#0000CC;font-family:Consolas, monospace;line-height:15px;white-space:normal;">=</span><span style="color:#5C5C5C;font-family:Consolas, monospace;line-height:15px;white-space:normal;background-color:#FFFFFF;">&nbsp;13</span>&nbsp; &nbsp; 响应类型代码为 13，固定的，指Enter那个键，其它的按钮的话这个值需要改变
			</li>
			<li>
				<br />
			</li>
			<li>
				&nbsp;&nbsp;$<span style="color:#0000CC;">(</span><span style="color:#FF0000;">document</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>keydown<span style="color:#0000CC;">(</span><span style="color:#0000FF;">function</span> <span style="color:#0000CC;">(</span><span style="color:#FF0000;">event</span><span style="color:#0000CC;">)</span> <span style="color:#0000CC;">{</span> <br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#0000FF;">if</span> <span style="color:#0000CC;">(</span><span style="color:#FF0000;">event</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">keyCode</span> <span style="color:#0000CC;">=</span><span style="color:#0000CC;">=</span> 13<span style="color:#0000CC;">)</span> <span style="color:#0000CC;">{</span> <br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">'#login'</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>triggerHandler<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">'click'</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span> <br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#0000CC;">}</span> <br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;<span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span> 
			</li>
		</ol>
	</div>
</div>
<br />
&nbsp;<br />
<div>
	<div class="codeheads">
		<p>
			JS 正则表达式。。小用
		</p>
	</div>
	<div id="code520" class="codeText">
		<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css">
			<li>
				<span style="color:#000000;"><span style="color:#0000FF;">if</span><span style="color:#0000CC;">(</span><span style="color:#FF0000;">data</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">match</span><span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"success.*"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">{&nbsp; &nbsp; <span style="color:#009900;">//data 为一字符串</span></span><br />
</span>
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$<span style="color:#0000CC;">.</span>post<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">'/control/cclogin.php'</span><span style="color:#0000CC;">,</span><span style="color:#0000CC;">{</span><span style="color:#FF00FF;">'uname'</span><span style="color:#0000CC;">:</span><span style="color:#FF0000;">port</span><span style="color:#0000CC;">,</span><span style="color:#FF00FF;">'upass'</span><span style="color:#0000CC;">:</span><span style="color:#0000CC;">$</span><span style="color:#0000CC;">.</span>md5<span style="color:#0000CC;">(</span>pass<span style="color:#0000CC;">)</span><span style="color:#0000CC;">,</span><span style="color:#FF00FF;">'umail'</span><span style="color:#0000CC;">:</span><span style="color:#FF0000;">data</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">substr</span><span style="color:#0000CC;">(</span>7<span style="color:#0000CC;">)</span><span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;&nbsp; &nbsp;</span>
			</li>
			<li>
				<span style="color:#0000CC;">&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#009900;">//upass 用md5加密，</span><span style="color:#FF0000;font-family:Consolas, monospace;line-height:15px;white-space:normal;background-color:#FFFFFF;"><span style="color:#009900;">substr 同于PHP中同名</span><span style="color:#009900;">的函数，获取第7个位置以后的字符串</span></span><span style="color:#009900;">，默认首个索引值0</span></span>
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#FF0000;">window</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">location</span><span style="color:#0000CC;">.</span><span style="color:#FF0000;">href</span> <span style="color:#0000CC;">=</span> <span style="color:#FF0000;">url</span><span style="color:#0000CC;">;</span>&nbsp; <span style="color:#009900;">//页面跳转，url为目标跳转页面！</span><br />
			</li>
			<li>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#0000CC;">}</span>
			</li>
		</ol>
	</div>
</div>
<br />
<br />
<br />                                   </div>
            <!-- <div class="Blog_con3_1">管理员在2009年8月13日编辑了该文章文章。</div> -->
            <div class="Blog_con2_1 Blog_con3_2">
              <div>
			  <!--<img src="/image/default/tu_8.png">-->
			  <!-- JiaThis Button BEGIN -->
				<div class="bdsharebuttonbox"><A class=bds_more href="#" data-cmd="more"></A><A class=bds_qzone title=分享到QQ空间 href="#" data-cmd="qzone"></A><A class=bds_tsina title=分享到新浪微博 href="#" data-cmd="tsina"></A><A class=bds_tqq title=分享到腾讯微博 href="#" data-cmd="tqq"></A><A class=bds_renren title=分享到人人网 href="#" data-cmd="renren"></A><A class=bds_weixin title=分享到微信 href="#" data-cmd="weixin"></A></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

阅读(2026) | 评论(1) | 转发(2) |

0

上一篇：LINUX下软RAID 5实现

下一篇：Windows 下各种【小结】