From 4dca507c64cfc24d05ecf78512effbad2e18a4d3 Mon Sep 17 00:00:00 2001
From: Qing <landaiqing@126.com>
Date: Mon, 1 May 2023 22:47:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.html                                |  4 +-
 .../js/index.js                               | 65 ++++++++++---------
 Html-practice/jQuery/01-jQuery-表单验证.html  | 10 ++-
 Html-practice/jQuery/js/FormValidation.js     | 26 +++++---
 4 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html
index 768b4ca..2f9fc3c 100644
--- a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html
+++ b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html
@@ -29,8 +29,9 @@
 </body>
 <script>
     $(function () {
+        //调用函数
         getCountry();
-
+        // 选项节点获取code --province Code
         $("#province").change(function () {
             CountryId = $("#province").val();
             // console.log(FatherId);
@@ -40,6 +41,7 @@
             getArea(CityID);
 
         });
+         // 选项节点获取code --City Code
         $("#city").change(function () {
             CityID = $("#city").val();
             // console.log(CityID);
diff --git a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js
index 9adb626..54b9781 100644
--- a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js
+++ b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js
@@ -1,57 +1,58 @@
+// Ajax获取数据,本地json文件
 function getData() {
     $.ajax({
-        url: './json/third-level-address.json',
-        type: 'get',
-        async: false,
-        success: function (data) {
+        url: './json/third-level-address.json', // 本地json文件位置
+        type: 'get', // ajax 获取方式
+        async: false, // 是否异步
+        success: function (data) { // 成功,返回data
             if (data == "error") {
                 alert("系统错误");
                 return;
             }
-            dataJson = data;
+            dataJson = data; 
         }
     });
-    return dataJson;
+    return dataJson; //返回json数据
 }
 
-
+// 获取province(省)
 function getCountry() {
-    var data = getData();
-    var options = "<option value='0'>--请选择--</option>";
-    for (var i in data) {
-        options += "<option value='" + data[i].code + "' selected>" + data[i].name + "</option>";
-        $("#province").html(options);
+    var data = getData(); // 获取json数据
+    var options = "<option value='0'>--请选择--</option>"; //定义初始选项
+    for (var i in data) {  //循环json数据
+        options += "<option value='" + data[i].code + "' selected>" + data[i].name + "</option>"; // 给选项(options) 添加属性value以及显示的数据(城市名称)
+        $("#province").html(options); // 通过jQuery 将选项添加到下拉框(province)
     }
 }
-
-function getCity(countryCode) {
-    var data = getData();
-    $('#city').empty();
-    var options = "<option value='0'>--请选择--</option>";
-    for (var i in data) {
-        for (let j = 0; j < data[i].children.length; j++) {
-            if (countryCode && countryCode == data[i].code) {
-                options += "<option value='" + data[i].children[j].code + "' selected>" + data[i].children[j].name + "</option>";
+// 获取City(城市)
+function getCity(countryCode) {  // 参数 :countryCode 是json 数据中省份的 Code
+    var data = getData(); // 获取json数据
+    $('#city').empty();  // 先置空city的选项,无所谓
+    var options = "<option value='0'>--请选择--</option>"; //定义初始选项
+    for (var i in data) {  //循环json数据
+        for (let j = 0; j < data[i].children.length; j++) { // 这个循环是判断省份下面城市的数量,不循环,获取不到其他的城市,只能获取一个
+            if (countryCode && countryCode == data[i].code) {  // 通过Code 判断来显示城市
+                options += "<option value='" + data[i].children[j].code + "' selected>" + data[i].children[j].name + "</option>"; // 这里注意:children[j],一定要是j,如果填写[i],会超过城市的数量(数组越界)会报错!!!
             }
 
         }
-        $("#city").html(options);
+        $("#city").html(options); // 通过jQuery 将选项添加到下拉框(city) 
     }
 
 }
-
-function getArea(cityCode) {
-    var data = getData();
-    var options = "<option value='0'>--请选择--</option>";
-    for (var i in data) {
-        for (let j = 0; j < data[i].children.length; j++) {
-            for (let k = 0; k < data[i].children[j].children.length; k++) {
-                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>";
+// 获取Area(区域)
+function getArea(cityCode) { // 参数 :cityCode 是json 数据中市的 Code
+    var data = getData(); // 获取json数据
+    var options = "<option value='0'>--请选择--</option>"; // 定义初始选项
+    for (var i in data) { //循环json数据
+        for (let j = 0; j < data[i].children.length; j++) {  // 这个循环是判断省份下面城市的数量,不循环,获取不到其他的城市,只能获取一个
+            for (let k = 0; k < data[i].children[j].children.length; k++) { // 这里的循环是获取城市城市下面区域的数量长度,同上,否则只会获取一个数据
+                if (cityCode && cityCode == data[i].children[j].code) {  // 通过Code 判断来显示区域
+                    options += "<option value='" + data[i].children[j].children[k].code + "' selected>" + data[i].children[j].children[k].name + "</option>";  // 这里的children[j].children[k]同上,否则数组越界报错
                 }
             }
         }
-        $("#area").html(options);
+        $("#area").html(options); // 通过jQuery 将选项添加到下拉框(area)
     }
 
 }
\ No newline at end of file
diff --git a/Html-practice/jQuery/01-jQuery-表单验证.html b/Html-practice/jQuery/01-jQuery-表单验证.html
index 0f4532a..5dbcaba 100644
--- a/Html-practice/jQuery/01-jQuery-表单验证.html
+++ b/Html-practice/jQuery/01-jQuery-表单验证.html
@@ -45,20 +45,24 @@
 </body>
 <script>
   $(function () {
+    // 给username 输入框绑定焦点失去事件
     $('.Username').blur(function () {
-      $('.Username').tooltip('userName');
+      $('.Username').tooltip('userName'); // 用户名验证函数
     })
+    // Email 输入框绑定焦点失去事件
     $('.Email').blur(function () {
-      $('.Email').tooltip('email');
+      $('.Email').tooltip('email'); // 邮箱验证函数
     })
+    // Password 输入框绑定焦点失去事件
     $('.Password').blur(function () {
-      $('.Password').tooltip('password');
+      $('.Password').tooltip('password'); // 密码验证函数
     })
 
 
 
   })
 
+  // 表单验证,全为true 则提交,反之不提交
   function func() {
 
     var flag1 = $('.Username').tooltip('userName');
diff --git a/Html-practice/jQuery/js/FormValidation.js b/Html-practice/jQuery/js/FormValidation.js
index 1d3645b..28c6a4c 100644
--- a/Html-practice/jQuery/js/FormValidation.js
+++ b/Html-practice/jQuery/js/FormValidation.js
@@ -4,23 +4,24 @@
   var methods = {
     //用户名验证
     userName: function () {
+      // 定义默认字段
       var success = "success";
       var error = "Error";
       var info = "UserName";
-
-      //这些方法里面的this指针已经被替换为了$(this)
+      // 用户名验证的正则表达式
       var reg = /^[a-zA-Z0-9\_\+\-\&\$\*]{6,10}$/;
+      // 用户名为空的情况
       if (this.val() == '') {
         // $(".info1").css('color','#000');
         $(".info1").show().html(info);
         return false;
-      } else if (this.val().match(reg)) {
+      } else if (this.val().match(reg)) { // 用户名正则匹配
         $(".info1").css('color', 'green');
         // $(".info1").css('background','#fff');
         $(".info1").show().html(success);
         return true;
 
-      } else {
+      } else { // 正则匹配失败触发的事件
         $(".info1").css('color', 'red');
         $(".info1").show().html(error);
         return false;
@@ -30,19 +31,22 @@
     },
     // 密码验证
     password: function () {
+      // 定义默认字段
       var success = "success";
       var error = "Error";
       var info = "Password";
+      // 密码验证正则表达式
       var reg = /^[a-zA-Z0-9\_\-]{8,10}$/;
+      // 密码为空的情况
       if (this.val() == '') {
         // $(".info1").css('color','#000');
         $(".info3").show().html(info);
         return false;
-      } else if (this.val().match(reg)) {
+      } else if (this.val().match(reg)) {  // 正则匹配
         $(".info3").css('color', 'green');
         $(".info3").show().html(success);
         return true;
-      } else {
+      } else { // 匹配失败的情况
         $(".info3").css('color', 'red');
         $(".info3").show().html(error);
         return false;
@@ -51,20 +55,22 @@
     },
     //邮箱验证
     email: function () {
+      // 定义默认字段
       var success = "success";
       var error = "Error";
       var info = "Email";
-
+      // 邮箱验证正则表达式
       var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
+      //  邮箱为空的情况
       if (this.val() == '') {
         // $(".info1").css('color','#000');
         $(".info2").show().html(info);
         return false;
-      } else if (this.val().match(reg)) {
+      } else if (this.val().match(reg)) { // 正则匹配
         $(".info2").css('color', 'green');
         $(".info2").show().html(success);
         return true;
-      } else {
+      } else { // 匹配失败事件
         $(".info2").css('color', 'red');
         $(".info2").show().html(error);
         return false;
@@ -74,7 +80,7 @@
 
 
   };
-
+// 函数调用的方法
   $.fn.tooltip = function (method) {
 
     // Method calling logic