JavaScript + jQuery

推荐链接

链接目录

基础代码

强制解锁

var article_content=document.getElementById("article_content");
article_content.removeAttribute("style");

var follow_text=document.getElementsByClassName('follow-text')[0];
follow_text.parentElement.parentElement.removeChild(follow_text.parentElement);

var hide_article_box=document.getElementsByClassName(' hide-article-box')[0];
hide_article_box.parentElement.removeChild(hide_article_box);

在访问网页不安全（没有https证书），但是高级里面又进不去的时候可以使用

//thisisunsafe
调整键盘为英文输入状态，刷新一下页面，鼠标点击当前页面任意位置，然后依次按键：thisisunsafe

JavaScript 和 jQuery 的选择器

内容过滤选择器

:contains(text) //	所有包含文本 "Hello" 的元素
$("div:contains('Hello')")    // 包含 Hello文本的元素

JQuery删除移除节点元素指定id或者指定class

//JQuery 下面有两个删除元素的方法：
1.$('#test')empty()
从id为test元素中删除子元素。
2.$('#test').remove()
//删除被选元素及其子元素。
//如果，想要从多层元素进行指定删除，可以通过一下这种方式进行：
1.$("#test").remove(".classname");
//删除test元素下面，class为classname的元素。
2.$("#test").remove("#idname");
//删除test元素下面，id为idname的元素。
3.$("#test").find("div[id='idname']").remove();
//通过find 方法 可以找到test元素下面的指定元素，然后通过remove进行删除。

输入框的样式修改

更改只读输入框的样式以使其看起来像禁用（disabled）输入框

//第一种办法
<style>
    .readonly-input {
        background-color: #f2f2f2;
        color: #999999;
        cursor: not-allowed;
    }
</style>

//第二种办法
style="border: 1px solid #DDD;background-color: #F5F5F5;color:#ACA899;"

页面打印时候可以另起一页

<div style="page-break-after: always;"></div>  <!--打印的时候在此另起一页--> 

##传入文件导入excel数据

<span style="float:right;">
     <input type="file" name="fee-excel-file"
            style="display: inline;"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
     />
     <input type="button" name="upload" value="确定导入" id="uploadId" class="btn btn-primary btn-xs">
<a  href="{:U('/Public/excelUploads/导入模板.xls')}" class="btn btn-success btn-xs" style="margin-right: 20px;"
    value="模板下载" type="button">模板下载</a>
</span>

var formData = new FormData()
formData.append('excel-file', $('input[name="fee-excel-file"]')[0].files[0])

创建新的页面

var iWidth = 1000; //弹出窗口的宽度;
var iHeight = 600; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
var iTop = (window.screen.height - 30 -
    iHeight) / 2; //获得窗口的垂直位置;
var iLeft = (window.screen.width - 10 -
    iWidth) / 2; //获得窗口的水平位置;
//getUrl 就是地址
window.open(getUrl, '_blank', 'height=' +
    iHeight + ',innerHeight=' +
    iHeight + ',' +
    'width=' + iWidth + ',innerWidth=' +
    iWidth + ',top=' + iTop + ',left=' +
    iLeft + ',' +
    'toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no'
);

为下拉框增加搜索功能的插件（select2）

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
//在需要的select框类中
class="form-control select2" 
//启动select2
$(function () {
    $(".select2").select2();
});

为form表单提交控制验证规则

//使用了 jQuery Validation 插件来操作表单验证规则

if (data.length > 0){
	$('#id').rules('add',{required:true,messages:{required:'必填项'}});
}else{
	$('#id').rules('remove','required');
}

阻止默认的表单提交行为

//想在前端进行表单提交时捕捉错误信息而又不希望立即跳转到下一个页面，可以设置阻止默认的表单提交行为
$('#login-form').submit(function (event) {

  event.preventDefault(); // 阻止默认的表单提交行为
  
  // 获取表单数据
  var formData = $(this).serialize();
  // 发送 AJAX 请求
  $.ajax({
    url: 'your-backend-url', // 替换为实际的后台处理URL
    type: 'POST', // 或者 'GET'，根据你的需求
    data: formData,
    success: function (response) {
      // 处理成功响应
      // 在这里可以进行页面跳转或其他操作
    },
    error: function (xhr, status, error) {
      // 处理错误响应
      // 在这里可以捕捉到后台返回的错误信息并进行处理
    }
  });
});

