自己写的jquery用法小例子
包含一个index.jsp 和test.js
test.js
//jquery创建一个对象student 开始部分
student = $.student = ({
// 对象的属性
name : "张三",
age : "20",
height : "",
weight : "60kg",
phone : "",
sex : "男",
hobby : "",
school : "",
// 对象的方法
// index.jsp通过$(document).ready(function()
// {student.show();});执行show方法，把对象的属性赋值到页面中
show : function() {
$("#name").val(student.name);
$("#age").val(student.age);
$("#man").attr("checked","true");//radio默认选择-男
$("#checkbox1").attr("checked","true");//id=checkbox1的勾选
$("#schoollist").val("未选择学校");//为选择学校是给他一个默认值
// $("#schoollist").attr("checked","true");
},
goschool : function() {
// ps以下定义的值在实际项目中大多是通过ajax从后台获取的
$("#school").val("去学校...");// 按钮点击后，改变按钮的值
$("#school").attr("disabled", "true");// 按钮点击后使其不能在点.
var ss = "到学校了";
$("#backschool").append(ss);// 向index.jsp页面中id=backschool的div插入值
// student.eat();//方法之间互相调用
},
eat : function() {
$("#eat").val("开始吃饭");
$("#eat").attr("disabled", "true");
var s = "饭吃完了";
var s1 = "没吃饱";
var html = '<ul><li id="backeat1">' + s + '</li ><li id="backeat2">'
+ s1 + '</li></ul>';// 想页面中添加html，显示eat()返回的值
$("#backeat").append(html);
},
/*微博关注的效果*/
see : function(param){
var v =param.value;
$("#see").val((v=="关注"?"取消":"关注"));
},
// 页面提交表单，调用此方法 submitform:function(){ //获取页面input的值 ------http://www.jb51.net/article/23122.htm var phone = $("#phone")[0].value; var school = $("#schoollist")[0].value;//未选择学校的值 alert(school); //获取表单的属性 var form = $("form[id='form']"); this.formParam = form.serialize(); this.action = form.attr("action"); //alert(this.action); this.params = this.formParam; alert(this.params); //调用ajax this.ajax(); }, ajax : function() { $.ajax({ type : "post", url : "this.action", // data : "student.name=" + name,//data: "name=John&location=Boston", data:this.params,//实体类,在后台通过student.get("name")等取值; dataType : "json", success : function(data, index) { alert(data["errorMsg"]);//errorMsg,msg都是后台返回的值 $("#height").val(data["height"]);//将值返回到页面中id="id"的input或div等元素中。 } }); }
ajax1 : function() {
var name = $("#name")[0].value;//获取input的值
if($("#name").val()== ""){
alert("姓名不能为空");
return false;
}
if($("#height").val()== ""){
alert("身高不能为空");
return false;
}
$.ajax({
type : "post",
url : "LoginServlet",
data: "name="+name,
success : function(msg) {
$("#age").val(msg);
}
});
}
}); //jquery创建一个对象student 结束地方 //普通js //只能输入数字 function checkPositiveInteger(obj){ obj.value=obj.value.replace(/\D/g,''); } //只能输入字母 function checkLetter(obj){ obj.value=obj.value.replace(/[^a-zA-Z]+$/,''); } //只能输入汉字 function checkChinese(obj){ obj.value=obj.value.replace(/[^\u4E00-\u9FA5]/g,''); } //只能输入英文字母和数字 function checkLettersAndNumbers(obj){ obj.value=obj.value.replace(/[^\w\.\/]/ig,''); } //座机 function checkPhone(obj){ obj.value=obj.value.replace(/[^\d-]/g,''); }
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>div布局</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script type="text/javascript">
$(document).ready(function() {
student.show();//页面加载完后执行
});
</script>
</head>
<body>
<form action="actionname" method="post" id="form">
姓名：<input type="text" name="student.name" id="name">
<br/><!--这里的student为实体类 -->
年龄：<input type="text" name="student.age" id="age" onkeyup="checkPositiveInteger(this)" onafterpaste="checkPositiveInteger(this)">
(只能数字)<br/>
身高：<input type="text" name="student.height" id="height"><br/>
体重：<input type="text" name="student.weight" id="weight"><br/>
座机：<input type="text" name="student.phone" id="phone"><br/>
性别：<input type="radio" name="student.sex" id="man" value="男">男
<input type="radio" name="student.sex" id="woman" value="女">女<br/>
爱好：<input type="checkbox" name="student.hobby" id="checkbox1" value="游泳">游泳
<input type="checkbox" name="student.hobby" id="checkbox2" value="下棋">下棋
<input type="checkbox" name="student.hobby" id="checkbox3" value="爬山">爬山 <br/>
学校：<select name="student.school">
<option id="schoollist">学校列表</option>
<option value="北京大学">北京大学</option>
<option value="清华大学">清华大学</option>
<option value="家里蹲的">家里蹲的</option>
<option value="中南财大">中南财大</option>
<option value="自学成才">自学成才</option>
</select><br/>
<input type="button" id="school" onclick="student.goschool()" value="调用上学方法"/><!--这里的student为jquery对象 -->
<div id="backschool"></div>
<br/>
<input type="button" id="eat" onclick="student.eat()" value="调用吃饭方法"/><br/>
<div id="backeat"></div>
微博关注效果：<input type="button" id="see" onclick="student.see(this)" value="关注"/>
<input type="button" id="submit" onclick="student.submitform()" value="提交表单"/>
</form>
</body>
</html>
直接复制进去就可以运行
浙公网安备 33010602011771号