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生成方式進行處理。