jquery框架 jquery被什么替代了
很多朋友对于jquery框架和jquery被什么替代了不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
jquery框架是什么
jQuery是一套跨浏览器的JavaScript函式库，简化了HTML和JavaScript之间的操作.
jQuery是开源软件，使用MIT许可证授权 jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库能够创建功能强大的动态网页以及网络应用程序。
JQuery框架的主要内容
由于项目用的是SSH框架，又用到了Freemarker模板页面，数据库是Mysql5.0，主要内容如下所示：
1.注册页面，用Freemarker所写，这里使用了JQuery的一个表单验证框架formvalidator：
对前台注册页面register.ftl进行表单验证，当符合基本验证规则后，再通过JQuery formvalidator Ajax将数据传到action中。
register.ftl：
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8/>
<title>会员注册</title>
<link href=${base}/forum/css/pass.css rel=stylesheet type=text/css>
<link href=${base}/css/validator.css rel=stylesheet type=text/css/>
<script type=text/javascript src=<@s.url value='/js/showError.js'/>></script>
<script type=text/javascript src=<@s.url value='/js/jquery-1.3.2.min.js'/>></script>
<script type=text/javascript src=${base}/js/formValidator.js charset=UTF-8></script>
<script type=text/javascript src=${base}/js/formValidatorRegex.js charset=UTF-8></script>
<!—下面的JS代码是，实时验证用户名或注册邮箱是否存在-->
<script type=text/javascript>
$(document).ready(function(){
$.formValidator.initConfig({formid:form1,onerror:function(msg){},onsuccess:function(){return true;}});
$(#username)
.formValidator({onshow:请输入用户名,onfocus:请您记住填写的用户名，以后登录时需要用到！,oncorrect:该用户名可以注册})
.inputValidator({min:4,max:15,onerror:用户名长度不能小于4个字符})
.ajaxValidator({
type: get,
datatype: json,
data: username:+$(#username).val(),
url:${base}/user/ajax/userCheck!checkUser.action,
success: function(data){if(data.userExist){return false;}else{return true;}},
buttons:$(#button),
error: function(){alert(服务器没有返回数据，可能服务器忙，请重试);},
onerror:该用户名已经存在，请更换用户名,
onwait:正在对用户名进行合法性校验，请稍候…
});
$(#email)
.formValidator({onshow:请输入邮箱,onfocus:邮箱6-100个字符,请正确输入,oncorrect:恭喜你,邮箱可以注册,forcevalid:true})
.inputValidator({min:6,max:100,onerror:你输入的邮箱长度非法,请确认})
.regexValidator({regexp:^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$,onerror:你输入的邮箱格式不正确})
.ajaxValidator({
type: get,
datatype: json,
data: email:+$(#email).val(),
url:${base}/user/ajax/userCheck!checkUser.action,
success: function(data){if(data.emailExist){return false;}else{return true;}},
buttons:$(#button),
error: function(){alert(服务器没有返回数据，可能服务器忙，请重试);},
onerror:该邮箱已经存在，请更换邮箱,
onwait:正在对邮箱进行校验，请稍候…
});
});
</script>
</head>
<body>
<div id=passmain>
<div class=passbottom>
<div class=pbleftb>
<h3 style=text-align:center;>新用户注册</h3>
<p class=p2t>带*号的项目为必选项,请全部填写</p>
<ul class=p2ul>
<@s.form action=register method=POST theme=simple id=form1 name=form1>
<@s.token name=token/>
<li class=p2li>
<div class=p2left>用户登录昵称<span style=color:#FF0000;>*</span></div>
<div class=p2right><@s.textfield name=user.username id=username class=item_input size=30 maxlenght=20 required=true onblur=checkUser();/>
</div>
<div class=p2center><div id=usernameTip/>
</div>
</li><br>
<li class=p2li>
<div class=p2left>性别<span style=color:#FF0000;>*</span></div>
<div class=p2right><@s.radio
name=user.gender
list={action.getText('user.gender.male'):action.getText(user.gender.male),action.getText('user.gender.female'):action.getText(user.gender.female)}
size=30/></div>
</li><br>
<li class=p1t>注意：邮箱必须是可以收到程序员之家激活码的。</li>
<li class=p1t>用户注册后，需要激活，才可以使用！激活码只会发到您注册邮箱中。</li>
<li class=p2li>
<div class=p2left>Email地址<span style=color:#FF0000;>*</span></div>
<div class=p2right><@s.textfield name=user.email id=email class=item_input size=30 onblur=checkEmali(); required=true/>
</div>
<div class=p2center><div id=emailTip></div></div>
</li><br>
<li class=p1t>5-20位字母、数字或字符组合，首字母必须为字母。</li>
<li class=p1t>为了您的帐户安全，强烈建议您的密码使用字符+数字+特殊字符方式，并且密码长度大于8位。</li>
<li class=p2li>
<div class=p2left>密码<span style=color:#FF0000;>*</span></div>
<div class=p2right>
<@s.password name=user.password id=userPassword class=item_input size=30 maxlength=16 onblur=checkPassword(); required=true/>
</div>
<div class=p2center><div id=divHintPassword style=display:none;></div>
</div>
</li><br>
<li class=p2li>
<div class=p2left>重复输入密码<span style=color:#FF0000;>*</span></div>
<div class=p2right><@s.password name=verifyPassword id=verifyPassword class=item_input size=30 maxlength=16 onblur=validatePassword(); required=true/></div>
<div class=p2center>
<div id=divHintverifyPassword style=display:none;></div>
</div>
</li><br>
<br>
<li class=p2li>
<div class=p2left>输入校验码<span style=color:#FF0000;>*</span></div>
<div class=p2right><@s.textfield name=validationCode class=item_input size=10 required=true/>
</div>
</li>
<li class=p2li>
<div class=p2left>校验码<span style=color:#FF0000;>*</span></div>
<div class=p2right><img src=<@s.url value='/vcode.jpg'/> align='absmiddle' border='0'/></div>
</li>
<li class=p1t><input name=提交 type=submit value=注册用户/>
</li>
</ul>
</div>
</@s.form>
</div>
</div>
</body>
</html>
2．后台Action类，UserAjaxAction.java:
基于Hibernate与数据库进行交互验证用户名和邮箱是否存在，同时返回的数据格式为JSon类型的。
package com.qiuyanluocheng.action;
import IO.IOException;
import com.googlecode.jsonplugin.annotations.JSON;
/**
*
*@author qiuyanluocheng
*
*/
public class UserAjaxAction extends BaseAction
{
/**
* BaseAction是自己封装的
*/
private static final long serialVersionUID= 1L;
private String username;//用户名
private String email;//邮箱
private boolean userExist;
private boolean emailExist;
//表示返回的Json数据中不含此属性
@JSON(serialize=false)
public String getUsername()
{
return username;
}
public void setUsername(String username)
{
this.username= username;
}
public String getEmail()
{
return email;
}
public void setEmail(String email)
{
this.email= email;
}
public boolean isUserExist()
{
return userExist;
}
public void setUserExist(boolean userExist)
{
this.userExist= userExist;
}
public boolean isEmailExist()
{
return emailExist;
}
public void setEmailExist(boolean emailExist)
{
this.emailExist= emailExist;
}
//检查用户是否存在
public String checkUser() throws IOException
{
if(username!= null){
if(this.getUserService().isUsernameExist(username)){
// System.out.println(用户存在！！！！！+username);
userExist= true;
}else{
// System.out.println(用户不存在！！！！！+username);
userExist= false;
}
}
if(email!= null){
if(this.getUserService().isEmailExist(email)){
// System.out.println(邮箱存在！！！！！+email);
emailExist= true;
}else{
// System.out.println(邮箱不存在！！！！！+email);
emailExist= false;
}
}
return ajax;
}
}
注意需要导入jsonplugin-0.34.jar包。
3.配置文件struts.xml：
配置action，并且注意package要继承json-default包，且结果集类型为json。
<?xml version=1.0 encoding=utf-8?>
<!DOCTYPE struts PUBLIC-//Apache Software Foundation//DTD Struts Configuration 2.0//EN dtds/struts-2.0.dtd>
<struts>
<package name=userAjax extends=json-default namespace=/user/ajax>
<action name=userCheck class=com.qiuyanluocheng.action.UserAjaxAction>
<!—返回结果类型必须为json-->
<result name=ajax type=json></result>
</action>
</package>
</struts>
jQuery框架中增加对输入框的验证，在设计页面表单时，常常因为需要写大量的验证信息，还要写复杂的正则表达式，现在这样一个验证框架可以解决这样的繁杂问题。这样jquery.validate.js就诞生了，jquery.validate.js是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持。
validate自带的默认验证
required:必选字段,
remote:请修正该字段,
email:请输入正确格式的电子邮件,
url:请输入合法的网址,
date:请输入合法的日期,
dateISO:请输入合法的日期(ISO).,
number:请输入合法的数字,
digits:只能输入整数,
creditcard:请输入合法的信用卡号,
equalTo:请再次输入相同的值,
accept:请输入拥有合法后缀名的字符串,
maxlength: jQuery.format(请输入一个长度最多是{0}的字符串),
minlength: jQuery.format(请输入一个长度最少是{0}的字符串),
rangelength: jQuery.format(请输入一个长度介于{0}和{1}之间的字符串),
range: jQuery.format(请输入一个介于{0}和{1}之间的值),
max: jQuery.format(请输入一个最大为{0}的值),
min: jQuery.format(请输入一个最小为{0}的值)
jQuery框架的优点是什么
jQuery是继prototype之後又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE，写更少的代码，做更多的事情。
它是轻量级的js库(压缩後只有21k)，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
关于本次jquery框架和jquery被什么替代了的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。