js,jquery常用方法

郑重其事,鹏程万里

已于 2022-06-29 11:20:33 修改

阅读量192

点赞数

分类专栏：前端文章标签： jquery javascript html

于 2019-09-11 10:21:44 首次发布

本文链接：https://blog.csdn.net/qq_41609208/article/details/100726226

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 js方法

1.1 数字相关

//获取范围内的随机数
function gen_random(min, max){
        return Math.floor(Math.random() * (max- min) + min);
    }

//金额转换 转大写金额
    function transform(tranvalue) {
      try {
        var i = 1;
        var dw2 = new Array("", "万", "亿"); //大单位
        var dw1 = new Array("拾", "佰", "仟"); //小单位
        var dw = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //整数部分用
        //以下是小写转换成大写显示在合计大写的文本框中
        //分离整数与小数
        var source = splits(tranvalue);
         var num = source[0];
         var dig = source[1];
         //转换整数部分
         var k1 = 0; //计小单位
         var k2 = 0; //计大单位
         var sum = 0;
         var str = "";
         var len = source[0].length; //整数的长度
         for (i = 1; i <= len; i++) {
           var n = source[0].charAt(len - i); //取得某个位数上的数字
           var bn = 0;
           if (len - i - 1 >= 0) {
             bn = source[0].charAt(len - i - 1); //取得某个位数前一位上的数字
           }
           sum = sum + Number(n);
           if (sum != 0) {
             str = dw[Number(n)].concat(str); //取得该数字对应的大写数字，并插入到str字符串的前面
             if (n == '0') sum = 0;
           }
           if (len - i - 1 >= 0) { //在数字范围内
    if (k1 != 3) { //加小单位
               if (bn != 0) {
                 str = dw1[k1].concat(str);
               }
               k1++;
             } else { //不加小单位，加大单位
               k1 = 0;
               var temp = str.charAt(0);
               if (temp == "万" || temp == "亿") //若大单位前没有数字则舍去大单位
               str = str.substr(1, str.length - 1);
               str = dw2[k2].concat(str);
               sum = 0;
             }
           }
           if (k1 == 3) //小单位到千则大单位进一
           {
             k2++;
           }
         }
         //转换小数部分
         var strdig = "";
         if (dig != "") {
           var n = dig.charAt(0);
           if (n != 0) {
             strdig += dw[Number(n)] + "角"; //加数字
           }
           var n = dig.charAt(1);
           if (n != 0) {
             strdig += dw[Number(n)] + "分"; //加数字
           }
         }
         str += "元" + strdig;
       } catch(e) {
         return "0元";
       }
       return str;
     }
     //拆分整数与小数
     function splits(tranvalue) {
       var value = new Array('', '');
       temp = tranvalue.split(".");
       for (var i = 0; i < temp.length; i++) {
         value[i] = temp[i];
       }
       return value;
     }

1.2 日期相关