判断对象里面是否存在某个键

//hasOwnProperty方法返回一个布尔值，如果对象自身包含指定属性，则返回true，否则返回false。
const obj = {
  prop1: "value1",
  prop2: "value2"
};
console.log(obj.hasOwnProperty("prop1"));  // true
console.log(obj.hasOwnProperty("prop2"));  // true
console.log(obj.hasOwnProperty("prop3"));  // false

if(!obj.hasOwnProperty('prop3')){
	obj.prop3 = "value3";
}

下拉框选中特定值，并且触发相应的下拉框事件

// 对下拉框框进行选中，并且.trigger('change') 触发下拉框的 change 事件。这样可以确保其他依赖于下拉框值变化的操作或事件能够正确响应。
// 如果没有选中成功，可以看看是不是需要将下拉框重新渲染，毕竟现在用html原生的很少了
$("select[name='row[value]']").val(data.value).trigger('change');

业务代码

input输入框限制输入数字

oninput：在用户输入时触发，与onchange不同之处在于 oninput 事件在元素值发生变化是立即触发。
onchange：在input值发生改变且输入框失去焦点时触发，所以在用户输入失去焦点前，非数字并不能被替换为空，视觉上存在一点缺陷。
onkeyup：键盘弹起时触发，也存在一个问题，英文输入情况下，非数字会短暂存在后才会被替换，中文输入情况下，字母还是能输入，功能上存在一定缺陷。

//设置只能输入数字和逗号
this.value..replace(/[^0-9\,]/g,'');
//总而言之:先在input标签里输入οnkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的X换成你想输入的代码就可以了,中文u4E00-u9FA5，数字0-9，英文a-z\A-Z，其它符号@、点或其它符号。也可以多个，用\隔开就行了。//\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.
//例如：中英文 + 数字 + @符号 + 点符号
//οnkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\$]/g,'')"


//保留两位小数 只能填写数字 多用于输入金额
onkeyup="this.value=this.value.replace(/^(\d*.?\d{0,2}).*/,'$1')"  
//保留两位小数 只能填写数字，连,都会被去掉(更加安全)
onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"

//只能填写数字
onkeyup="this.value=this.value.replace(/\D/g,'')"
oninput="this.value=this.value.replace(/\D/g,'')"   
//只能填写数字
onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"

//中文逗号替换成英文逗号
onkeyup="this.value=this.value.replace(/，/g,',')"
//限制只能输入英文
onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"
//禁止输入空格
onkeyup="this.value=this.value.replace(/[, ]/g,'')"

通过正则表达式限制只能输入数字

//JavaScript 内置的 toFixed(2) 将一个浮点数保留两位小数
function clearNoNum(obj) {
            obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
            obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
            obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
         // obj.value = obj.value.replace(/^(-?)(\d+)\.(\d{0,4}).*$/, '$1$2.$3'); 只能输入四位小数
            if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
                obj.value = parseFloat(obj.value);
            }
            if (!obj.value || obj.value == '0' || obj.value == '0.0' || obj.value == '0.00') {

                return;
            }

    // console.log(obj.value);
    //  正常得话继续调后端接口
}

windows中进行子页面使用父页面的函数

//请确保子页面是通过iframe或类似的方式嵌入到父页面中，以便`window.parent`对象正确引用父页面。
<!-- parent.html -->
<script>
  function myFunction() {
    // 父页面函数的逻辑
    console.log("父页面函数被调用");
  }
</script>


<!-- child.html -->
<script>
  // 调用父页面的函数
  window.parent.myFunction();
</script>

windows中进行子页面向父页面传递数据

//在子页面中，可以使用 window.postMessage() 方法向父页面发送消息，并在父页面中通过监听 message 事件来接收消息。
// window.parent.postMessage(data, targetOrigin) 中，targetOrigin 参数指定了消息的目标来源。该参数可以是一个具体的 URL，或者是特定的字符串,如果 targetOrigin 参数设置为具体的 URL，那么只有与该 URL 相匹配的父窗口才能接收到消息。例如，targetOrigin 参数设置为 "https://example.com"，则只有来自该 URL 的父窗口才能接收到消息。如果 targetOrigin 参数设置为 "*"（星号），则表示消息可以被任意父窗口接收，无论来源是什么。这样做存在一定的安全风险，因为任何窗口都可以监听并接收消息。
// 子页面发送消息给父页面，
var data = { key: 'value' };
window.parent.postMessage(data, '*');

