jQuery,jQuery系列使用问题

js合并两个数组生成合并后的key：value数组方法

2020-04-23 jquery

js合并两个数组生成合并后的key：value数组方法// var activeSubjectsName = ["JAVA", "PHP", "Android", "IOS", "Python"];// var activeSubjectsNum = [46, 2, 2, 28, 29];// var activeSubjectsArr = [];for (var i = 0; i < activeSubjectsName.length; i++) { console.log(i); var activeSubjectsObject = {}; for (var j = 0; j < activeSubjectsNum.length; j++) { if (i == j) { activeSubjectsObject.name = activeSubjectsName[i]; activeSubjectsObject.value = activeSubjectsNum[j]; activeSubjectsArr.push(activeSubjectsObject); } }}console.log(activeSubjectsArr);// activeSubjectsArr=[// {name: "JAVA", value: 46},// {name: "PHP", value: 2},// {name: "Android", value: 2},// {name: "IOS", value: 28},// {name: "Python", value: 29}// ]

前端使用JsBarcode生成条形码

2020-03-21 jquery

383 0

前端使用JsBarcode生成条形码注：需引入 jsbarcode 插件JsBarcode安装:npminstalljsbarcode--save npminstalljsbarcodeHTML 生成条形码代码 $("#svgcode").JsBarcode('我是条形码'); 最终生成的条形码OptionDefault valueTypeformat（选择要使用的条形码类型）"auto" (CODE128)Stringwidth（设置条之间的宽度）2Numberheight（高度）100NumberdisplayValue（是否在条形码下方显示文字）trueBooleantext （覆盖显示的文本）undefinedStringfontOptions（使文字加粗体或变斜体）""Stringfont（设置文本的字体）"monospace"StringtextAlign（设置文本的水平对齐方式）"center"StringtextPosition（设置文本的垂直位置）"bottom"StringtextMargin（设置条形码和文本之间的间距）2NumberfontSize（设置文本的大小）20Numberbackground（设置条形码的背景）"#ffffff"String (CSS color)lineColor（设置条和文本的颜色）"#000000"String (CSS color)margin（设置条形码周围的空白边距）10NumbermarginTop（设置条形码上方的空白边距）undefinedNumbermarginBottom（设置条形码下方的空白边距）undefinedNumbermarginLeft（设置条形码左边的空白边距undefinedNumbermarginRight（设置条形码右边的空白边距）undefinedNumberflatfalseBooleanvalidfunction(valid){}Funct

JavaScript 获取当前网页header头部信息

2020-03-16 jquery

498 0

JavaScript 获取当前网页header头部信息varreq=newXMLHttpRequest(); req.open('GET',document.location,false); req.send(null); varheaders=req.getAllResponseHeaders().toLowerCase(); console.log(headers);

JS动态获取图片分辨率宽高大小

2020-03-07 jquery

521 0

