JQ的动画效果

JQ的动画效果

作者：唐文坚
撰写时间：2020年9月8日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
JQ显示和隐藏：、Hide:隐藏、Show:显示、Toggle:开关
列：$("button:eq(0)").on("click", function (){$(" .wrap").show(900);}过渡时间
绑定点击事件的快捷代码
$(“button:eq(0)”).on(“click”,function(){代码})
JQ的滑动：
slideUp:向上滑动、slideDown：向下滑动、slideToggle:滑动开关
function slideUp(){$(“.wrap”).slideUp(600);}
淡入淡出效果：
fadeout:淡出、fadeIn:淡入、fadeToggle:开关、fadeTo:改变透明度
function fadeout(){$(“.wrap”).fadeout();}
function fadeout(){$(“.wrap”).fadeTo (100,0.1);}
自定义动画效果：
$("#cboAnimation").change(function () {
            var va = $(this).val();
            if (va == 1) {
                $(".box").animate({
                    width: '400px', height: '400'
                }, 600);
            } else if (va == 2) {
                $(".box").animate({
                    fontSize: '3em'
                });
            } else if (va == 3) {
                $(".box").animate({
                    width: "+=100",
                    height: "-=100"
                },600);
            } else if (va == 4) {
                $(".box").animate({
                    width: "toggle",
                    height: "toggle"
                },500)
            }
        })自定义动画里面的键值对的值只支持数字或toggle
重点：var serData = $("#myform").serialize();表单序列化
JQ里的获取与提交元素：函数，$.ajax({type:方法，url:路径，async:默认是异步true也可以改为fals同步})
Data：是一个对象，连同请求发送到服务器的数据
adtaType:预期服务器返回的数据类型如果不指定一般用JSON的格式
success:是一个方法请求后的回调函数，传入返回的数据以及包含成功代码的字符串
error:是一个方法，请求失败时调用此函数，传入XMLHttp对象
 JQ中的ajax方法从服务器上获取数据
         function jqGetData() {
             $.ajax({
                 type: "post", 使用的方法
                 url: "/jQueryAjax/getPaersonInfor", 方法的路径
                 async: true, 默认是true 异步 也可以改为fals同步
                 dataType: "json", 一般采用JSON格式
                 success: function (data) { 请求成功后的回调函数，包括字符串
                     console.log(data);
                      开始绑定控件
                     $("#txtName").val(data.name);
                     $("#cboSex").val(data.sex);
                     $("#txtAddress").val(data.address);
                 }
             })
         }
    JQ中的ajax方法将表单数据提交给服务器
          function jqSunbmitForm() {
              var name = $("#txtName").val();
              var sex = $("#cboSex").val();
              var address = $("#txtAddress").val();（获取元素）
              if (name == "" || sex == 0 || address == "") {
                  alert("1111");
                  return false;
              }
              var data = "name=" + name + "&sex=" + sex + "&address=" + address;（元素的拼接）
              var serData = $("#myform").serialize();  表单序列化
              var serData = $("#myform").serializeArray();
              console.log(serData);
              $.ajax({
                  type: "post",（方法）
            url: "/jQueryAjax/getDataByFormCollection",（路径）
                  data: serData,（序列化表单的变量）
                  dataType: "json",（一般都是用JSON）
                  success: function (msg) {（                      alert(msg);
                  },
                  error: function (xmlhttp) {
                      console.log(xmlhttp);
                  }
              })
          }
   使用$.get()方法从服务器上获取数据
function getFun() {
$.get("/jQueryAjax/getPersonInfor", function (data) {（路径）
console.log(data);
$("#txtName").val(data.name);（获取元素）
$("#cboSex").val(data.sex);
$("#txtAddress").val(data.address);
$("#txtAddress").val(data.address);
}, "json");（变成json对象）
}
function postFun() {
var name = $("#txtName").val();
var sex = $("#cboSex").val();
var address = $("#txtAddress").val();（获取元素）
if (name == "" || sex == 0 || address == "") {
alert("1111");
return false;
}
var frmData = $("#myform").serializeArray();（表单序列化）
$.post("/jQueryAjax/getDataByEntityClass", frmData, function (msg) {
console.log(msg);（一个缩写）

});
}
function getJSONFun() {
var name = $("#txtName").val();
var sex = $("#cboSex").val();
var address = $("#txtAddress").val();
if (name == "" || sex == 0 || address == "") {
alert("1111");
return false;
               }
               var frmData = $("#myform").serializeArray();   表单序列化
               $.getJOSN()方法只能接收返回值为json的数据
               $.post("/jQueryAjax/getDataByEntityClass", frmData, function (msg) {
                   console.log(msg);
                  

               });
        }
οnkeyup="value = value.replace(/[^0-9]/g, '')在html代码里写出正则表达式