//时间格式化
function formatDate(t,str){
            var obj = {
                yyyy:t.getFullYear(),
                yy:(""+ t.getFullYear()).slice(-2),
                M:t.getMonth()+1,
                MM:("0"+ (t.getMonth()+1)).slice(-2),
                d:t.getDate(),
                dd:("0" + t.getDate()).slice(-2),
                H:t.getHours(),
                HH:("0" + t.getHours()).slice(-2),
                h:t.getHours() % 12,
                hh:("0"+t.getHours() % 12).slice(-2),
                m:t.getMinutes(),
                mm:("0" + t.getMinutes()).slice(-2),
                s:t.getSeconds(),
                ss:("0" + t.getSeconds()).slice(-2),
                w:['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
            };
            return str.replace(/([a-z]+)/ig,function($1){return obj[$1]});
        }
 /*
    时间个性化格式化
  1、< 60s, 显示为“刚刚”
  2、>= 1min && < 60 min, 显示与当前时间差“XX分钟前”
  3、>= 60min && < 1day, 显示与当前时间差“今天 XX:XX”
  4、>= 1day && < 1year, 显示日期“XX月XX日 XX:XX”
  5、>= 1year, 显示具体日期“XXXX年XX月XX日 XX:XX”
   */
    function timeFormat(time){
          var date = new Date(time)
             , curDate = new Date()
             , year = date.getFullYear()
             , month = date.getMonth() + 1
             , day = date.getDate()
             , hour = date.getHours()
             , minute = date.getMinutes()
             , curYear = curDate.getFullYear()
             , curHour = curDate.getHours()
             , timeStr;

           if(year < curYear){
               timeStr = year +'年'+ month +'月'+ day +'日 '+ hour +':'+ minute;
             }else{
               var pastTime = curDate - date
                 , pastH = pastTime/3600000;

               if(pastH > curHour){
                 timeStr = month +'月'+ day +'日 '+ hour +':'+ minute;
               }else if(pastH >= 1){
                 timeStr = '今天 ' + hour +':'+ minute +'分';
               }else{
                 var pastM = curDate.getMinutes() - minute;
                 if(pastM > 1){
                             timeStr = pastM +'分钟前';
                           }else{
                             timeStr = '刚刚';
                           }
                     }
               }
          return timeStr;
        }

1.3 字符串相关

//字符串字符统计
function count(str) {
    for(var i=0, m=str.length, res={}; i<m; i++){
        if(str.charAt(i) in res) res[str.charAt(i)]++;
        else res[str.charAt(i)] = 1;
    }
    return res;
}

1.4 功能模块

//多选框全选
 function checkAll(checkAllId,checkboxName) {
           var selectall = document.getElementById(checkAllId);
           var allbox = document.getElementsByName(checkboxName);
           if (selectall.checked) {
              for (var i = 0; i < allbox.length; i++) {
                      allbox[i].checked = true;
                  }
          } else {
              for (var i = 0; i < allbox.length; i++) {
                       allbox[i].checked = false;
                   }
           }
    }

  //返回顶部
function backTop(btnId) {
          var btn = document.getElementById(btnId);
          var d = document.documentElement;
          var b = document.body;
          window.onscroll = set;
          btn.style.display = "none";
          btn.onclick = function() {
         btn.style.display = "none";
         window.onscroll = null;
          this.timer = setInterval(function() {
                      d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
                      b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
                      if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
           })
   };
       function set() {
               btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
           }
      };

 //多选框全选联动
    function checkAll() {
        $(".all").each(function () {
            $(this).click(function () {
                if ($(this).is(":checked") == true) {
                    $(".one").each(function () {
                        $(this).prop('checked', true)
                    })
                } else {
                    $(".one").each(function () {
                        $(this).prop('checked', false)
                    })
                }
            });
        })
        $(".one").each(function () {
            $(this).click(function () {
                var ckedNum = $(".one:checked").length;
                var allNum = $(".one").length;
                if ($(this).is(":checked") == true) {
                    $(".all").each(function () {
                        if (allNum == ckedNum) {
                            $(this).prop('indeterminate', false);
                            $(this).prop('checked', true);
                        }
                        if (ckedNum > 0 && ckedNum < allNum) {
                            $(this).prop('indeterminate', true);
                        }
                    })
                } else {
                    $(".all").each(function () {
                        if (ckedNum > 0 && ckedNum < allNum) {
                            $(this).prop('indeterminate', true);
                        }
                        if (ckedNum == 0) {
                            $(this).prop('indeterminate', false);
                            $(this).prop('checked', false);
                        }
                    })
                }
            });
        })
    }

1.5 特殊事件,设置,方法

//storage监听事件,storage改变时调用,可用于不同页面的调用等
 window.addEventListener("storage", function (e) {
         alert(e.newValue);
         alert(e.oldValue);
         alert(e.key);

    });
//设置与修改storage
 localStorage.setItem('foo', '112322');

// 禁止右键菜单
   document.oncontextmenu = function(){ return false; };
   // 禁止文字选择
   document.onselectstart = function(){ return false; };
   // 禁止复制
   document.oncopy = function(){ return false; };
   // 禁止剪切
   document.oncut = function(){ return false; };
    //禁止粘贴
    document.onpaste = function(){ return false; };
//标签中的用法
    onpaste="return false"
    oncontextmenu ="return false"
    onselectstart ="return false"
    oncopy  ="return false"
    oncut  ="return false"

     //打印,
    window.print();

好看的title效果

  function titleShow() {
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML=".titleShow{max-width:266px;position:absolute;font:1.5em/1.5 'microsoft yahei' blod;color:#fff;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-o-box-shadow:2px 1px 7px rgba(0,0,0,.3);-moz-box-shadow:2px 1px 7px rgba(0,0,0,.3);-webkit-box-shadow:2px 1px 7px rgba(0,0,0,.3);padding:7px;background:#222 url(http://ww2.sinaimg.cn/mw690/70f52a24gw1e9w0u9cti1j205a04djri.jpg) 0 0 repeat;word-break:break-word}";
        document.getElementsByTagName('head').item(0).appendChild(style);
        
        var oTitle = null;
        var sTitle = null;
        var aA = document.getElementsByTagName('i');
        for (var i = 0; i < aA.length; i++) {
            if (aA[i].title) {
                aA[i].onmouseover = function (ev) {
                    sTitle = this.title;
                    this.title = '';
                    oTitle = document.createElement('div');
                    oTitle.className = 'titleShow';
                    oTitle.innerHTML = sTitle;
                    document.body.appendChild(oTitle);
                };
                aA[i].onmousemove = function (ev) {
                    var ev = ev || window.event;
                    oTitle.style.left = ev.clientX + 10 + 'px';
                    oTitle.style.top = ev.clientY + 10 + 'px';
                }
                aA[i].onmouseout = function () {
                    this.title = sTitle;
                    document.body.removeChild(oTitle);
                }
            }
        }
    }

function copyContent(content) {
    var oInput = document.createElement('input');
    oInput.value = content;
    document.body.appendChild(oInput);
    oInput.select();// 选择对象
    document.execCommand("Copy");// 执行浏览器复制命令
    oInput.remove()
    $.modal.msgSuccess("复制ID成功");
}

   //textarea自适应高度
 $(function () {
        $.fn.autoHeight = function () {
            function autoHeight(elem) {
                elem.style.height = 'auto';
                elem.scrollTop = 0; //防抖动
                elem.style.height = elem.scrollHeight + 'px';
            }

            this.each(function () {
                autoHeight(this);
                $(this).on('keyup', function () {
                    autoHeight(this);
                });
            });
        }
        $('textarea[autoHeight]').autoHeight();
    })

1.6 正则验证

1.6.1 验证方法

  var validate = function(value) {
        var reg = /表达式/;
        if (!reg.test(value)) {
            return false;
        }
        return true;
    }

6.2 常用正则表达式

(1) 数字验证

验证数字：^[0-9]*$

验证n位的数字：^\d{n}$

验证至少n位数字：^\d{n,}$

验证m-n位的数字：^\d{m,n}$

验证零和非零开头的数字：^(0|[1-9][0-9]*)$

验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$

验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$

验证非零的正整数：^\+?[1-9][0-9]*$

验证非零的负整数：^\-[1-9][0-9]*$

验证非负整数（正整数 + 0） ^\d+$

验证非正整数（负整数 + 0） ^((-\d+)|(0+))$

整数：^-?\d+$

非负浮点数（正浮点数 + 0）：^\d+(\.\d+)?$

正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

非正浮点数（负浮点数 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$

负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

浮点数 ^(-?\d+)(\.\d+)?$

(2) 字符串验证

验证长度为3的字符：^.{3}$

验证由26个英文字母组成的字符串：^[A-Za-z]+$

验证由26个大写英文字母组成的字符串：^[A-Z]+$

验证由26个小写英文字母组成的字符串：^[a-z]+$

验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$

验证由数字、26个英文字母或者下划线组成的字符串：^\w+$

验证是否含有 ^%&',;=?$\" 等字符：[^%&',;=?$\x22]+

