web前端–js、jquery和Ajax练习
一、js实现交换两个输入框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交换字符</title>
</head>
<style>
input{
width: 50px;
height: 25px;
color: coral;
}
.Chars{
width: 100px;
height: 25px;
margin-left:5px;
}
</style>
<script type="text/javascript">
function Change(){
//获取第一个字符对象
var Char1=document.getElementById("Char1");
//获取第二个字符对象
var Char2=document.getElementById("Char2");
//document.writeln(Char1.value);document.writeln(Char2.value);
//将两个字符对象的值互换
var CharMiddle=Char1.value;
Char1.value=Char2.value;
Char2.value=CharMiddle;
//document.writeln(Char1.value);document.writeln(Char2.value);
}
</script>
<body>
<h4>
第一个字符:<input type="text" class="Chars" name="Char1" id="Char1" />
第二个字符：<input type="text" name="Char2" class="Chars" id="Char2" />
<input type="button" value="交换" onclick="Change()"/>
</h4>
</body>
</html>
二、js实现根据输入生成表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根据输入生成表格</title>
</head>
<style>
</style>
<script type="text/javascript">
function Generate(){
//获取第一个数字
var Num1=document.getElementById("Num1");
//获取第二个数字
var Num2=document.getElementById("Num2");
// document.writeln(Num1.value);
// document.writeln(Num2.value);
//
var str="";
for(var i=0;i<Num2.value;i++){
str+="<td>AAA</td>";
}
var str1="<tr>"+str+"</tr>";
//console.log(str1);
var str2=""
for(var j=1;j<=Num1.value;j++){
str2+=str1;
}
var str3="<table border='1'>"+str2+"</table>";
var div5=document.getElementById("div5");
div5.innerHTML=str3;
}
</script>
<body>
<h4>
请输入表格的行:<input type="text" class="Chars" name="Num1" id="Num1" />
请输入表格的列：<input type="text" name="Num2" class="Chars" id="Num2" />
<input type="button" value="生成" onclick="Generate()"/>
</h4>
<div id="div5" align="left"></div>
</body>
</html>
三、js实现省市县三级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市县三级联动</title>
</head>
<style>
.select{
width: 150px;
height: 40px;
}
</style>
<script>
function ChangeCity(){
//获取省级对象
var province=document.getElementById("province");
//获取市级对象
var city=document.getElementById("city");
if(province.value=="湖南省"){
city.innerHTML="<option>--请选择--</option><option>长沙市</option><option>株洲市</option><option>湘潭市</option>";
}else if(province.value=="湖北省"){
city.innerHTML="<option>--请选择--</option><option>武汉市</option><option>黄石市</option><option>十堰市</option>";
}else if(province.value=="江苏省"){
city.innerHTML="<option>--请选择--</option><option>南京市</option><option>无锡市</option><option>徐州市</option>";
}
}
function ChangeCounty(){
//获取市级对象
var city=document.getElementById("city");
//获取区级对象
var county=document.getElementById("county");
if(city.value=="长沙市"){
county.innerHTML="<option>--请选择--</option><option>芙蓉区</option><option>天心区</option><option>岳麓区</option>";
}else if(city.value=="株洲市"){
county.innerHTML="<option>--请选择--</option><option>荷塘区</option><option>芦淞区</option><option>石峰区</option>";
}else if(city.value=="湘潭市"){
county.innerHTML="<option>--请选择--</option><option>雨湖区</option><option>岳塘区</option><option>湘潭县</option>";
}else if(city.value=="南京市"){
county.innerHTML="<option>--请选择--</option><option>玄武区</option><option>秦淮区</option><option>六合区</option>";
}else if(city.value=="黄石市"){
county.innerHTML="<option>--请选择--</option><option>黄石港区</option><option>西塞山区</option><option>下陆区</option>";
}else if(city.value=="十堰市"){
county.innerHTML="<option>--请选择--</option><option>茅箭区</option><option>张湾区</option><option>郧阳区</option>";
}else if(city.value=="武汉市"){
county.innerHTML="<option>--请选择--</option><option>江岸区</option><option>江汉区</option><option>洪山区</option>";
}else if(city.value=="无锡市"){
county.innerHTML="<option>--请选择--</option><option>锡山区</option><option>惠山区</option><option>滨湖区</option>";
}else if(city.value=="徐州市"){
county.innerHTML="<option>--请选择--</option><option>鼓楼区</option><option>云龙区</option><option>贾汪区</option>";
}
}
</script>
<body>
<select class="select" id="province" value="1" onchange="ChangeCity()">
<option value="1">--请选择--</option>
<option>湖南省</option>
<option>湖北省</option>
<option>江苏省</option>
</select>
<select class="select" id="city" value="1"οnchange="ChangeCounty()">
<option value="1">--请选择--</option>
</select>
<select class="select" id="county" value="1">
<option value="1">--请选择--</option>
</select>
</body>
</html>
四、js实现相册（先在img建立相册，并添加图片）
<!DOCTYPE html>
<html>
<head>
<title>小黄人相册</title>
</head>
<body>
<img src="img/小黄人相册/1.jpg" id="imgs" height="150"/><br>
<input type="button" value="首页" onclick="firstPageArr();"/>
<input type="button" value="上一页" onclick="upPageArr();"/>
<input type="button" value="下一页" onclick="nextPagesArr();"/>
<input type="button" value="尾页" onclick="lastPageArr();"/>
</body>
<script>
//获取img对象，
var imgArr=document.getElementById("imgs");
//记录当前显示的图片
var currentPicture=1;
//点击首页函数
function firstPageArr(){
imgArr.src="img/小黄人相册/1.jpg";
currentPicture=1;
}
//点击上一页函数
function upPageArr(){
if (!(currentPicture==1)) {
imgArr.src="img/小黄人相册/"+(--currentPicture)+".jpg";
}
}
//点击下一页函数
function nextPagesArr(){
if (!(currentPicture==9)) {
imgArr.src="img/小黄人相册/"+(++currentPicture)+".jpg";
}
}
//点击尾页函数
function lastPageArr(){
imgArr.src="img/小黄人相册/9.jpg";
currentPicture=9;
}
</script>
</html>
五、js实现验证码生成
<!DOCTYPE html>
<html>
<head>
<title>验证码</title>
</head>
<style>
#div1{
width:100px;
height:30px;
background:#ff66ff;
font-size:30;
text-align:center;
font-family:华文隶书;
font-weight:900;
}
table{
background:#ff66ff;
font-size:40;
text-align:center;
font-family:华文隶书;
font-weight:900;
width:200px;
height:50px;
}
td{
width:50px;
}
</style>
<body onload="getTwoFun();">
<div id="div1">
</div>
<br>
<table border='1' id="tb1">
</table>
<div></div>
<input type="button" value="换一张" onclick="getTwoFun();"/>
</body>
<script>
//启动函数
function getTwoFun(){
//调用第一行随机字符函数
getRamFourChar1();
//调用第二行随机字符函数
getRamFourChar2();
}
//存储随机字符的数组
var charArr=[];
//循环加字符
for (var i = 0,n=48; i <62; i++,n++) {
charArr[i]=String.fromCharCode(n);
if(n==57){n=64};
if(n==90) {n=96};
}
console.log(charArr);
//第一行随机字符函数
function getRamFourChar1(){
var div1=document.getElementById("div1");
var div1Str="";
for (var j = 0; j < 4; j++) {
div1Str+=charArr[Math.floor(Math.random()*62)];
}
console.log(div1Str);
div1.innerText=div1Str;
}
//第二行随机字符函数
function getRamFourChar2(){
var tb1=document.getElementById("tb1");
var tb1Str="";
for (var j = 0; j < 4; j++) {
tb1Str+="<td>"+charArr[Math.floor(Math.random()*62)]+"</td>";
}
tb1.innerHTML="<tr>"+tb1Str+"</tr>";
}
</script>
</html>
六、js实现注册验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.class1{
width: 200px;
height: 25px;
margin-left:10px;
}
.class2{
color:blue;
}
.class3{
width: auto;
height: 25px;
}
.class4{
width: 200px;
height: 30px;
color: white;
background-color: skyblue;
}
</style>
<script type="text/javascript">
function Subcheck(){
//获取邮箱，密码，手机号码，协议是否勾选
var fmail=document.FrmMail;
var mail=fmail.mail;//邮箱名对象
var pwd=document.FrmMail.password;//密码对象
var pb=document.FrmMail.phonenumber;//手机号码对象
var mailreg=/^\w{6,18}$/;//邮箱匹配
var pwdreg=/^\w{1,18}$/;//密码匹配
var pbreg=/^[0-9]{1,11}$/;//手机号匹配
if(mail.value==''){
alert("邮箱名不能为空！");
return false;//表单就不会被提交，只有return true的时候表单才会被提交
}else if(pwd.value==''){
alert("密码不能为空！");
return false;//表单就不会被提交，只有return true的时候表单才会被提交
}else if(pb.value==''){
alert("手机号不能为空！");
return false;//表单就不会被提交，只有return true的时候表单才会被提交
}else if(!mailreg.test(mail.value)){
alert("邮箱名格式填写错误！");
return false;//表单就不会被提交，只有return true的时候表单才会被提交
}else if(!pwdreg.test(pwd.value)){
alert("密码格式填写错误！");
return false;//表单就不会被提交，只有return true的时候表单才会被提交
}else if(!pbreg.test(pb.value)){
alert("手机号码格式填写错误！");
return false;//表单就不会被提交，只有return true的时候表单才会被提交
}
return true;
}
</script>
<body>
<form action="" name="FrmMail" method="post" onsubmit="return Subcheck();">
<!-- 邮箱 -->
<input type="text" name="mail" placeholder="邮箱地址" class="class1"/>
<select name="suffix" class="class3">
<option value ="" selected="selected">
@yeah.net
</option>
<option value ="">
@126.com
</option>
<option value ="">
@163.com
</option>
<select/>
<br /><br />
<!-- 密码 -->
<input type="text" name="password" placeholder="密码" class="class1"/>
<br /><br />
<!-- 电话号码 -->
<input type="text" name="phonenumber" placeholder="手机号码" class="class1"/>
<br />
<!-- 协议勾选 -->
<p><input type="checkbox" name="agreementBox" class="ag"/>同意<a href="#">《服务条款》、</a><a href="#">《隐私条款》</a>和<a href="#">《儿童隐私手册》</a></p>
<!-- 立即注册按钮 -->
<input type="submit" value="立即注册" class="class4""/>
</form>
</body>
</html>
七、jquery淡入淡出
使用jquery前必须导入jquery-3.2.1.min.js，其它版本也可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习界面</title>
</head>
<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button >点击这里，使三个矩形淡入</button>
<scan>点击这里，使三个矩形淡入</scan>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
<script type="text/javascript" charset="UTF-8" src="js/jquery-3.2.1.min.js">
</script>
<script type="text/javascript">
/* div1,div2,div3淡入 */
/* $(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
/* div1,div2,div3淡出 */
/* $("scan").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("fast");
$("#div3").fadeOut(6000);
});
}); */
/* 点击显示与隐藏 */
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</html>
八、jquery页面加载练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jquary练习</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="username" id="username" value=""/>
<input type="checkbox" name="chk" id="chk" value="唱"/>唱
<input type="checkbox" name="chk" id="chk" value="跳"/>跳
<input type="checkbox" name="chk" id="chk" value="rap"/>rap
<input type="checkbox" name="chk" id="chk" value="篮球"/>篮球
<input type="button" id="btn" value="获取Input的值" />
</form>
</body>
<!-- Js导入 -->
<script type="text/javascript" charset="UTF-8" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/* 页面载入事件 */
/* 方式一：使用window调用 */
/* window.onload=function (){
alert("页面载入了！");
} */
/* 方式二： */
/* $(document).ready(function(){
alert("页面载入2");
}); */
/* jQuery调用 */
/* 方式三： */
$(function(){
$("#btn").click(function(){
console.log('获取username的值：'+$("#username").val());
/* document获取多个相同name的值并循环打印 */
var chks=document.getElementsByName("chk");
for (var i = 0; i < chks.length; i++) {
console.log(chks[i].value+chks[i].checked+"被选中");}
/* jQuary获取多个name相同的值并打印 */
var jqchk=$("input[name=chk]");
/* 方式一： */
/* console.log(jqchk[0].value+"是否被选中："+jqchk[0].checked);
console.log(jqchk[1].value+"是否被选中："+jqchk[1].checked);
console.log(jqchk[2].value+"是否被选中："+jqchk[2].checked);
console.log(jqchk[3].value+"是否被选中："+jqchk[3].checked); */
/* 方拾二： */
jqchk.each(function(index,elem){
console.log(index+"elem:"+elem.value);
});
var a=$("form input");
$.each(a, function(name,object){
console.log(name+":"+$(object).val());
});
});
});
</script>
</html>
九、ajax练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ajax练习</title>
<link rel="stylesheet" type="text/css" href="css/index1.css" />
<script type="text/javascript" charset="UTF-8" src="./js/jquery-3.2.1.js"></script>
</head>
<body>
<input type="text" name="text" id="text" value="Hello,World!" />
<button id="btn">点击读取data.json文件</button>
<!-- 构建一个容器 -->
<div id="box">
</div>
</body>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$.ajax({
data: {
},
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
url: "data/data.json", //请求地址
timeout: 10000, //超时时间设置为10秒；
beforeSend: function(XMLHttpRequest) {
console.log("发送url之前调用了这里！");
},
success: function(data) {
console.log("url请求成功");
//jquery调用json数据
var jsondata = [{
name: "lxf",
sex: "男",
age: 18,
}, {
name: "刘德华",
sex: "男",
age: 22,
}, ];
$(data.users).each(function() {
console.log("username=" + this.username + ",id=" + this.id + ",password=" + this.password);
});
console.log("--------------");
console.log(data.pm);
console.log("limit=" + data.pm.limit + ",pages=" + data.pm.pages + ",pn=" + data.pm.pn);
},
error: function(xhr, type, errorThrown) {
console.log("请求失败！");
}
});
});
});
</script>
</html>
ajax的用法总结：
1.上传一个表单的内容（获取时按Input的name获取,无法传递文件）
$.ajax({
url: "",
type: 'POST',
data: $('#(此处填入表单的ID)').serialize(),
dataType: "json",
beforeSend: function() {
},
success: function(data) {
},
error: function() {
}
});
2.上传一个表单的内容（可传递文件，非文件获取时按Input的name获取，文件由part获取）
$.ajax({
url: "",
type: 'POST',
cache: false, //不缓存
data: new FormData($('#(此处填入表单的ID)')[0]), //将整个表单的数据封装到FormData对象中
processData: false, //传输的数据是文件
contentType: false, //false代表文件上传
dataType: "json",
beforeSend: function() {
},
success: function(data) {
},
error: function() {
}
});
3.简写：
3.1、get简写
$.get("请求地址",{向后台传递的数据},function(data){返回函数体},"json")
$.getJSON("请求地址",{向后台传递的数据},function(data){返回函数体})
3.1、post简写
$.post("请求地址",{向后台传递的数据},function(data){返回函数体},"json")
**可能出现的问题：**当使用jquery1.3以上版本时，进行ajax参数传值时，会出现以下的一个错误:ognl.ExpressionSyntaxException: Malformed OGNL expression: f[] [ognl.ParseException: Encountered " “]” 。解决方法：解决此问题的方法很简单，在进行ajax请求时，追加一条以下语句即可：
$.ajaxSettings.traditional=true;(平常传递数组时，例如数组:kids，后台要request.getparameterValues("kids")取也是这个原因)
意思：这是一个全局参数，故可以在引入jquery.js之后进行声明。此参数的意思在于，使用$.param时，将采用旧的jquery1.3版本的param生成方式进行处理。