Qing/HTML
Qing/HTML
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

格式化代码

Browse Source
This commit is contained in:
landaiqing 2023-05-01 22:22:17 +08:00
parent 5ea2a40ec4
commit 295f24b49b
4 changed files with 148 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html
View File

@ -1,14 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="./css/index.css" rel="stylesheet" type="text/css"/> <link href="./css/index.css" rel="stylesheet" type="text/css" />
<script src="./js/index.js"></script> <script src="./js/index.js"></script>
<title>基于jQuery的AJAX实现三级联动菜单</title> <title>基于jQuery的AJAX实现三级联动菜单</title>
</head> </head>
<body> <body>
<div> <div>
<form> <form>
@ -26,24 +28,25 @@
</div> </div>
</body> </body>
<script> <script>
$(function(){ $(function () {
getCountry(); getCountry();
$("#province").change(function(){ $("#province").change(function () {
CountryId=$("#province").val(); CountryId = $("#province").val();
// console.log(FatherId); // console.log(FatherId);
getCity(CountryId); getCity(CountryId);
CityID=$("#city").val(); CityID = $("#city").val();
// console.log(CityID); // console.log(CityID);
getArea(CityID); getArea(CityID);
}); });
$("#city").change(function(){ $("#city").change(function () {
CityID=$("#city").val(); CityID = $("#city").val();
// console.log(CityID); // console.log(CityID);
getArea(CityID); getArea(CityID);
}) })
}) })
</script> </script>
</html> </html>

58
Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js
View File