(3) 特殊字段验证

验证汉字：^[\u4e00-\u9fa5],{0,}$ 或 ^[\u4e00-\u9fa5]+$
验证汉字或字符: ^[\u0391-\uFFE5]+$
验证Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

验证InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$

验证电话号码：^(\d3,4\d3,4|\d{3,4}-)?\d{7,8}$ 或 ^(\d{3,4}-?)?\d{7,9}$

验证手机号: ^(13[0-9]|15[0-9]|18[0-9]|17[0-9]|14[0-9])[0-9]{8}$
验证qq号: ^[1-9]\d{4,12}$
邮政编码: ^[0-9]{6}$ 
验证身份证号（15位或18位数字）：^\d{15}|\d{}18$

验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：“01”-“09”和“1”“12”

验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为：01、09和1、31。

验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。

6.3 正则表达式语法

^ 匹配一个输入或一行的开头，/^a/匹配"an A"，而不匹配"An a"
$ 匹配一个输入或一行的结尾，/a$/匹配"An a"，而不匹配"an A"
* 匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa
+ 匹配前面元字符1次或多次，/ba*/将匹配ba,baa,baaa
? 匹配前面元字符0次或1次，/ba*/将匹配b,ba
(x) 匹配x保存x在名为$1...$9的变量中
x|y 匹配x或y
{n} 精确匹配n次
{n,} 匹配n次以上
{n,m} 匹配n-m次
[xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符)
[^xyz] 不匹配这个集合中的任何一个字符
[\b] 匹配一个退格符
\b 匹配一个单词的边界
\B 匹配一个单词的非边界
\cX 这儿，X是一个控制符，/\cM/匹配Ctrl-M
\d 匹配一个字数字符，/\d/ = /[0-9]/
\D 匹配一个非字数字符，/\D/ = /[^0-9]/
\n 匹配一个换行符
\r 匹配一个回车符
\s 匹配一个空白字符，包括\n,\r,\f,\t,\v等
\S 匹配一个非空白字符，等于/[^\n\f\r\t\v]/
\t 匹配一个制表符
\v 匹配一个重直制表符
\w 匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[\w]匹配"$5.98"中的5，等于[a-zA-Z0-9]
\W 匹配一个不可以组成单词的字符，如[\W]匹配"$5.98"中的$，等于[^a-zA-Z0-9]。

