需要的jquery库：
核心库：jquery-1.8.3.js
校验库：jquery.validate.js
中文校验库：messages_zh.js
下载地址：
https://download.csdn.net/download/weixin_42072596/10461805
1、省市二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
</head>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
var cities = new Array(5);
cities[0] = new Array("海淀区","昌平区","朝阳区");
cities[1] = new Array("黄浦区","卢湾区","长宁区");
cities[2] = new Array("和平区","河东区","河西区");
cities[3] = new Array("哈尔滨市","齐齐哈尔市","鸡西市");
$(function(){
$("#cityBtn").change(function(){
$("#city").empty();
$.each(cities[this.value],function(i,city){
var textNode = document.createTextNode(city);
var optEle = document.createElement("option");
optEle.append(textNode);
$("#city").append(optEle);
});
});
});
</script>
<body>
<select id="cityBtn">
<option>--请选择--</option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">天津</option>
<option value="3">黑龙江</option>
</select>
<select id="city"></select>
</body>
</html>
2、全选-全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选-全不选</title>
</head>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#checkAllBtn").click(function(){
//获取checkbtn类选择器，
//this是获取的#checkAllBtn的对象
$(".checkbtn").attr("checked",this.checked);
//第二种方式：属性元素选择器
// $("[class='checkbtn']").attr("checked",this.checked);
});
});
</script>
<body>
<table border="1px" align="center" width="500px" height="300px" cellspacing="0px">
<thead>
<tr>
<th><input type="checkbox" id="checkAllBtn" /></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkbtn" /></td>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbtn" /></td>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbtn" /></td>
<td>3</td>
<td>王五</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbtn" /></td>
<td>4</td>
<td>刘红</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
3、设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置样式</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
$("#span").css("background","aqua").css("color","red");
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="点我"/>
<span id="span">我是谁！</span>
</body>
</html>
4、定时弹出并隐藏广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时弹出并隐藏广告</title>
</head>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
time = setInterval("showAd()",3000);
});
function showAd(){
// $("#img").show(1000);
$("#img").slideDown(1000);
// $("#img").fadeIn(1000);
clearInterval(time);
time = setInterval("hideAd()",3000);
}
function hideAd(){
// $("#img").hide(1000);
$("#img").slideUp(1000);
// $("#img").fadeOut(1000);
clearInterval(time);
}
</script>
<body>
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img" style="display: none;"/>
<img src="../img/1.jpg" />
</body>
</html>
5、隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
</head>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("tbody>tr:even").css("background-color","aliceblue");
$("tbody>tr:odd").css("background-color","antiquewhite");
});
</script>
<body>
<table border="1px" align="center" width="500px" height="300px" cellspacing="0px" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
6、显示-隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示-隐藏</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
$("#img").toggle();
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="隐藏-显示" />
<img src="../img/2.jpg" id="img" />
</body>
</html>
7、下拉框元素左右移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉框元素左右移动</title>
</head>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#leftTOright").click(function(){
$("#right").append($("#left option:checked"));
});
$("#leftTOrightAll").click(function(){
$("#right").append($("#left option"));
});
$("#left").dblclick(function(){
$("#right").append($("#left option:checked"));
});
});
</script>
<body>
<select multiple="multiple" style="height: 300px;width: 100px;" id="left">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">天津</option>
<option value="3">黑龙江</option>
</select>
<select multiple="multiple" style="height: 300px;width: 100px;" id="right">
<option value="0">河北</option>
<option value="1">河南</option>
<option value="2">山东</option>
<option value="3">石家庄</option>
</select><br />
<input type="button" id="leftTOright" value=">>" />
<input type="button" id="leftTOrightAll" value=">>>" />
</body>
</html>
8、表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站注册页面</title>
<style>
#contanier{
border: 0px solid white;
width: 1300px;
margin: auto;
}
#form{
height: 500px;
padding-top: 70px;
background-image: url(../img/regist_bg.jpg);
margin-bottom: 10px;
}
label.error{
background:url(../img/unchecked.gif) no-repeat 10px 3px;
padding-left: 30px;
font-family:georgia;
font-size: 15px;
font-style: normal;
color: red;
}
label.success{
background:url(../img/checked.gif) no-repeat 10px 3px;
padding-left: 30px;
}
#father{
border: 0px solid white;
padding-left: 307px;
}
#form2{
border: 5px solid gray;
width: 660px;
height: 450px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<!--引入validate插件js文件-->
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:3
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于3位!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是整数!",
minlength:"密码不得少于6位!"
},
repassword:{
required:"确认密码不能为空!",
equalTo:"两次输入密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
maxlength:"姓名不得多于5位!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
</head>
<body>
<div id="contanier">
<div id="form">
<form action="#" method="get" id="registForm">
<div id="father">
<div id="form2">
<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td colspan="2" >
<font size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td width="180px">
<label for="user" >用户名</label>
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="user" size="35px" id="user"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="password" size="35px" id="password" />
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="repassword" size="35px"/>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="username" size="35px"/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<span style="margin-right: 155px;">
<em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<em></em>
<label for="sex" class="error" style="display: none;"></label>
</span>
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="birthday" size="35px"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注 册" height="50px"/>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
9、页面回显下拉框数据并选中
$(function(){
//${product.cid } 表示获得的回显数据的商品ID
//获取到所有option的值与回显数据的商品ID对比，相同的话该option被选中selected
$("#cid option[value='${product.cid }']").prop("selected",true);
});
<select id="cid" name="cid">
<c:forEach items="${categoryList }" var="category">
<option value="${category.cid }">${category.cname }</option>
</c:forEach>
</select>
629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
