一、图片切换
1.页面源码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var img=[
"img/a1.png",
"img/a2.png",
"img/a3.png",
"img/a4.jpg",
"img/a5.png",
]
var index=0;
$("#btn1").click(function () {
index--
index= index<=0?img.length-1:index
$("#img1").attr("src",img[index])
})
$("#btn2").click(function () {
index++
index= index>=img.length-1?0:index
$("#img1").attr("src",img[index])
})
})
</script>
</head>
<body>
<img src="img/a1.png" id="img1" width="20%" height="192"><br>
<button id="btn1">上一张</button>
<button id="btn2">下一张</button>
</body>
</html>
2.效果截图
二、隔行换色
1.html源码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成复选框的全选和全不选</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function () {
$("tr:gt(1)").hover(function () {
$(this).addClass("hover")
},function () {
$(this).removeClass("hover")
})
$("#select").click(function () {
$(".selectOne").prop("checked",this.checked)
})
})
</script>
<style>
.hover{
background-color: lawngreen;
}
</style>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" id="select"></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
2.效果截图
三、左右选择
1.html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表左右选择</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
/*1.选中单击去右边*/
$("#selectOneToRight").click(function(){
$("#left option:selected").appendTo($("#right"));
});
/*2.单击全部去右边*/
$("#selectAllToRight").click(function(){
$("#left option").appendTo($("#right"));
});
/*3.选中双击去右边*/
$("#left option").dblclick(function(){
$("#left option:selected").appendTo($("#right"));
});
});
</script>
</head>
<body>
<table width="600" align="center">
<tr align="center">
<td>
<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
<option>IPhone 10</option>
<option>小米4</option>
<option>锤子T2</option>
</select>
</td>
<td>
<p><a href="#" id="selectOneToRight">>></a></p>
<p><a href="#" id="selectAllToRight">>>></a></p>
<p><a href="#" ><<</a></p>
<p><a href="#" ><<<</a></p>
</td>
<td>
<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
<option>三星Note3</option>
<option>华为6s</option>
</select>
<td>
</tr>
</table>
</body>
</html>
2.效果演示
四、表单校验
1.html源码
<!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;
margin-bottom: 10px;
}
a{
text-decoration: none;
}
.error{
font-size: 15px;
font-style: normal;
color: red;
}
#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.11.0.js" ></script>
<script>
/**
* 1.用户名必须是8位---16位的字符 0-9a-zA-Z_
* 2.密码必须是8位---16位的字符 0-9a-zA-Z_
*
* 检验时机
* 1.文本框失去焦点
* 2.表单提交数据之前
*/
function checkUsername () {
// 1.获取到用户输入的用户名
var username = $("#user").val();
var regexp = /^\w{8,16}$/;
var isSuccess = regexp.test(username);
if(isSuccess){
$("#errorMsg_username").empty()
$("#errorMsg_username").removeClass("error")
}else {
$("#errorMsg_username").html("用户名必须是8-16位字符")
$("#errorMsg_username").addClass("error")
}
return isSuccess;
}
function checkPassword () {
// 1.获取到用户输入的密码
var password = $("#password").val();
var regexp = /^\w{8,16}$/;
var isSuccess = regexp.test(password);
if(isSuccess){
$("#errorMsg_password").empty()
$("#errorMsg_password").removeClass("error")
}else {
$("#errorMsg_password").html("密码必须是8-16位字符")
$("#errorMsg_password").addClass("error")
}
return isSuccess;
}
$(function () {
$("#user").blur(checkUsername);
$("#password").blur(checkPassword);
$("#registForm").submit(function () {
return checkUsername () && checkPassword();
});
})
</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 align="center">
<td colspan="2" >
<font size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr align="center">
<td width="180px">
<label for="user" >用户名</label>
</td>
<td>
<em style="color: red;">*</em>
<input type="text" name="user" size="35px" id="user"/>
<span id="errorMsg_username"></span>
</td>
</tr>
<tr align="center">
<td>
密码
</td>
<td>
<em style="color: red;">*</em>
<input type="password" name="password" size="35px" id="password" />
<span id="errorMsg_password"></span>
</td>
</tr>
<tr align="center">
<td>
确认密码
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="repassword" size="35px"/>
</td>
</tr>
<tr align="center">
<td>
Email
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email"/>
</td>
</tr>
<tr align="center">
<td>
姓名
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="username" size="35px"/>
</td>
</tr>
<tr align="center">
<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>
</span>
</td>
</tr>
<tr align="center">
<td>
出生日期
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="birthday" size="35px"/>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="注 册" height="50px"/>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
2.效果演示
五、省市联动
1.html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成省市二级联动</title>
<style type="text/css">
.top{
border: 1px solid red;
width: 32.9%;
height: 50px;
float: left;
}
#clear{
clear: both;
}
#menu{
border: 1px solid blue;
width: 99%;
height: 40px;
background-color: black;
}
#menu ul li{
display: inline;
color: white;
font-size: 19px;
}
#bottom{
text-align: center;
}
#contanier{
border: 1px solid red;
width: 99%;
height: 600px;
position: relative;
}
#content{
border: 5px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
padding-top: 50px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
var provinces = ["湖南","湖北","河南"]
//2.创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[1] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[2] = new Array("郑州市","洛阳市","开封市","安阳市");
$.each(provinces,function (index,data) {
var option = "<option value='"+index+"'>"+data+"</option>"
$("#province").append(option)
})
$("#province").change(function () {
var index = $("#province option:selected").val()
var cityArr = cities[index]
console.log(cityArr);
$("#city").empty();
$.each(cityArr,function (index,data) {
var option = "<option value='"+index+"'>"+data+"</option>"
$("#city").append(option)
})
})
});
</script>
</head>
<body>
<div>
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" οnsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" id="username" οnfοcus="showTips('username','必须以字母开头')" οnblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" οnfοcus="showTips('password','密码长度不能低于6位！')" οnblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<!--1.编写HTML文件部分的内容-->
<tr>
<td>籍贯</td>
<td>
<!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
<select id="province">
<option>--请选择--</option>
</select>省
<select id="city">
<option>--请选择--</option>
</select>市
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</form>
</table>
</div>
</div>
</div>
</body>
</html>
2.效果演示
