符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
获取name为test的input文本框中的内容的jQuery代码为:
创新互联建站2013年开创至今,先为浏阳等服务建站,浏阳等地企业,进行企业商务咨询服务。为浏阳企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
$("input:text[name='test']").val();
jQuery提供了三个简单实用的用于获取元素内容的方法:
text() —— 设置或返回所选元素的文本内容
html() —— 设置或返回所选元素的内容(包括 HTML 标记)
val() —— 设置或返回表单字段的值
因为input属于表单元素,所以获取其内容使用的是val()方法。
怎么使用jquery获得标签的值或元素的内容?
jquery提供了三个获得内容的方法, text()、html() 以及 val(),其中前两个可用于解决本问题,$("label#userid").text(); // 首选,获取label的文本,$("label#userid").html(); // 也可以实现,获取label标签内的所有html标记,一般情况改下label标签内就是文本,所以等效上面的方法。
实例演示:
创建Html元素
div class="box"
span点击按钮获取label中内容:/spanbr
div class="content"
label id="userid"输入用户名/labelinput type="text"
/div
input type="button" value="获取label中的内容"
/div
2设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
h3{display:inline-block;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
3编写jquery代码
$(function(){
$("input:button.btn1").click(function() {
alert($("label#userid").text());
});
$("input:button.btn2").click(function() {
alert($("label#userid").html());
});
})
化学元素(Chemical element)就是具有相同的核电荷数(即核内质子数)的一类原子的总称,从哲学角度解析,是原子的电子数目发生量变而导致质变的结果。
关于元素的学说,即把元素看成构成自然界中一切实在物体的最简单的组成部分的学说。早在远古就已经产生了,不过,在古代把元素看作是物质的一种具体形式的这种近代观念是不存在的。无论在我国古代的哲学中还是在印度或西方的古代哲学中,都把元素看作是抽象的、原始精神的一种表现形式,或是物质所具有的基本性质。
1、给特定内容包裹一个容器(div或者其他容器)标签
2、给容器一个id,或者一个特定的class以便于使用jquery的选择器获取到该容器
3、使用jquery选择器获取该容器,并获取该容器内的内容
div id="content"
特定内容......
/div
$("#content").html();
$("#content").text();
$("#content").val();
1、html()
html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
2.TEXT
text():取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
text(val):设置所有匹配元素的文本内容
与 html() 类似, 但将编码 HTML (将 "" 和 "" 替换成相应的HTML实体).
3.VAL
val():获得第一个匹配元素的当前值。
val(val):设置每一个匹配元素的值。
1、新建一个html文件,命名为test.html。
2、在test.html文件内,引入jquery.min.js库文件,成功加载该文件,才能使用jquery中的方法。
3、在test.html文件内,在p标签内,使用button标签创建一个按钮,按钮名称为“按钮”。
4、在test.html文件内,设置button标签的id为mybtn,主要用于下面通过该id获得button对象。
5、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行btnfun()函数。
6、在js标签中,创建btnfun()函数,在函数内,通过id(mybtn)获得button对象,使用attr()方法将disabled属性设置为disabled,让按钮变成不可用状态即可。
由于项目用的是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=p2centerdiv id=usernameTip/
/div
/libr
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
/libr
li class=p1t注意:邮箱必须是可以收到程序员之家激活码的。/li
li class=p1t用户注册后,需要激活,才可以使用!激活码只会发到您注册邮箱中。/li
li class=p2li
div class=p2leftEmail地址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=p2centerdiv id=emailTip/div/div
/libr
li class=p1t5-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=p2centerdiv id=divHintPassword style=display:none;/div
/div
/libr
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
/libr
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=p2rightimg src=@s.url value='/vcode.jpg'/ align='absmiddle' border='0'//div
/li
li class=p1tinput 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} 的值)