@ -1,50 +1,37 @@
function getData() {
function getData(){
$.ajax({ $.ajax({
url : './json/third-level-address.json', url: './json/third-level-address.json',
type : 'get', type: 'get',
async: false, async: false,
success : function(data) { success: function (data) {
if(data=="error"){ if (data == "error") {
alert("系统错误"); alert("系统错误");
return; return;
} }
dataJson=data; dataJson = data;
} }
}); });
return dataJson; return dataJson;
} }
function getCountry(){ function getCountry() {
var data = getData(); var data = getData();
var country = new Array();
var children = new Array();
var countryCode=new Array();
$.each(data,function(i,tmp){
countryCode.push(tmp.code);
country.push(tmp.name);
children.push(tmp.children);
});
// for(var i in data){
// console.log(data[i].children[0].children.length);
// }
var options = "<option value='0'>--请选择--</option>"; var options = "<option value='0'>--请选择--</option>";
for(var i in data){ for (var i in data) {
options += "<option value='" + data[i].code + "' selected>" + dataJson[i].name+"</option>"; options += "<option value='" + data[i].code + "' selected>" + data[i].name + "</option>";
$("#province").html(options); $("#province").html(options);
// console.log(data[i].code);
}
} }
}
function getCity(countryCode){ function getCity(countryCode) {
var data = getData(); var data = getData();
$('#city').empty(); $('#city').empty();
var options = "<option value='0'>--请选择--</option>"; var options = "<option value='0'>--请选择--</option>";
for(var i in data){ for (var i in data) {
for(let j=0;j<data[i].children.length;j++){ for (let j = 0; j < data[i].children.length; j++) {
if(countryCode && countryCode == data[i].code){ if (countryCode && countryCode == data[i].code) {
options += "<option value='" + data[i].children[j].code + "' selected>" + data[i].children[j].name+"</option>"; options += "<option value='" + data[i].children[j].code + "' selected>" + data[i].children[j].name + "</option>";
} }
} }
@ -52,17 +39,18 @@ function getCity(countryCode){
} }
} }
function getArea(cityCode){
function getArea(cityCode) {
var data = getData(); var data = getData();
var options = "<option value='0'>--请选择--</option>"; var options = "<option value='0'>--请选择--</option>";
for(var i in data){ for (var i in data) {
for(let j=0;j<data[i].children.length;j++){ for (let j = 0; j < data[i].children.length; j++) {
for(let k=0;k<data[i].children[j].children.length;k++){ for (let k = 0; k < data[i].children[j].children.length; k++) {
if(cityCode && cityCode == data[i].children[j].code){ if (cityCode && cityCode == data[i].children[j].code) {
options += "<option value='" + data[i].children[j].children[k].code + "' selected>" + data[i].children[j].children[k].name+"</option>"; options += "<option value='" + data[i].children[j].children[k].code + "' selected>" + data[i].children[j].children[k].name + "</option>";
}
} }
} }
}
$("#area").html(options); $("#area").html(options);
} }

28
Html-practice/jQuery/01-jQuery-表单验证.html
View File

@ -1,15 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/FormValidation.js"></script> <script src="./js/FormValidation.js"></script>
<link href="./css/FormValidation.css" rel="stylesheet" type="text/css"/> <link href="./css/FormValidation.css" rel="stylesheet" type="text/css" />
<title>jQuery-表单验证</title> <title>jQuery-表单验证</title>
</head> </head>
<body> <body>
<div class="main"> <div class="main">
<form action="form" onsubmit="return func();"> <form action="form" onsubmit="return func();">
@ -21,23 +23,15 @@
<input type="text" required="required" class="Username"> <input type="text" required="required" class="Username">
<span class="info1">Username</span> <span class="info1">Username</span>
</div> </div>
<div class="inputBox1"> <div class="inputBox1">
<input type="text" required="required" class="Email"> <input type="text" required="required" class="Email">
<span class="info2">Email</span> <span class="info2">Email</span>
</div> </div>
<div class="inputBox"> <div class="inputBox">
<input type="password" required="required" class="Password"> <input type="password" required="required" class="Password">
<span class="info3">Password</span> <span class="info3">Password</span>
</div> </div>
<button class="enter" type="submit">Enter</button> <button class="enter" type="submit">Enter</button>
@ -50,7 +44,7 @@
</body> </body>
<script> <script>
$(function(){ $(function () {
$('.Username').blur(function () { $('.Username').blur(function () {
$('.Username').tooltip('userName'); $('.Username').tooltip('userName');
}) })
@ -64,21 +58,21 @@
}) })
function func(){
var flag1= $('.Username').tooltip('userName'); function func() {
var flag2= $('.Email').tooltip('email');
var flag3= $('.Password').tooltip('password'); var flag1 = $('.Username').tooltip('userName');
if(flag1&&flag2&&flag3){ var flag2 = $('.Email').tooltip('email');
var flag3 = $('.Password').tooltip('password');
if (flag1 && flag2 && flag3) {
return true; return true;
}else{ } else {
alert("请填写正确的用户名密码或邮箱!!!"); alert("请填写正确的用户名密码或邮箱!!!");
return false; return false;
} }
} }
</script> </script>
</html> </html>

57
Html-practice/jQuery/js/FormValidation.js
View File

@ -1,28 +1,27 @@
;(function ($) { ;
(function ($) {
var methods = { var methods = {
//用户名验证 //用户名验证
userName : function() { userName: function () {
var success = "success"; var success = "success";
var error = "Error"; var error = "Error";
var info = "UserName"; var info = "UserName";
//这些方法里面的this指针已经被替换为了$(this) //这些方法里面的this指针已经被替换为了$(this)
var reg = /^[a-zA-Z0-9\_\+\-\&\$\*]{6,10}$/; var reg = /^[a-zA-Z0-9\_\+\-\&\$\*]{6,10}$/;
if (this.val()==''){ if (this.val() == '') {
// $(".info1").css('color','#000'); // $(".info1").css('color','#000');
$(".info1").show().html(info); $(".info1").show().html(info);
return false; return false;
} } else if (this.val().match(reg)) {
else if (this.val().match(reg)) { $(".info1").css('color', 'green');
$(".info1").css('color','green');
// $(".info1").css('background','#fff'); // $(".info1").css('background','#fff');
$(".info1").show().html(success); $(".info1").show().html(success);
return true; return true;
} } else {
else { $(".info1").css('color', 'red');
$(".info1").css('color','red');
$(".info1").show().html(error); $(".info1").show().html(error);
return false; return false;
} }
@ -30,47 +29,43 @@
}, },
// 密码验证 // 密码验证
password : function( ) { password: function () {
var success = "success"; var success = "success";
var error = "Error"; var error = "Error";
var info = "Password"; var info = "Password";
var reg = /^[a-zA-Z0-9\_\-]{8,10}$/; var reg = /^[a-zA-Z0-9\_\-]{8,10}$/;
if (this.val()==''){ if (this.val() == '') {
// $(".info1").css('color','#000'); // $(".info1").css('color','#000');
$(".info3").show().html(info); $(".info3").show().html(info);
return false; return false;
} } else if (this.val().match(reg)) {
else if (this.val().match(reg)) { $(".info3").css('color', 'green');
$(".info3").css('color','green');
$(".info3").show().html(success); $(".info3").show().html(success);
return true; return true;
} } else {
else { $(".info3").css('color', 'red');
$(".info3").css('color','red');
$(".info3").show().html(error); $(".info3").show().html(error);
return false; return false;
} }
}, },
//邮箱验证 //邮箱验证
email : function( ) { email: function () {
var success = "success"; var success = "success";
var error = "Error"; var error = "Error";
var info = "Email"; var info = "Email";
var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/; var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
if (this.val()==''){ if (this.val() == '') {
// $(".info1").css('color','#000'); // $(".info1").css('color','#000');
$(".info2").show().html(info); $(".info2").show().html(info);
return false; return false;
} } else if (this.val().match(reg)) {
else if (this.val().match(reg)) { $(".info2").css('color', 'green');
$(".info2").css('color','green');
$(".info2").show().html(success); $(".info2").show().html(success);
return true; return true;
} } else {
else { $(".info2").css('color', 'red');
$(".info2").css('color','red');
$(".info2").show().html(error); $(".info2").show().html(error);
return false; return false;
} }
@ -80,15 +75,15 @@
}; };
$.fn.tooltip = function( method ) { $.fn.tooltip = function (method) {
// Method calling logic // Method calling logic
if ( methods[method] ) { if (methods[method]) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if ( typeof method === 'object' || ! method ) { } else if (typeof method === 'object' || !method) {
return methods.init.apply( this, arguments ); return methods.init.apply(this, arguments);
} else { } else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' ); $.error('Method ' + method + ' does not exist on jQuery.tooltip');
} }
}; };