2 jquery方法

//清除表单
 $.fn.clearForm = function () {
        this.find('input, textarea').each(function () {
            $(this).val("");
        });
    }

 $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

//表单异步提交操作
    //文本参数
    $.ajax({
		url:"你的url地址",
		type:'post',
		data:$('form').serialize(), // "id=asdasd&s=000&name=1233"
		success:function(){
			alert('成功')；
		}
	})
    //附件参数
        var fd = new FormData();
        fd.append("name", "bill");
        fd.append("photo", $('#f')[0].files[0]);
        fd.append("photo2", $('#f')[0].files[1]);
        $.ajax({
            url: '/webform1.aspx',
            type: 'post',
            processData: false,
            contentType: false,
            data: fd,
            success: function () {
                alert("ok")
            }
        })

3 jquery方法,插件封装

//简单定义插件
(function ($) {
    $.fn.myPlugin = function () {
        //你自己的插件代码
        //this. 当前元素
         this.each(function () {
           //处理选择器选择的每个元素
        });
    };
})(jQuery);
//调用
$("#id").myPlugin();

//绑定事件命名空间
 (function ($) {
        var methods = {
            method1: function (options) {
                alert(options)
            },
            method2: function () {
                alert((1))
            }
        //,.....可添加多个方法
        };
        $.fn.myPlugin= function (method) {
            // 方法调用
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method' + method + 'does not exist on jQuery.tooltip');
            }
        };
    })(jQuery);