JS动态获取图片分辨率宽高大小 functiongetpic(url,obj){ varimg=newImage(); img.src=url; if(img.complete){ document.write(img.width+'x'+img.height); $('.ddkkkkk_'+obj).text(img.width+'x'+img.height); }else{ img.onload=function(){ //document.write(img.width+'x'+img.height); $('.ddkkkkk_'+obj).text(img.width+'x'+img.height); img.onload=null; }; }; } getpic("{{$item->vod_pic}}","{{$item->id}}")

jquery数组去重

2020-01-02 jquery

431 0

vararr=["1","2","3","2","4","3"]; varres=unique(arr); console.log(res); //数组去重 functionunique(arr){ vararr2=arr.sort(); varres=[arr2[0]]; for(vari=1;i

sessionStorage的使用

2019-11-03 jquery

609 0

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。使用案例：html code: 关闭 javascript code：//判断sessionStorage里有没有isClose if(sessionStorage.getItem("isClose")){ $(".modecer").hide(); }else{ $(".modecer").show(); } //点击关闭隐藏存取数据 $(".colsebtn").click(function(){ $(".modecer").fadeOut(300); sessionStorage.setItem("isClose","1"); })

radio，CheckBox选中状态，判断是否选中，根据值设置radio选中

2019-10-24 jquery

799 0

radio，CheckBox选中状态，判断是否选中，根据值设置radio选中显示隐藏varstop=data.result $(":radio[name='rbsex'][value='"+stop+"']").prop("checked","checked");radio，CheckBox选中状态，判断是否选中，可以在元素中添加checked属性或者添加checked="checked" 都可以让某个选项默认选中，单选框的如果有多个checked 会以最后一个为准。我们可以使用 $("name='subject']:eq(0)").prop("checked");来判断有没有被真正的选中。返回布尔值$("[name='subject']:eq(0)").prop("checked",false[true]);设置选中或否定1、对radio 、checkbox 来说说，checked属性可以保证页面初始化被选中，但是通过js或者jquery 控制checked属性并不能保证相应的被选中，同样也不能通过checked属性来判断该元素是否被选中。2、checked属性并不能影响form表单的值，表单页面真正被选中的元素才是form表单提交的值。3、通jquery的prop方法可以完美的选中或者取消选中元素，使用prop("checked",true) 选中，prop("checked",false)取消选中，通prop("checked") 返回的false或者true判断是否选中。

JS实现Base64加密解密

2019-10-23 jquery

662 0

JavaScript实现Base64加密解密。Base64与其说是加密算法不如说是方便数据传输而生的数据转换手段。测试代码： test .resource_enc,.resource_dec{ width:500px; } .p1,.p2{ min-height:100px; background-color:#dcffe1; } varbase=newBase64(); functionencoding(){ vartext=document.getElementsByClassName("resource_enc")[0].value; document.getElementsByClassName("p1")[0].innerText=base.encode(text); } functiondecoding(){ vartext=document.getElementsByClassName("resource_dec")[0].value; document.getElementsByClassName("p2")[0].innerText=base.decode(text); } Base64.jsfunctionBase64(){ var_keyStr="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; this.encode=function(input){ varoutput=""; varchr1,chr2,chr3,enc1,enc2,enc3,enc4; vari=0; input=utf8Encode(input); while(i>2; enc2=((chr1&3)4); enc3=((chr2&15)6); enc4=chr3&63; if(isNaN(chr2)){ enc3=enc4=64; }elseif(isNaN(chr3)){ enc4=64; } output=output+ _keyStr.charAt(enc1)+_keyStr.charAt(enc2)+ _keyStr.charAt(enc3)+_keyStr.charAt(enc4); } returnoutput; }; this.decode=function(input){ varoutput=""; varchr1,chr2,chr3; varenc1,enc2,enc3,enc4; vari=0; input=input.replace(/[^A-Za-z0-9\+\/\=]/g,""); while(i>6)&63)|128); utfText+=String.fromCharCode((c&63)|128); } } returnutfText; }; utf8Decode=function(utfText){ varstring=""; vari=0; varc=0; varc1=0; varc2=0; while(i

jQuery实现购物车物品数量的加减

2019-10-09 jquery

535 0

实现购物车物品数量的加减，最小值为1，当最小值为1时再按减少，减少按钮不可编辑，当按增加数量时恢复减少按钮状态。这个除了加减功能外，也可以自动计算价格。 jQuery实现购物车物品数量的加减 $(function(){ vart=$("#quantity"); $("#add").click(function(){ t.val(parseInt(t.val())+1); $("#min").removeAttr("disabled");//当按加1时，解除$("#min")不可读状态 setTotal(); }) $("#min").click(function(){ if(parseInt(t.val())>1){//判断数量值大于1时才可以减少 t.val(parseInt(t.val())-1) }else{ $("#min").attr("disabled","disabled")//当$("#min")为1时，$("#min")不可读状态 } setTotal(); }) functionsetTotal(){ $("#total").html((parseInt(t.val())*3.95).toFixed(2)); } setTotal(); }) 单价：1.23 总价：

jQuery根据屏幕下拉到一定高度显示返回顶部按钮

2019-09-30 jquery

569 0

jQuery根据屏幕下拉到一定高度显示返回顶部按钮例子：$(function(){ $('.getop').hide(); $(window).scroll(function(){ if($(window).scrollTop()>900){ $('.getop').fadeIn(300); } else{$('.getop').fadeOut(200);} }); $('.getop').click(function(){ $('body,html').animate({scrollTop:0},900); returnfalse; }) })

jquery 实现类似淘宝换一换功能

2019-08-29 jquery

662 0

类似淘宝换一换功能在工作中我们经常会遇到，以下是一个简单的案例，仅供大家参考。实现效果图：实现代码：换一换 *{margin:0;padding:0px;} .hsow{width:400px;height:400px;margin:0auto;background-color:#fff;} .news-sub{width:400px;height:266px;float:left;position:relative;} .news-list-v{width:400px;height:266px;position:absolute;left:0px;top:0px;visibility:hidden;opacity:0;transition:0s0.2s;} .news-list-vli{list-style:none;width:133px;height:133px;float:left;text-align:center;} .news-list-vlia{color:#fff;list-style:none;font-size:50px;text-decoration:none;margin:0auto;line-height:133px} .news-list-vli:nth-of-type(odd){background-color:#55cbc4;} .news-list-vli:nth-of-type(even){background-color:#f45a8d;} .news-change{width:133px;height:133px;background-color:#f04124;color:#fff;font-size:34px;text-align:center;line-height:133px;cursor:pointer;display:inline-block;float:left;margin-left:133px;} .news-list-v.show{z-index:1;visibility:visible;opacity:1;transition:0.2s;} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 换一换 //换一换 var$newsLists=$('.news-sub').find('.news-list-v'); functionchangeNews(){ var$currentNews=$newsLists.filter('.show'); var$nextNews=$currentNews.next(); if($nextNews.length===0){ $nextNews=$newsLists.eq(0); } $newsLists.removeClass('show'); $nextNews.addClass('show'); } $('.news-change').on('click',function(){ changeNews(); });

jquery.cookie.js实现记住手机号功能

2019-06-16 jquery

925 0

记住账号或者密码，在很多网站上都可以看到，以下是一个简单的方法，用到的是 jquery.cookie.js ，供大家参考注意：cookie必须在线上才能起效的哦。附件下载地址：jquery.cookie.txt百度云盘下载地址：链接：https://pan.baidu.com/s/14h5EsL3Z4U3bGSssbByEjA提取码：9rzahtml代码：//引入jquery.cookie.js 电话* 自动输入历史手机号《个人信息授权书》登录逻辑代码： functionsumit(){ vartelkel=$('.telkel').val(); //SetCookie if(document.getElementById("remnuber").checked==true){//判断是否勾选 $.cookie('telkel',telkel); }else{ $.cookie("telkel","",{expires:-1}); } } $(function(){ varusername=$.cookie('telkel'); console.log(username) //将获取的值填充入输入框中 $('.telkel').val(username); if($('.telkel').val()!=null&&$('.telkel').val()!=''){//选中保存秘密的复选框 $("#remnuber").attr('checked',true); } })

JS判断页面加载是否完成

2019-06-13 jquery

618 0

在做页面的时候,经常碰到要在页面加载完全之后再去展现。JS判断页面加载是否完成document.onreadystatechange=function(){ 　　if(document.readyState=="complete"){ window.location="https://www.tpxhm.com/" 　} }

js随机数组，随机显示3个不重复数字

2019-01-18 jquery

1019 0

js随机数组，随机显示3个不重复数字案例： Document //原数组 vararr=[0,1,2,3,4,5,6,7,8,9,10,11]; //输出数组 varout=[]; //输出个数 varnum=3; while(out.length>0; out.push(arr.splice(temp,1)); } alert(out);

js滑动指定特效

2019-01-10 jquery

694 0

我们逛网页的时候有时会看到，鼠标滚动到指定位置就会加载动画，以下是一个方法，仅供大家参考。主要用了2个文件，jquery.waypoints.js和animate.min.css附件：jquery.waypoints.js.txtanimate.min.css.txt引入两个文件，在前面加上以下js，还有在每个版块加上class="column"$(function(){ reAnimate(); }) //滑动指定特效 functionreAnimate(){ var_ele=$(".column"); _ele.each(function(index,element){ vareleAnimate=$(element).find(".animated"); eleAnimate.css({"animation-name":"none","-webkit-animation":"none"});//移除全部动效 $(element).waypoint(function(direction){ if(direction=="up"){ eleAnimate.css({"animation-name":"none","-webkit-animation":"none"}); }else{ eleAnimate.css({"animation-name":"","-webkit-animation":""}); } },{ offset:"70%" }); }); }

jquery验证手机号码、邮箱格式是否正确示例代码

2017-05-02 jquery

2285 0

jquery验证手机号码、邮箱格式是否正确示例代码本文为大家介绍下使用jquery验证邮箱、验证手机号码，具体实现思路及代码如下，感兴趣的朋友可以学习下代码如下://jquery验证邮箱 functioncheckSubmitEmail(){ if($("#email").val()==""){ //$("#confirmMsg").html("邮箱地址不能为空！"); alert("邮箱不能为空!") $("#email").focus(); returnfalse; } if(!$("#email").val().match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)){ alert("邮箱格式不正确"); //$("#confirmMsg").html("邮箱格式不正确！请重新输入！"); $("#email").focus(); returnfalse; } returntrue; } //jquery验证手机号码 functioncheckSubmitMobil(){ if($("#mobile").val()==""){ alert("手机号码不能为空！"); //$("#moileMsg").html("手机号码不能为空！"); $("#mobile").focus(); returnfalse; } if(!$("#mobile").val().match(/^(((13[0-9]{1})|159|153)+\d{8})$/)){ alert("手机号码格式不正确！"); //$("#moileMsg").html("手机号码格式不正确！请重新输入！"); $("#mobile").focus(); returnfalse; } returntrue; }

利用JavaScript实现图片上传预览

2017-05-08 jquery

598 0

html代码：头像添加重置 js代码： //下面用于图片上传预览功能 functionsetImagePreview(avalue){ //input vardocObj=document.getElementById("doc"); //img varimgObjPreview=document.getElementById("preview"); //div vardivs=document.getElementById("localImag"); if(docObj.files&&docObj.files[0]){ //火狐下，直接设img属性 imgObjPreview.style.display='block'; imgObjPreview.style.width='100px'; imgObjPreview.style.height='100px'; //imgObjPreview.src=docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式 imgObjPreview.src=window.URL.createObjectURL(docObj.files[0]); }else{ //IE下，使用滤镜 docObj.select(); varimgSrc=document.selection.createRange().text; varlocalImagId=document.getElementById("localImag"); //必须设置初始大小 localImagId.style.width="100px"; localImagId.style.height="100px"; //图片异常的捕捉，防止用户修改后缀来伪造图片 try{ localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=imgSrc; }catch(e){ alert("您上传的图片格式不正确，请重新选择!"); returnfalse; } imgObjPreview.style.display='none'; document.selection.empty(); } returntrue; } 效果预览：

js生成随机数

2017-06-08 jquery

658 0

js随机数的几个用法varchars=['0','1','2','3','4','5','6','7','8','9','A','B','C', 'D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; functiongenerateMixed(n){ varres=""; for(vari=0;i

js获取系统当前时间

2017-07-02 jquery

689 0

一、简洁版1. varoDate=newDate();//实例一个时间对象； oDate.getFullYear();//获取系统的年； oDate.getMonth()+1;//获取系统月份，由于月份是从0开始计算，所以要加1 oDate.getDate();//获取系统日， oDate.getHours();//获取系统时， oDate.getMinutes();//分 oDate.getSeconds();//秒 2.document.write(oDate);效果图：二、动态显示时间1、 functionshowTime(){ varnow=newDate(); varnowTime=now.toLocaleString(); vardate=nowTime.substring(0,10);//截取日期 vartime=nowTime.substring(10,20);//截取时间 varweek=now.getDay();//星期 varhour=now.getHours();//小时 //判断星期几 varweeks=["日","一","二","三","四","五","六"]; vargetWeek="星期"+weeks[week]; varsc; //判断是AMorPM if(hour>=0&&hour5&&hour7&&hour11&&hour13&&hour18&&hour

JS判断客户端是手机还是PC

2017-09-05 jquery

611 0

Javascript 判断客户端是否为 PC 还是手持设备，有时候项目中需要用到，很方便的检测，原生的，下面是js判断代码： varsUserAgent=navigator.userAgent.toLowerCase(); varbIsIpad=sUserAgent.match(/ipad/i)=="ipad"; varbIsIphoneOs=sUserAgent.match(/iphoneos/i)=="iphoneos"; varbIsMidp=sUserAgent.match(/midp/i)=="midp"; varbIsUc7=sUserAgent.match(/rv:1.2.3.4/i)=="rv:1.2.3.4"; varbIsUc=sUserAgent.match(/ucweb/i)=="ucweb"; varbIsAndroid=sUserAgent.match(/android/i)=="android"; varbIsCE=sUserAgent.match(/windowsce/i)=="windowsce"; varbIsWM=sUserAgent.match(/windowsmobile/i)=="windowsmobile"; if(!(bIsIpad||bIsIphoneOs||bIsMidp||bIsUc7||bIsUc||bIsAndroid||bIsCE||bIsWM)){ window.location.href="pc页面"; }

js实现导航菜单高亮

2018-01-29 jquery

596 0

js实现导航菜单高亮 Document *{padding:0px;margin:0px;text-decoration:none;list-style:none;} #navi{width:1200px;height:50px;float:left;} #naviul{width:1200px;height:50px;float:left;} #naviulli{width:600px;height:50px;float:left;text-align:center;} #naviullia{font-size:30px;color:#000;line-height:50px;} .hl{ color:#123456; background:red; } 主页栏目1 varnav=document.getElementById("navi"); varlinks=nav.getElementsByTagName("li"); varlilen=nav.getElementsByTagName("a"); varcurrenturl=document.location.href; varlast=0; for(vari=0;i

本地存储封装接口store.js的使用教程

2018-10-25 jquery

771 0

store.js是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash来实现。它提供非常了简洁的 API 来实现跨浏览器的本地存储功能。store.js的使用store.js的基本API有：store.set(key,val)//存储key的值为val； store.get(key)//获取key的值； store.remove(key)//移除key的记录； store.clear()//清空存储； store.getAll()//返回所有存储； store.forEach()//遍历所有存储。使用store.js提供的方法，需要先引入store.js插件:附件：store.txtset单个存储字符格式：store.set(key, data[, overwrite]);store.set('name','mavis');//存储name的值为 mavisstore.set('name','angel');//将name的值存储为angelget获取存入的key值格式：store.get(key[, alt])store.set('name','mavis'); store.set('name','angel'); store.get('name');//angel

js合并两个数组生成合并后的key：value数组方法

前端使用JsBarcode生成条形码

JavaScript 获取当前网页header头部信息

JS动态获取图片分辨率宽高大小

jquery数组去重

sessionStorage的使用

radio，CheckBox选中状态，判断是否选中，根据值设置radio选中

JS实现Base64加密解密

jQuery实现购物车物品数量的加减

jQuery根据屏幕下拉到一定高度显示返回顶部按钮

jquery 实现类似淘宝换一换功能

jquery.cookie.js实现记住手机号功能

JS判断页面加载是否完成

js随机数组，随机显示3个不重复数字

js滑动指定特效

jquery验证手机号码、邮箱格式是否正确示例代码

利用JavaScript实现图片上传预览

js生成随机数

js获取系统当前时间

JS判断客户端是手机还是PC

js实现导航菜单高亮

本地存储封装接口store.js的使用教程

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

js合并两个数组生成合并后的key：value数组方法

前端使用JsBarcode生成条形码

JavaScript 获取当前网页header头部信息

JS动态获取图片分辨率宽高大小

jquery数组去重

sessionStorage的使用

radio，CheckBox选中状态，判断是否选中，根据值设置radio选中

JS实现Base64加密解密

jQuery实现购物车物品数量的加减

jQuery根据屏幕下拉到一定高度显示返回顶部按钮

jquery 实现类似淘宝换一换功能

jquery.cookie.js实现记住手机号功能

JS判断页面加载是否完成

js随机数组，随机显示3个不重复数字

js滑动指定特效

jquery验证手机号码、邮箱格式是否正确示例代码

利用JavaScript实现图片上传预览

js生成随机数

js获取系统当前时间

JS判断客户端是手机还是PC

js实现导航菜单高亮

本地存储封装接口store.js的使用教程

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录