// 父页面监听 message 事件来接收消息
window.addEventListener('message', function(event) {
  var data = event.data; // 接收到的数据
  console.log(data);
});

在前端进行去重

// 对数据升序排列
dataForm.sort(function (a, b) {
    return new Date(a.PlanDeliveryDate).getTime() - new Date(b.PlanDeliveryDate).getTime()
})
//has方法 map是否有这个键
//Map对象.set(键名 , 数值)
const res = new Map();
var dataFilter = {};
dataFilter['data'] =  dataForm.filter((a)=> !res.has(a['project_number']) && res.set(a['project_number'],1))
//这一句是将去重的数据传递给需要的地方，这里传递的是父页面的一个函数里面
window.parent.getProjectList(dataFilter);

JS计算当年还有多少天

function counter() { 
  var date = new Date(); 
  var year = date.getFullYear(); 
  var date2 = new Date(year, 11, 30, 23, 59, 59,999);//
  /*转换成秒*/
  var time = (date2 - date) / 1000; 
  var day = Math.floor(time / (24 * 60 * 60)) 
  var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60)) 
  var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60); 
  var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60); 
  var str = year + "年还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒"; 
  console.log(str); 
} 
window.setInterval("counter()", 1000);

JS对INPUT输入的时候全角自动转为半角

//第一种
$('#输入框的id').on('blur',function(){
    // alert(111);
    let a = ',，'
    //英文逗号是 44 ，中文逗号是65292
    console.log(a.charCodeAt(0),a.charCodeAt(1))

    // console.log('this',this);
    var str=this.value;
    var result="";
    // console.log('str',str);
    // console.log(String.fromCharCode(12288),String.fromCharCode(12256))
    // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
    for (var i = 0; i < str.length; i++)
    {
        if (str.charCodeAt(i)==12288)
        {
            result+= String.fromCharCode(str.charCodeAt(i)-12256);
            continue;
        }
        if (str.charCodeAt(i)>65280 && str.charCodeAt(i)<65375){
            result+= String.fromCharCode(str.charCodeAt(i)-65248);
        }else{
         result+= String.fromCharCode(str.charCodeAt(i));
        }
    }

    // console.log('result',result)
    this.value=result;
})


//第二种
function CtoH(obj)
{
    var str=obj.value;
    var result="";
    for (var i = 0; i < str.length; i++)
    {
        if (str.charCodeAt(i)==12288)
        {
            result+= String.fromCharCode(str.charCodeAt(i)-12256);
            continue;
        }
        if (str.charCodeAt(i)>65280 && str.charCodeAt(i)<65375)
            result+= String.fromCharCode(str.charCodeAt(i)-65248);
        else result+= String.fromCharCode(str.charCodeAt(i));
    }
    obj.value=result;
}
<input  type="text" onkeyup="CtoH(this);">

实现多个input输入数据后自动进行计算(加法)，实时显示数据

//使用方法
calculateSum($("#yspj,#cash"),$('#totalCurrentAssets'));

//实现多个input输入数据后自动进行计算，实时显示数据
//只允许正数（如果想要允许负数则需要将  if (isNaN(currentValue))  改成 if (!/^(-)?[0-9]*\.?[0-9]*$/.test(currentValue))）
function calculateSum(inputs, output) {
    var $inputs = $(inputs);
    var $output = $(output);
    var sum = 0;

    $inputs.each(function () {
        var value = $(this).val().replace(/,/g, '');
        if (value === '') {
            value = 0;
            $(this).val('0.00');
        } else {
            value = parseFloat(value).toFixed(2);
            $(this).val(value);
        }
        sum += parseFloat(value);
    });
    $output.val(sum.toFixed(2));

    // 绑定事件，当输入框中的值发生变化时自动计算总和
    $inputs.on('input propertychange', function () {
        //获取输入框的值
        var currentValue = $(this).val().replace(/,/g, '') || '0.00';
        // if (!/^(-)?[0-9]*\.?[0-9]*$/.test(currentValue)) 允许负数
        // ***如果输入的值不是数字，将其设置为'0.00' ***
        if (isNaN(currentValue)) {
            $(this).val('0.00');
        } else {
            // 如果输入的值超过小数点后两位，将其截断
            var decimalPart = currentValue.split('.')[1] || '';
            // console.log(decimalPart);
            if (decimalPart.length > 2) {
                currentValue = currentValue.substring(0, currentValue.indexOf('.') + 3);
                $(this).val(currentValue);
            }
        }
        currentValue = parseFloat(currentValue);

        // 获取其他输入框的值
        var otherValues = 0;
        $inputs.not(this).each(function () {
            var value = parseFloat($(this).val().replace(/,/g, '')) || 0;
            otherValues += value;
        });
        // 计算输入框中的值的总和
        sum = currentValue + otherValues;
        $output.val(sum.toFixed(2));
    })
}