//调用
$("#id").myPlugin("methodName");//无参调用,可有返回值
$("#id").myPlugin("methodName","options");//有参调用,可有返回值

  //图片比例缩放控制
    function DrawImage(ImgD,FitWidth,FitHeight){
        var image=new Image();
        image.src=ImgD.src;
        if(image.width>0 && image.height>0){
            if(image.width/image.height>= FitWidth/FitHeight){
                if(image.width>FitWidth){
                    ImgD.width=FitWidth;
                    ImgD.height=(image.height*FitWidth)/image.width;
                } else {
                    ImgD.width=image.width;
                    ImgD.height=image.height;
                }
            }  else {
                if(image.height>FitHeight){
                    ImgD.height=FitHeight;
                    ImgD.width=(image.width*FitHeight)/image.height;
                } else {
                    ImgD.width=image.width;
                    ImgD.height=image.height;
                }
            }
        }
    }

4. 常用js,jquery插件库

highcharts.js 图表插件官网   菜鸟教程

jquery.msCarousel-min.js 轮播图插件  资源与应用

jquery.jcarousel.js 滚动切换传送插件  资源下载与使用教程

jquery.raty.js 评分插件  资源下载及简单使用

jquery.ui.js  网页用户界面代码库官网

kindeditor.js html编辑器官网

layer.js 模块化前端框架  官网

WdatePicker.js 日期控件官网

select2.min.js 下拉框插件资源下载使用教程

ueditor.all.js  html编辑器  官网

jquery.ztree.all-3.5.min.js 树形菜单插件官网

jquery.cookie.js cookie操作插件资源下载简单应用

jquery.form.min.js 表单异步提交插件资源下载   简单教程

jquery.masonry.js 瀑布流插件官网

jquery.poshytip.min.js 文本提示插件资源下载与教程

jquery.printarea.js 局部打印插件资源下载   简单应用

jquery.scrollLoading-min.js 图片延迟加载插件资源下载简单使用

jquery.validation.min.js 表单验证插件  资源下载菜鸟教程

perfect-scrollbar.min.js 滚动条美化插件  资源下载   简单示例

respond.min.js  资源下载详情   详解

html5shiv.js  资源下载   详情详解

bootstrap.js 前端框架官网菜鸟教程

zepto.min.js 移动端轮播图插件  资源下载与API 示例

jquery.Jcrop.js 图像剪裁插件资源与示例

jquery-ui-timepicker-addon.min.js 日期控件官网简单示例

jquery.autocomplete.js 联系补全插件官网   菜鸟教程

evol.colorpicker.min.js 颜色控件  资源下载

jquery.fileupload.js 文件上传插件资源下载示例

jquery.imgareaselect.min.js 图片剪切示例示例

jquery.qtip.min.js 提示插件官网示例

jquery.slides.min.js 响应式幻灯片插件官网

template.min.js 模板引擎插件资源下载示例

jquery.icheck.min.js 美化复选框插件官网

jquery.jqzoom.js 图片放大器资源下载与示例

jquery.flexslider-min.js 轮播图插件资源下载示例

jquery.edittable.min.js 可编辑表格  资源下载   示例

jquery.KinSlideshow-1.2.1.min 焦点图轮播效果资源下载示例

jquery-placeholder.js h5 placeholder效果插件资源下载示例

郑重其事,鹏程万里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js,jquery常用方法

1 js方法1.1 数字相关//获取范围内的随机数function gen_random(min, max){ return Math.floor(Math.random() * (max- min) + min); }//金额转换转大写金额 function transform(tranvalue) { try { ...
复制链接

扫一扫