js/jQuery效果集锦

1.平滑返回顶部效果：

html:

<span style="font-family:Microsoft YaHei;font-size:14px;"> <div <span style="background-color: rgb(255, 0, 0);">class="go-back</span>"><a href="#"><span style="background-color: rgb(255, 0, 0);">返回顶部</span> <span class="glyphicon glyphicon-hand-up"></span></a></div></span>

jQuery:

<span style="font-family:Microsoft YaHei;font-size:14px;">$(document).ready(
     	function($){
     		$('.go-back').click(
     			function(){
     				$('html,body').<span style="background-color: rgb(255, 0, 0);">animate({scrollTop:'0px'},1200)</span>;//
     			}
     		);     	
     	}
);</span>

2.正则验证邮箱格式：

html:

<span style="font-family:Microsoft YaHei;font-size:14px;"><input type="text" name="uname" placeholder="请输入您的邮箱" id="email"<span style="background-color: rgb(255, 0, 0);"> οnblur="checkemail()</span>"></span>

js:

<span style="font-family:Microsoft YaHei;font-size:14px;">function checkemail(){
     	var temp=document.getElementById("email");
     	var reg=<span style="background-color: rgb(255, 0, 0);">/[a-zA-Z0-9_.-]+@([a-zA-Z0-9-]+[.])+[a-zA-Z0-9]{2,4}/</span>;
     	if(temp.value!=""){
     		if(!<span style="background-color: rgb(255, 0, 0);">reg.test(temp.value)</span>){
     		temp.value="";
     		temp.focus();
     		alert("您填写的邮箱有误！");   		
     		}
     	}else{
     		temp.focus();
     		alert("您填写的邮箱有误！");
     	}
}</span>

3.验证用户名是否存在（js（or jQ）+ajax+java）

html:

 <form action="" method="get">
   <fieldset>
       <div class="emailbox">
           <span>邮箱</span>
           <input type="text" name="uname" placeholder="请输入您的邮箱" id="email" <span style="background-color: rgb(255, 0, 0);">οnblur="loadXMLDoc()</span>">
           <span class="input-clear" ><a href="#">×</a></span>
       </div>
       <div class="pwd">
           <span>密码</span>
           <input type="password" name="pwd" placeholder="请输入您的密码">
           <span class="input-clear"><a href="#">×</a></span>
       </div>
   </fieldset>
   <input type="submit" value="登录" class="btn"></br>
            
   <div class="forget"><a href="" class="forget">忘记密码</a></div>
</form>

js:

function loadXMLDoc(){
 	//获得ajax对象，保证兼容性
     	if(window.XMLHttpRequest){//非IE浏览器
     	    xmlhttp=new XMLHttpRequest();	
     	}else{ //IE浏览器
     	    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     	}
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4&&xmlhttp.status==200){ //判断是否与服务器交互成功
		 alert(xmlhttp.responseText);//xmlhttp.responseText获取servlet中out.write的值
		 } 
	} 
	var uname=document.getElementById("email").value;
	 xmlhttp.open("GET","login?uname="+uname,true);//第二个参数是请求地址，问号用来传参，等号左边的uname该input的name值，右边是上面声明的变量 
	 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencode"); 
	xmlhttp.send(null);//post与get此处的参数不一样
 }

jQ:

function checkConfirm(){
   var uname=$("#email").val();
   $.get("login?uname="+uname,function(data){//第一个参数是请求地址，第二个参数是回调函数
   alert(data);});	
}

以上用了$.get，$get也是实现异步请求的一种方式，是对$ajax的封装。$ajax是jQuery中较底层的ajax的方法。
回调函数：用来接收从服务器返回的数据，是一个可选的参数，如果无需返回数据可缺省。但如果需要返回数据，必须要有回调函数。用法如下：

function(data,state){}//第一个参数接收返回的数据，第二个参数接收返回的状态

java:

public class AjaxServlet extends HttpServlet {

	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		String uname = request.getParameter("uname");//从js的xmlhttp.open的第二个参数中获得参数uname</span>
		if (uname.equals("tju_zzj@126.com")) {
			out.write("用户名已经存在，请更换");
		} else {
			out.write("用户名可以使用");
		}
		out.flush();
		out.close();
	}
}