jquery 的一些基本操作

2021-07-16 10:37:35

日常使用中的操作记录，持续更新中：

jquery.form.js表单ajax提交设置

var options = {

                //target: '#input',          //把服务器返回的内容放入id为input的元素中

                beforeSubmit: function () { },  //提交前的回调函数

                success: function (data) { },      //提交后的回调函数

                //url: url,                 //默认是form的action， 如果申明，则会覆盖

                //type: type,               //默认是form的method（get or post），如果申明，则会覆盖

                //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型

                //clearForm: true,          //成功提交后，清除所有表单元素的值

                //resetForm: true,          //成功提交后，重置所有表单元素的值

                //timeout: 3000               //限制请求的时间，当请求大于3秒后，跳出请求

            };

//表单校验

$('#form').validate({

          errorLabelContainer: $("div.error-container"),

          submitHandler: function (form) {

          //校验完成提交表单

          $(form).ajaxSubmit(contact_options);

          }

});

计算两个时间之间相差的年份、月份、天数、小时、分钟、秒

function getDateDiff(dateTimeStamp) {

  var nowtime = new Date();//当前系统时间

  //两时间差为毫秒数，除以1000则转换为秒数

  var leftsecond = parseInt(Math.abs((dateTimeStamp.getTime() - nowtime.getTime())) / 1000);

  dayC = parseInt(leftsecond / (60 * 60 * 24));//计算出相差天数

  yearsC = parseInt(dayC / 365);//根据天数计算年份

  monthC = (nowtime.getFullYear() * 12 + nowtime.getMonth()) - (dateTimeStamp.getFullYear() * 12 + dateTimeStamp.getMonth());//计算月份

  hourC = parseInt((leftsecond / 3600) % 24);//扣除相差天数，计算出相差小时数

  minC = parseInt((leftsecond / 60) % 60);//扣除相差天数，小时数，计算出相差分钟数

  s = parseInt(leftsecond % 60);//扣除相差天数、小时数、分钟数相差数，计算出相差秒速

  if (yearsC >= 1) {

      result = "" + yearsC + "年前";

  }

  else if (monthC>1) {

     result = "" + monthC + "月前";

  }

  else if (dayC >= 1) {

     result = "" + dayC + "天前";

  }

  else if (hourC >= 1) {

     result = "" + hourC + "小时前";

  }

  else if (minC >= 1) {

     result = "" + minC + "分钟前";

  } else

     result = "刚刚";

  return result;

}

禁用表单提交：

$("#frm").submit(function (e) {

    e.preventDefault();

});

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

官网地址：http://echarts.baidu.com/index.html

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

// 判断字符串中是否存在该字符 存在返回字符位置 不存在返回-1

 var test= ",1,";

 test.indexOf("," +test+ ",") != -1

// 截取指定位置之后的所有数据

 var _st_pwd = user_pwd.substring(user_pwd.indexOf('+'));

// 从0 开始截取到指定位置

 var _s_pwd = user_pwd.substring(0, user_pwd.lastIndexOf('+'));

获取表格 td的值获取表格第一行第二列的值

$("#table tr td").eq(1).text()

按钮倒计时：

 function countdown(s, sendObj) {

     s--;

     if (s == 0) {

         sendObj.innerHTML = '发送验证码';

        } else {

          sendObj.innerHTML = s + '秒后可重发';

          setTimeout(function () {

          countdown(s, sendObj)

      }, 1000)

   }

}

禁用按钮：

//禁用按钮

$('#buttonSelect').attr("disabled", true);

//移除禁用

$('#buttonSelect').attr("disabled", false);

页面不刷新加载新页面

function jumpPage(url) {

    var pageContentBody = $('.content-wrapper');

    $.ajax({

        type: "GET",

        cache: false,

        url: url,

        dataType: "html",

        success: function (res) {

            if (res == '"needlogin"') {

                window.location.href = "/home/login";

            } else {

                if (typeof window.bmshistory != "undefined") {

                    var i = window.bmshistory.indexOf(url);

                    if (i != -1) {

                        window.bmshistory.splice(i, 1);

                    }

                    if (window.bmshistory.length > 10) {

                        window.bmshistory.shift();

                    }

                    window.bmshistory.push(url);

                }

                else {

                    window.bmshistory = [];

                    window.bmshistory.push(url);

                }

                pageContentBody.html(res);

            }

        },

        error: function (xhr, ajaxOptions, thrownError) {

            pageContentBody.html('<h4 style="font-family:Microsoft YaHei;">访问服务器连接故障,请检查网络...</h4>');

            //App.unblockUI(pageContent);

        },

        async: false

    });

}