jQuery对字符串内身份证号和手机号码进行脱敏

//数字从第四位至倒数第四位脱敏
function formatNumber(value) {
    var val = ''
    if (value.length > 0) {
        if (value.length > 11)
            val = value.substring(0, 4) + '******' + value.substring(value.length - 4);
        else if (value.length > 7)
            val = value.substring(0, 3) + '******' + value.substring(value.length - 2);
    }
    return val;
}

//delHtmlTag 是清除字符串中所有HTML标签方法
    function delHtmlTag(str, length) {
        if (IsNullOrEmpty(str)) {
            return '';
        }
        if (IsNullOrEmpty(length)) {
            length = 100;
        }
        return str.replace(/<[^>]+>/g, "").substring(0, length);//去掉所有的html标记
}

//直接调用这个方法即可
    function Desensitization(content) {
        //正则表达式获得字符串中所有数字相关
        var Reg = /(\d{1,3})+(?:\.\d+)?/g
        var content_int = content.match(Reg);

        if (content_int != null && content_int != "null") {
            for (var i = 0; i < content_int.length; i++) {
                if (content_int[i].length == 18) //身份证号18位 
                {
                    var newIDcard = formatNumber(content_int[i]);
                    content = content.replace(content_int[i], newIDcard);
                }
                else if(content_int[i].length == 17) //身份证号13位 (可能包含一位英文字母)
                {
                    var newIDcard = formatNumber(content_int[i]);
                    content = content.replace(content_int[i], newIDcard);
                }
                else if (content_int[i].length == 11)  //11位手机号码
                {
                    var newPhone = formatNumber(content_int[i]);
                    content = content.replace(content_int[i], newPhone);
                }
                else if (content_int[i].length == 8)  //8位电话号码
                {
                    var newTel = formatNumber(content_int[i]);
                    content = content.replace(content_int[i], newTel);
                }
                else if (content_int[i].length == 12)  //带区号电话号码
                {
                    var newCodeTel = formatNumber(content_int[i]);
                    content = content.replace(content_int[i], newCodeTel);
                }
            }
        }
        return content;
    }

jQuery控制显示隐藏的几种方法

属性值	说明
inline	行内元素
block	块元素
inline-block	行内块元素
none	隐藏元素
table	以表格形式显示
table-row	以表格行形式显示
table-cell	以表格单元格形式显示

$.each($("#表格的id或者div的id tr"),function(index,value){
        this.style.display = 'none';
})
$.each($("#表格的id或者div的id tr"),function(index,value){
        this.style.display = 'table-row';
})

获取table表格每行每列的数据

//计算table表格的数据，实时计算,biaogeDayin是ID
var tab=document.getElementById("biaogeDayin");
var rows=tab.rows;
for(var i=0;i<rows.length;i++){ //遍历表格的行
    for(var j=0;j<rows[i].cells.length;j++){  //遍历每行的列
        console.log("第"+(i+1)+"行，第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);
    }
}

使用input和select生成表格后获取表格数据

//通过class获取到 td 的相关值
var pfkValues = $('.pfkValue');
  let datas = [];
  pfkValues.each(function(index, element) {
      var value  = '';
      if($(element).is('input')) {
          // console.log("input",element);
          // datas[element.name] = $(element).val();
          datas[index] = $(element).val();
      } else if($(element).is('select')) {
          // console.log("select",element);
          //文本内容:$(element).find('option:selected').text();
          //value：$(element).find('option:selected').val(); 
          // datas[element.name] = $(element).find('option:selected').val();
          datas[index] = $(element).find('option:selected').val();
      }
  });

以哈希表（HashMap）来操作数组对象

// 将array1转换为以key为键的哈希表
var hashTable = {};
array1.forEach(function(obj1) {
    hashTable[obj1.key] = obj1;
});
// 遍历array2中的每个对象
array2.forEach(function(obj2) {
    // 在哈希表中查找与obj2的key相同的对象
    var obj1 = hashTable[obj2.key];
    // 如果找到匹配的对象，则将obj1的value复制到obj2中
    if (obj1) {
        obj2.value = obj1.value;
    }
});

JavaScript 实现文件下载并重命名

/**
 * 保存
 * @param  {Blob} blob     
 * @param  {String} filename 想要保存的文件名称
 */
function saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
    } else {
        const link = document.createElement('a');
        const body = document.querySelector('body');

        link.href = window.URL.createObjectURL(blob);
        link.download = filename;

        // fix Firefox
        link.style.display = 'none';
        body.appendChild(link);
        
        link.click();
        body.removeChild(link);

        window.URL.revokeObjectURL(link.href);
    }
}

