获取url中的参数,这个函数超级有用,好多项目中都用到的
function getParam(paramName){
paramValue ="";
isFound =false;
if (this.location.search.indexOf("?") ==0&&this.location.search.indexOf("=")>1){
arrSource = unescape(this.location.search).substring(1,this.location.search.length).split("&");
i =0;
while (i < arrSource.length &&!isFound){
if (arrSource[i].indexOf("=") >0){
if (arrSource[i].split("=")[0].toLowerCase()==paramName.toLowerCase()){
paramValue = arrSource[i].split("=")[1];
isFound =true;
}
}
i++;
}
}
return paramValue;
}
这个函数的修改版
function getParam(paramName,url){
paramValue ="";
isFound =false;
arrSource = unescape(url).substring(1,url.length).split("&");
i =0;
while (i < arrSource.length &&!isFound){
if (arrSource[i].indexOf("=") >0){
if (arrSource[i].split("=")[0].toLowerCase()==paramName.toLowerCase()){
paramValue = arrSource[i].split("=")[1];
isFound =true;
}
}
i++;
}
return paramValue;
}
这段代码就是表单提交时，点击提交的时候，跳到check_form（）方法去验证,check_form里面只要return true就是提交了，return false就是不提交
<form method="post" id="addEditBrandForm" onsubmit="return check_form();" action="index.php?route=seller/express/updata_fangan&user_token={{ user_token }}">
<这段代码才是真正的神码，我擦，直接在前端验证那个正则，这段正则的意思是，最大长度为10位数，键盘弹起来或者粘贴代码时 执行这段js代码，将input的值以空白去代替所有非数字的元素 [^xyz] 匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'、'l'、'i'、'n'
<input class="w400 text" type="text" value="{{fang_an.second_price}}" name="config_add_money" maxlength="10" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" id="config[add_money]">
这段代码就厉害啦，叼，获取当前这个元素的叫做td的父亲，然后获取他之前的第7个td，然后这个td的其中一个儿子input的值
var id=$(this).parent('td').prevAll('td').eq(7).children('input').val();
这段代码一般用作ajax，php会把数组当作json传送，jQuery.parseJSON就是把json格式的数组转为数组
var rid=jQuery.parseJSON(data)[0].id;
原来表单的提交，除了用ajax，也可以用这个的方式去提交
$('#form-menu-menu').submit();
返回上一页并且刷新，这段代码牛逼了
self.location=document.referrer;
一个联动方案，个人感觉非常厉害,真不愧是我写的
$('select[name=\'express\']').click(function(){
// var express_id = $(this).val();
$.ajax({
type:"post",
url:"index.php?route=seller/express/ajax_fangan&user_token={{ user_token }}",
data:{
'express_id':$(this).val(),
'store_id':$('input[name=\'store_id\']').val()
},
async:true,
success:function(data){
$('select[name=\'shipping_method\']').empty();
var result = jQuery.parseJSON(data);
console.log(result);
var strocity="";
for (var i = 0; i < result.length; i++) {
strocity += '<option value=' + result[i].id + '>';
strocity += result[i].name;
strocity += '</option>';
}
$('select[name=\'shipping_method\']').append(strocity);
}
});
})
一个简简单单的事件绑定，也可以忙一个下午，我真是醉了，我也是思考了好久才决定上网找的 关于jq绑定动态dom事件，本来用on是没事的，但是怎样尝试也不行，才发现on的正确用法其实是
$(document).on("keyup", ".input-sm", function () {})
就是这样动态绑定未来的dom
<关于在当前网页中弹窗，然后选中某个商品，再将这个商品返回到当前网页，这个涉及了，layer弹窗，函数调用等知识 这段代码适用于当前页面
// 添加商品
function selectGoods() {
var url = "./index.php?route=seller/indent_list/indent_product&user_token={{user_token}}";
layer.open({
type: 2,
title: '选择商品',
shadeClose: true,
shade: 0.8,
area: ['80%', '80%'],
content: url,
});
}
// 选择完商品回调的函数
function call_back(table_html) {
$('#goods_td').empty().html('<table id="goos_table" class="ncsc-default-table order">' + table_html + '</table>');
//过滤选择重复商品
$('input[name*="spec"]').each(function(i, o) {
if($(o).val()) {
//
var name=$(o).attr('rel');
$('input[name="' + name + '"]').parent().parent().remove();
//
}
});
layer.closeAll('iframe');
$('#goos_table thead tr td:nth-child(5)').remove();
$('#goos_table tbody tr td:nth-child(6)').remove();
}
上面这段代码，是用了layer的插件，做之前要先引入这个插件
用作回调函数的代码，其实真的是，一般是把当前页面的数据回调到父亲页面
javascript:window.parent.call_back($('#goos_table').html().replace(/库存/,'数量'));
回调到父亲页面的call_back函数中
这个是将字符串形式的数字强行转成数值型数字
parseInt(e1)+parseInt(e2);
将php输出的json数据，转化为数组
jQuery.parseJSON(data);
ajax提交整个表单
$('#yourformid').serialize()
<用jq去控制加载js文件，在某些情况下很好用
$.getScript( "./view/javascript/jscolor.js" );
图片上传，图片上传要配合ajax的FormData实用，这段代码是临时为上传的图片找一个地址，然后再前端显示出来，不用经过服务器
<input type='button' name='button' id='button1' value='选择上传' class='type-file-button require'>
<input name='pic[]' id='pic' type='file' class='type-file-file' accept='image/*' style='display: none;' value=''>
<script type="text/javascript">
$(document).on("click",'#button1',function(){
$("#pic").click();
$("#pic").on("change",function(){
var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
console.log(objUrl);
if (objUrl) {
$(".selected").find('img').attr("src",objUrl); //将图片路径存入src中，显示出图片
console.log($(".selected").find('img'));
}
});
})
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
<!--在图片上传的时候，由于上传多张的时候，change会执行多次，为了避免这种情况发生，可以在绑定chenge事件前-->
<!--先解绑，解绑之后再绑定，就是只会执行一次了-->
<!--图片上传ajax-->
$("#upload").off("change").on("change",function(){})
var data1 = new FormData($('#form1')[0]);
$.showPreloader("正在上传，请稍后");
$.ajax({
type:"post",
url:"",
async:true,
cache: false,
processData: false,
contentType: false,
data: data1,
success:function(data){
$.hidePreloader();
},
});
}
在js函数传值中， 由于字符串要加双引号，才能当成是字符串传值，如果不加双引号，js会默认当成是变量，所以一定要注意，在字符串拼接的时候，可以使用\这个符号，去指明这个双引号是用来标识字符串的
onclick='del(\""+product_arr[x].list[y].code+"\")'
<!--就像是这样-->
获取页面内dom元素的高度宽度，用做懒加载时
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度
包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度
<!--包括border padding margin -->
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度
<!--这里必须注意一个问题，就是页面中必-->
<!--须要有<!DOCTYPE html></html>，这个标签，没有这个标签就根本获取不了正确的高度和宽度，-->
关于懒加载，其实就是把图片的地址存在该图片的其他属性中，然后判断甘图片是否到了可视区域，到了就用js去把这个地址放回图片中的src中，就是懒加载的原理了
懒加载
<script type="text/javascript">
var lazy_img={
setImg:function(index){
if ($('img').eq(index+1).dataset) {
var src=$('img').eq(index+1).dataset.src;
} else{
var src=$('img').eq(index+1).attr("data-src");
}
$('img').eq(index+1).attr("src",src);
},
}
window.onscroll=function(){
var t = $(window).height()+$(window).scrollTop();
console.log(t);
$('img').each(function(index){
var h = $(this).offset().top;
if (h <= t) {
setTimeout("lazy_img.setImg("+index+")",100);
}
})
}
$(document).ready(function(){
window.onscroll();
})
</script>
关于鼠标点击图片放大查看
$(document).on("click",".ev-img img",function(){
var src=$(this).attr("data-src");
var json={
"title": "", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "图片名",
"pid": 666, //图片id
"src": src, //原图地址
"thumb":src //缩略图地址
}
]
}
layer.photos({
photos: json
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
})
调用了layer的插件，这个插件做弹层真的很好用，用json传入就可以了
input的属性，name查找
$("div[id]") 选择所有含有id属性的div元素
$("input[name='keleyicom']") 选择所有的name属性等于'keleyicom'的input元素
$("input[name!='keleyicom']") 选择所有的name属性不等于'keleyicom'的input元素
$("input[name^='keleyi']") 选择所有的name属性以'keleyi'开头的input元素
$("input[name$='keleyi']") 选择所有的name属性以'keleyi'结尾的input元素
$("input[name*='keleyi']") 选择所有的name属性包含'keleyi'的input元素
$("input[id][name$='keleyi']")
可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素
例如：
$(":input[name='keleyi']") 表示查找的是name为keleyi的表单。
这样查找就非常方便了，嘻嘻
一般用于checkbox的框，用于点击这个就全选或者全不选
onclick="$('input[name*=\'selected\']').prop('checked', this.checked);"
弹出js原生的确认框，就可以省去leyer的步骤了，而且这个非常有
onclick="confirm('{{ text_confirm }}') ? $('#form-voucher').submit() : false;"
这个用于验证输入框是否为空或者是否用空格
$("input[name='shipping_area_name']").val()==""||$("input[name='shipping_area_name']").val().indexOf(" ")>=0
这里出现精度不准确的原因是因为js的小数相乘bug，实用toFixed四舍五入，不同浏览器会有不同结果，不建议用
p_discount = parseFloat(discount)*0.1;
//乘法
function accMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
//加法
function accAdd(arg1,arg2){
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}
//减法
function Subtr(arg1,arg2){
var r1,r2,m,n;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2));
n=(r1>=r2)?r1:r2;
return ((arg1*m-arg2*m)/m).toFixed(n);
}
<!--正则验证，以及跳出each循环-->
var check={
check_email:function(){
var objRegExp=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
var val=true;/*先把value当是true*/
$('.email').each(function(){
if(!(objRegExp.test($(this).val()))){/*如果是false的话，就执行if的内容*/
val=objRegExp.test($(this).val());/*把false的值传给val*/
return false;/*跳出循环*/
}
})
return val;/*返回false值*/
},
}
<!--正则因为要验证过多的东西，所以用对象管理会更加好，直接在循环中return，是跳出当前循环而已，并不能做到
返回函数，在循环外部继续返回，false值或者true值-->
<!--根据页面滚动的高度去变化那个hover-->
$(window).scroll(function(){
var tj = [];
var strlength = $('.home-standard-layout').length;
console.log(strlength);
var stheigh = $('.home-standard-layout').eq(strlength-1).height();//最后一个楼层的高度
console.log(stheigh);
var scr = $(document).scrollTop();
console.log(scr);
scr=scr+300;
// 这个值是由每个分类的偏差做出的，很难准确
$('.home-standard-layout').each(function(i){
var sthei = $(this).offset().top;
tj.push(sthei);//楼层距离顶部的高度添加进数组
})
for(var n = 0;n < strlength;n++){
if(scr >= tj[n] && scr <= tj[n] + stheigh){
$(".floornav_left ul li").eq(n).addClass("darkshow").siblings().removeClass("darkshow");
}
}
});
<!--这样就很帅了啊，而且好好睇-->
<!--这个加载js插件，js脚本-->
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
// var bp1 = document.createElement('script'),bp2=document.createElement('script'),bp3=document.createElement('script');
// bp1.src = 'css_js_img/js/jquery.min.js';
// var s = document.getElementsByTagName("script")[0];
// s.parentNode.insertBefore(bp1, s);
// 加载滚动插件
// bp2.src ='css_js_img/js/jquery.waypoints.min.js';
// bp3.src ='css_js_img/js/jquery.countup.min.js';
// s.parentNode.insertBefore(bp2, s);
// s.parentNode.insertBefore(bp3, s);
//
// bp1.onload=function(){
// }//js加载完成执行方法
后台传过来时间戳，最好的转化方法
function dealTime(val){/*修正时间格式*/
let date = new Date(val);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
let Y = date.getFullYear() + '-';
let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
let D = date.getDate() + ' ';
let h = date.getHours() + ':';
let m = date.getMinutes() + ':';
let s = date.getSeconds();
return Y+M+D+h+m+s;
}
最好的验证身份证方法
export const testCode=(idCard)=>{/*加权因子验证身份证*/
let 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"){
return true;
}else{
return false;
}
}else{
//用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
if(idCardLast==idCardY[idCardMod]){
return true;
}else{
return false;
}
}
}
}else{
return false;
}
}
============================================================= 销毁js变量
js变量分为两种，一种是全局变量，一种是局部变量。 全局变量，在js文件的任意地方都可以使用，它的生命周期就是js文件使用的周期。 局部变量，它在所属的方法，或者说是它在自己属于的对象里面才存在，这个对象或者方法被解析过了，它就自动没有了。 所以如果你要销毁变量，如果是全局变量，那么你需要覆盖它，如果是局部变量你只要等待它所在的方法结束，它就自动销毁了。 将变量赋值为undefined 如果是个对象的属性，可以使用delete删除某对象属性或者方法
==================================================== 字符串转数组，数组转字符串
String.split() 执行的操作与 Array.join 执行的操作是相反的。
很简单易懂吧，
======================================================
关于动态增加对象属性，和动态定义变量名
做项目的时候遇到需要批量生成变量名的地方，如下：
var myChart = "myChart" + index;
myChart.setOption(option);
index为函数参数； 但是myChart的值只是一个字符串，并不是变量名！
搜索了一些资料得出解决方法：
var myChart = eval("myChart" + index);
myChart.setOption(option);
eval()函数可以实现将字符串计算为变量名。
js是一个动态的语言，js也有对象，而这个对象就是一堆的键值对 key:value
而我们要是要给对象添加新的属性的时候只需要
obj.newKey=value;
就好了
但是如果我们不知道呢，我们不知道我们要加入的属性是什么属性名呢，这个属性名是可以变的呢
这个时候我们可以
用
var a="newKey";
obj[a]=value;
这个样子进行增加就好了
var b="v3";
a[b]=200;//只有这种方法可以变量传入
而我们获得变量，就是很简单的事情了
================================ 刷新本页
window.location.reload();
<!--这个方法最好用-->
====================
判断对象中是否有某属性的常见方式总结，不同的场景要使用不同的方式。
一、点( . )或者方括号( [ ] )
通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回undefined。当然，这里的“不存在”指的是对象自身和原型链上都不存在，如果原型链有该属性，则会返回原型链上的属性值。
// 创建对象
let test = {name : 'lei'}
// 获取对象的自身的属性
test.name //"lei"
test["name"] //"lei"
// 获取不存在的属性
test.age //undefined
// 获取原型上的属性
test["toString"] //toString() { [native code] }
// 新增一个值为undefined的属性
test.un = undefined
test.un //undefined 不能用在属性值存在，但可能为 undefined的场景
所以，我们可以根据 Obj.x !== undefined 的返回值 来判断Obj是否有x属性。
这种方式很简单方便，局限性就是：不能用在x的属性值存在，但可能为 undefined的场景。 in运算符可以解决这个问题
二、 in 运算符
MDN 上对in运算符的介绍：如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。
'name' in test //true
'un' in test //true
'toString' in test //true
'age' in test //false
示例中可以看出，值为undefined的属性也可正常判断。
这种方式的局限性就是无法区分自身和原型链上的属性，在只需要判断自身属性是否存在时，这种方式就不适用了。这时需要hasOwnProperty()
三、hasOwnProperty()
test.hasOwnProperty('name') //true 自身属性
test.hasOwnProperty('age') //false 不存在
test.hasOwnProperty('toString') //false 原型链上属性
可以看到，只有自身存在该属性时，才会返回true。适用于只判断自身属性的场景。
总结
三种方式各有优缺点，不同的场景使用不同的方式，有时还需要结合使用，比如遍历自身属性的时候，就会把 for ··· in ···和 hasOwnProperty()结合使用。
===============================================================================================================================
解决不同分辨率样式问题，设置长度或者高度时或者大小时，用rem，在html中定义font-size就行了
<script type="text/javascript" >
/*网页字跟随页面自动变化*/
function setRem(){
/*获取当前页面的宽度*/
var width = document.body.offsetWidth;
/*设置页面的字体大小*/
var nowFont=width/375*20;
/*通过标签名称来获取元素*/
var htmlFont=document.getElementsByTagName('html')[0];
// 给获取到的元素的字体大小赋值
htmlFont.style.fontSize =nowFont+"px";
}
setRem();
window.onresize=setRem; //监听屏幕变化
---------------------
作者：王小傻、QAQ
来源：CSDN
原文：https://blog.csdn.net/godsor/article/details/83115750
版权声明：本文为博主原创文章，转载请附上博文链接！
