一些...
在jQuery中each
用return false结束整个循环，
用return true结束本轮循环
$('#Consignor_ID option:selected').text(); //获取select选项文本
$('#Consignor_ID option:selected').attr('typeno'); //获取自定义属性值
$("#MPurl").attr("readonly","readonly"); //添加只读
$("#MPurl").attr("disabled", true).css({'backgroundColor':'#d9d9d9'}); //添加禁用
$("#MPurl").removeAttr("readonly"); //删除只读
$("#MPurl").removeAttr("disabled").css('backgroundColor','#ffffff'); //删除禁用
$("#BacklogEditCheckAll").prop("checked", false); //复选框清值
Number($("input[name='zhejiu']:checked").val()); //单选获取值
$("input[name='zhejiu']").prop("checked", false); //单选清值
var numb = 3
$("input[name='zhejiu'][value="+numb+"]").prop("checked",true);//单选赋值
$("#wenbenkuang").blur(function(){ wbkFn($(this).val()) }) //input失去焦点传参
复选框点击事件
<input type="checkbox" onclick="CheckBoxFn(this)"/>
function CheckBoxFn(t) {
if ($(t).prop("checked")) {
console.log(1)
}else{
console.log(2)
}
}
$box.on('click',function(){
$(this).addClass('select').sibling().removeClass('select');//添加样式并移除兄弟元素样式
})
encodeURIComponent(str)和decodeURIComponent(码)
unescape(码)
background-color: rgba(0, 0, 0, 0);
filter:Alpha(opacity=50)
opacity:0.5;
JQ添加事件和去掉事件
$("#seeImg").on('click',seeRow1);
$("#seeImg").on('click',{a:12},seeRow1); function seeRow1(event){console.log(event.data)}//传值
$("#seeImg").removeAttr('onclick');
{}空对象有原形，Object.create(null)创建空对象没有原形
小于12px文字
p {
white-space: nowrap;
font-size: .12rem;
-webkit-transform-origin-x: 0; //缩小后文字居左
-webkit-transform: scale(0.80); //关键
}
文字竖向排列
writing-mode:vertical-lr;
取消末尾逗号：
str = str.slice(0,-1)
str = str.substring(0,str.length-1)
正则替换字符：
strTime = strTime.replace("T", " ");
str = str.replace(new RegExp(/(-)/g), '');
koa添加事件，id，文本
<div data-bind="click:seeRow2.bind($data, WRID),attr:{id:externalID('wenjian',WRID)},text:WRID"></div>
鼠标移入移出事件：data-bind="event:{ mouseover:mouseopenFn.bind($data, StockCostMaster_ID,Remark), mouseout:mousecloseFn.bind($data, StockCostMaster_ID), mouseoverBubble: false, mouseoutBubble: false }"
大于0的正整数：
onKeyUp="this.value=this.value.replace(/\D|^0/g,'')"
手机号：
/^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[189]{1})|(16[56]{1}))+\d{8})$/.test(value)
/^(13[0-9]|14[0-9]|15[0-9]|18[0-9]|17[0-9]|16[0-9]|19[0-9])\d{8}$/
座机：
/^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/
车牌号：
var xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
var creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
英文数字自动换行：
style="word-break: break-word;"
js换行：
white-space:pre-line; 配合 空格\n空格
匹配时注意特殊字符要用转义字符
str.replace(/_/g,'^');
str.replace(/\^/g,'——');
将中文逗号和英文逗号都可以作为分组符号
let ary = val.split(/，|,/);
<input type="text" autocomplete="off"> 关闭浏览器自动记录之前输入的值
vue在created初始化时是没有app的，只能用this(var self = this)
var box = document.querySelector("#app > div:first-child")
var box = document.querySelectorAll("#app > div:first-child")[0]
vue字符串拼接添加点击事件
html += `<button class="el-button el-button--small" οnclick="onSubmit()">主要按钮</button>`
在methods中添加onSubmit函数不起作用，应该在下面直接写
window.onSubmit =function onSubmit (){
console.log(123)
}
"12" + 2 * "20" - 1 + true "12" + 40 - 1 + true "1240" - 1 + true 1239 + true 1240 "1" + 20 - 1 + 1 + 2 * "50" "1" + 20 - 1 + 1 + 100 "120" - 1 + 1 + 100 119 + 1 + 100 120 + 100 220
样式：/*!important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器*/
<style type="text/css"> /*全屏*/.mask{position:fixed; top:0; left:0; width:100%; height:100%;} /*居中*/ body{display:flex;justify-content: center;align-items: center;height:100vh;background: #fafafa;} /*居中*/.box1{position:fixed; transform:translate3d(-50%,-50%,0); top:50%; left:50%; width:100px; height: 100px;} /*居中*/.box2{position:absolute; margin:-50px 0 0 -50px; top:50%; left:50%; width:100px; height:100px;} /*移动端居中*/.box3{position:absolute; top:0; right:0; bottom:0; left:0; margin: auto; width:100px; height:100px;} /*flex居中*/.box4{display:flex; flex:1; flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:center;} /*js居中*/#con{position:absolute; width:100px; height: 100px;} var con = document.getElementById('con'); con.style.left = ((document.documentElement.clientWidth || document.body.clientWidth) - con.offsetWidth) / 2 + 'px'; con.style.top = ((document.documentElement.clientHeight || document.body.clientHieght) - con.offsetHeight) / 2 + 'px'; /*溢出隐藏*/.wz{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /*清除浮动*/.clear1{overflow:hidden;} .clear2{clear:both;} .clear:after{display:block; content:''; overflow:hidden; clear:both; width:0; height:0;} </style>
session:
if(sessionStorage["gobackInfo"] != undefined){ sessionStorage.removeItem("gobackInfo"); } sessionStorage.setItem("pubgoodsinfo",JSON.stringify(pubgoodsinfo)); let pubgoodsinfo = JSON.parse(sessionStorage.getItem("pubgoodsinfo")); if (localStorage["myInfo"] != undefined) { this.UserType = JSON.parse(localStorage.getItem("myInfo")).UserType; } localStorage.setItem("myInfo",JSON.stringify(obj));
标准注释写法：
/* * bubble:冒泡排序 //方法名：意思 * @ parameter //参数 * ary:[array] 需要实现排序的数组 //说明 * @ return //返回值 * [array] 排序后的数组(升序) * by team on 2018/11/4 */
动态加载js
function loadScript(url){ let script = document.createElement('script'); script.src = url document.body.appendChild(script) }
h5禁止文字选中
.page{ -moz-user-select:none; -webkit-user-select:none; user-select: none; }
$.ajax({ type: 'POST', url: "/admin", data: { xxx:xxx }, async: true, dataType: "json", success: function (msg) { //console.log(msg); } } });
文字渐变色：
<div style="width:150px;background: linear-gradient(94.23deg,#5374fa 12.41%,#fd9179 52.55%,#ff6969 89.95%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;">
1243234213423424
</div>
二维数组找对象中的true和false
let ary = [ {name:'0',flag:true}, {name:'1',flag:false}, {name:'2',flag:true}, {name:'3',flag:false}, {name:'4',flag:true}, {name:'5',flag:true} ] let res1 = ary.reduce((t, c, i) => (c.flag && t.push(i), t), []) //为true的索引 let res2 = ary.reduce((t, c, i) => (c.flag && t.push(ary[i]), t), []) //为true的项 let res3 = ary.reduce((t, c, i) => (!c.flag && t.push(i), t), []) //为false的索引 let res4 = ary.reduce((t, c, i) => (!c.flag && t.push(ary[i]), t), []) //为false的项 console.log(res1,res2,res3,res4)
表格中单元格加鼠标移动事件
<style> .smallconwin { position: absolute; right: -314px;top: -1px; width: 314px; height: 94px; padding: 3px; overflow-y:auto; background: #fff; border: 1px solid #ccc; z-index: 200;text-align: left;white-space: normal;line-height: 26px;} .wzNowrap{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .wzNowrap1{ width:100px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 限制显示的行数为2 */ -webkit-box-orient: vertical;/* 必须结合的属性,用于控制方向 */ } </style> <td> <div style="position: relative;" v-on:mouseover="mouseopenFn(index)" v-on:mouseout="mousecloseFn(index)"> <div class="wzNowrap" style="width:350px;">{{item.Abstract}}</div> <span style="display:none;" class="smallconwin" v-bind:id="'smallConWin'+(index)">{{item.Abstract}}</span> </div> </td> mouseopenFn:function (ind){ $("#smallConWin"+ind).show(); }, mousecloseFn:function (ind) { $("#smallConWin"+ind).hide(); },
表格中单元格加展开闭合事件
<style> .wzNowrap{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: left;} .smallconwin { position: initial; width: 200px; text-align: left; line-height: 26px;} </style> <td width="20%"> <div style="position: relative;" v-on:mouseover="mouseopenFn(index)" v-on:mouseout="mousecloseFn(index)"> <div class="wzNowrap" style="width:200px;" v-bind:id="'smallConWin1'+(index)">{{item.Remark}}</div> <div class="smallconwin" style="display:none;" v-bind:id="'smallConWin2'+(index)">{{item.Remark}}</div> </div> </td> mouseopenFn:function (ind){ $("#smallConWin2"+ind).show(); $("#smallConWin1"+ind).hide(); }, mousecloseFn:function (ind) { $("#smallConWin1"+ind).show(); $("#smallConWin2"+ind).hide(); },
// 1.禁用右键菜单 document.oncontextmenu = new Function("event.returnValue=false"); // 2.禁用鼠标选中 document.onselectstart = new Function("event.returnValue=false"); document.onkeydown = () => { console.log(window.event.keyCode); for (let i = 9; i < 47; i++) { if (window.event && window.event.keyCode == i) { return false; } } for (let i = 58; i < 65; i++) { if (window.event && window.event.keyCode == i) { return false; } } for (let i = 91; i < 300; i++) { if (window.event && window.event.keyCode == i) { return false; } } // 禁用ctrl+shift+i if (window.event.ctrlKey && window.event.shiftKey && window.event.keyCode == 73) { return false; } if (window.event.shiftKey) { return false; } // 禁用ctrl+r if (window.event.ctrlKey && window.event.keyCode == 82) { return false; } }
document.addEventListener("keydown", function (e) {
console.log(e。key);
if (e.key == "F12") {
e.preventDefault(); // 如果按下键F12,阻止事件
}
});
//只给图片加
setTimeout(function(){
$.each(document.getElementsByTagName('img'),function(index,item){
item.oncontextmenu = new Function("event.returnValue=false");
})
},1000)
//遍历对象
let obj = {a:1,b:2,c:3}
Object.keys(obj).forEach(name=>{
console.log(name,obj[name])
})
浙公网安备 33010602011771号