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);"> onblur="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);">onblur="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("[e-mail]")) {out.write("用户名已经存在，请更换");} else {out.write("用户名可以使用");}out.flush();out.close();}}