/**
 * 下载
 * @param  {String} url 目标文件地址
 * @param  {String} filename 想要保存的文件名称
 */
function download(url, filename) {
    getBlob(url).then(blob => {
        saveAs(blob, filename);
    });
}


//使用方式
download('https://github.com/vuejs/vue-router', 'vue-router.html');

身份证校验规则

/**
 * 身份证15位编码规则：dddddd yymmdd xx p dddddd：6位地区编码 yymmdd: 出生年(两位年)月日，如：910215 xx:
 * 顺序编码，系统产生，无法确定 p: 性别，奇数为男，偶数为女
 * 
 * 身份证18位编码规则：dddddd yyyymmdd xxx y dddddd：6位地区编码 yyyymmdd:
 * 出生年(四位年)月日，如：19910215 xxx：顺序编码，系统产生，无法确定，奇数为男，偶数为女 y: 校验码，该位数值可通过前17位计算获得
 * 
 * 前17位号码加权因子为 Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ] 验证位
 * Y = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ] 如果验证码恰好是10，为了保证身份证是十八位，那么第十八位将用X来代替
 * 校验位计算公式：Y_P = mod( ∑(Ai×Wi),11 ) i为身份证号码1...17 位; Y_P为校验码Y所在校验码数组位置
 */
function isIdCard(idCard) {
	// 15位和18位身份证号码的正则表达式
	var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;

	// 如果通过该验证，说明身份证格式正确，但准确性还需计算
	if (regIdCard.test(idCard)) {
		if (idCard.length == 18) {
			var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10,
					5, 8, 4, 2); // 将前17位加权因子保存在数组里
			var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); // 这是除以11后，可能产生的11位余数、验证码，也保存成数组
			var idCardWiSum = 0; // 用来保存前17位各自乖以加权因子后的总和
			for (var i = 0; i < 17; i++) {
				idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
			}

			var idCardMod = idCardWiSum % 11;// 计算出校验码所在数组的位置
			var idCardLast = idCard.substring(17);// 得到最后一位身份证号码

			// 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
			if (idCardMod == 2) {
				if (idCardLast == "X" || idCardLast == "x") {
					//alert("恭喜通过验证啦！");
					return true;
				} else {
					//alert("身份证号码错误！");
					return false;
				}
			} else {
				// 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
				if (idCardLast == idCardY[idCardMod]) {
					//alert("恭喜通过验证啦！");
					return true;
				} else {
					//alert("身份证号码错误！");
					return false;
				}
			}
		}else{
			return true;
		}
	} else {
		//alert("身份证格式不正确!");
		return false;
	}
}

使用$(‘form’).serialize()获取表单数据时，增加的除表单外的额外参数

//这是一个封装的ajax请求，临时想要给$('form').serialize()增加额外的字段array1、array2可以使用下面的传值写法。
function ajaxApi(type,url,data,options) {
  var defaultOptions  = {
      type: type,
      url: url,
      // data: data,
      // data:$('form').serialize(),
      
      // 'array1':array1,'array2':array2就是自己增加的除表单外的额外参数   
    data:$.param({'array1':array1,'array2':array2})+'&'+$('form').serialize(), 
     
       dataType: 'json',
       layerIndex: -1,
       beforeSend: function () {
           this.layerIndex = layer.msg('加载中...', {
               icon: 16,
               shade: 0.1
           });
       },
       complete: function () {
           layer.close(this.layerIndex);
       },
       success: function (data) {
           // layui.layer.msg(data.msg, {icon: 5});
       },
   };
   var settings = $.extend({}, defaultOptions, options);
   $.ajax(settings);
}