js全选操作

  $("#checkAll").on("click", function () {

            if (this.checked) {

                $("input:checkbox[name='checkvideo']").prop("checked", true);

            } else {

                $("input:checkbox[name='checkvideo']").prop("checked", false);

            }

        });

jquery下载文件

 var content = "file content!";

                    var data = new Blob([content], { type: "text/plain;charset=UTF-8" });

                    var downloadUrl = window.URL.createObjectURL(data);

                    var anchor = document.createElement("a");

                    anchor.href = downloadUrl;

                    anchor.download = "文件名.txt";

                    anchor.click();

                    window.URL.revokeObjectURL(data);

c# ajax提交html时报错解决办法

首先在默认情况下标签类的东西是不会让你提交的这是出于.net 的默认安全机制

我们要先在 <%@ page %> 里边加上 ValidateRequest="false"

这个时候如果还是不能提交到后台那你就得修改一下 web.config 了

添加如下节点

<system.web>

<httpRuntime requestValidationMode="2.0"/>

</system.web>

append() – 在指定的元素的尾部添加一个新内容。

prepend() -在指定的元素里前部添加新内容。

after() – 在指定元素前添加新内容

before() -在指定元素的后面添加新内容。

乍一看append,prepend 和after,before似乎功能一样，但append,prepend指在选中的元素本身（内部）的前面和后面，而after,before指在选择中的元素的前面和后面。

js获取浏览器地址中的参数：

例如：http://172.16.41.106:8081/signIn/details?userId=8f9e04d4bb784542abdf3debe5ca0a9a

function getQueryString(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]); return null;

}

$(document).ready(function(){

var page=getQueryString("userId");

})

时间戳转换：

    //时间戳转换

    function dataTime(time) {

        // 比如需要这样的格式 yyyy-MM-dd hh:mm:ss

        var _date = new Date(time), year = _date.getFullYear(), //年

        month = _date.getMonth() + 1, //月

        day = _date.getDate(), //日

        hour = _date.getHours(), //时间

        minute = _date.getMinutes(), //分钟

        second = _date.getSeconds();//秒

        return year + "-" + month + "-" + day + " " + hour + ":" + minute;

    }

c# 时间戳转换实例：/Date(1521993600000)/

 var c = date.replace("/Date(", "").replace(")/", "");

 var now = new Date(parseInt(c));

 var year = now.getFullYear();

 var month = now.getMonth() + 1;

 var day = now.getDate();

 var hour = now.getHours();

 var minute = now.getMinutes();

 var second = now.getSeconds();

 return year + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day) + "   " + (hour < 10 ? "0" + hour : hour) + ":" + (minute < 10 ? "0" + minute : minute) + ":" + (second < 10 ? "0" + second : second);

数组字符串转数组：

var images="["2016-11-22\/f22faadc-9b45-49c5-ace9-e77fbfbcc86b.jpg","2016-11-22\/28929bc2-a865-45c8-aa0b-0584408e1ed3.jpg"]";
//第一种解析方式
var img=eval(images);
//第二种解析方式
var img=JSON.parse(images);

获取select下拉列表框当前选中的值

$("#列表框的id").val();

获取select当前选中的文本值

$("#下拉列表框的id").find("option:selected").text();

对象转json json转对象

//将对象转换为json

var js=JSON.stringify(jsonStr); 

//解析json

 var obj = eval(agent.houseImgs);

//自定义json对象

var js {"name":$(name).val(),"phone":$(phone).val(),"carNumber":$(carNumbers).val(),"remark":remark, "imgurl":imgurl};

//初始化数组

var aArray=new Array();

//赋值

 aArray.push(jsonObj);

js 60秒倒计时

 //60秒计时

    var countdown = 60;

    function SendEmail(obj) {

        if (countdown == 0) {

            obj.removeAttribute("disabled");

            obj.value = "获取验证码";

            countdown = 60;

            return;

        } else {

            obj.setAttribute("disabled", true);

            obj.value = "重新发送(" + countdown + ")";

            countdown--;

        }

        setTimeout(function () {

           //SendEmail(obj)

        }, 1000)

    }

清空表单数据

 function ResertForm() {

        $(':input', '#signupForm')

            .not(':button, :submit, :reset, :hidden')

            .val('')

            .removeAttr('checked')

            .removeAttr('selected');

    }

获取 iframe 的父级元素  $("#sidebar-nav", parent.document)

码农公寓

jquery.form.js表单ajax提交设置

相关文章