javascript / jQuery
麦兜_冰夕
这个作者很懒,什么都没留下…
展开
-
Ant design for Vue的table的行合并、列合并、行列合并的代码实现
Ant design for Vue的table的行合并、列合并、行列合并的核心代码实现原创 2022-08-03 15:33:19 · 1262 阅读 · 0 评论 -
实现点击空白处关闭弹窗
思路:给空白处元素绑定id,给父元素绑定点击时间,判断用户所点击的id为绑定id,则设置弹窗影藏。代码如下原创 2021-08-19 10:41:56 · 893 阅读 · 0 评论 -
2021-03-16
pc端web页面开发时,发现windows系统经常推荐用户使用125%、150%比例的缩放窗口,这样导致web页面被进行缩放,除此之外还有人为的按钮缩放。故此,在页面devicePixelRatio(设备像素比例)变化后,通过计算页面body标签zoom修改其大小,来抵消devicePixelRatio带来的变化。解决所用devicePixelRatio.js/** * @author lyn * @date 2021-03-16 * @description 校正windows页面在系统原创 2021-03-16 10:51:19 · 113 阅读 · 0 评论 -
前端实现下载表格数据
1.html部分table id为“grid-log”,导出按钮id为“exportbtn”,表格数据为bootgrid插件渲染而成 <table id="grid-log" class="table table-condensed table-hover table-striped table-responsive" data-store-selection="true"> <thead> .原创 2020-07-28 17:41:06 · 1484 阅读 · 1 评论 -
常用正则表达式集合
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下。给自己留个底,也给朋友们做个参考。一、校验数字的表达式1. 数字:^[0-9]*$2. n位的数字:^\d{n}$3. 至少n位的数字:^\d{n,}$4. m-n位的数字:^\d{m,n}$5. 零和非...原创 2020-03-17 14:10:28 · 462 阅读 · 0 评论 -
js 函数传参实参包含路径“\”处理
var test = "D:\blockchain\webapps\uxdm\WEB-INF\classes\com"; //包含路径的实参var param = test.replace(/\\/g,'\\\\'); /...原创 2019-12-20 10:28:27 · 672 阅读 · 0 评论 -
javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法
javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法前言在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝。如下图演示: 如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不是我们所需要的结果。 因此,数组以及对象的深拷贝就是javascript的一个基本功了。数组的深拷贝条条大道通罗马,实现数组的深拷贝,是有好几种方法的。举例如...原创 2018-07-27 14:10:59 · 199 阅读 · 0 评论 -
js对象的深复制与浅复制
浅复制(浅拷贝)是将原始对象中的数据型字段拷贝到新对象中去,将引用型字段的“引用”复制到新对象中去,不把“引用的对象”复制进去,所以原始对象和新对象引用同一对象,新对象中的引用型字段发生变化会导致原始对象中的对应字段也发生变化。深复制(深拷贝)是在引用方面不同,深拷贝就是创建一个新的和原始字段的内容相同的字段,是两个一样大的数据段,所以两者的引用是不同的,之后的新对象中的引用型字段发生改变,不...原创 2018-07-16 17:17:59 · 143 阅读 · 0 评论 -
深入理解ES6箭头函数中的this
简要介绍:箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。1、何为定义时绑定我们来看下面这个例子:(1)var x=11;var obj={ x:22, say:function(){ console.log(this.x) }}obj.say()...转载 2018-06-27 11:24:34 · 166 阅读 · 0 评论 -
JS构造函数
1.创建对象2.定义JS构造函数3.使用构造函数的作用4.注意1.创建对象在JavaScript中,创建对象的方式包括两种:对象字面量和使用new表达式。对象字面量是一种灵活方便的书写方式,例如:?123456var o1 = { p:”I’m in Object literal”, alertP:function(){ alert(this.p); }}这样,就用对象字面量创建了一个对象o1,它...原创 2018-05-08 14:43:29 · 395 阅读 · 0 评论 -
js实现文件上传,node实现文件上传,html实现文件上传,jquery.form实现文件上传
前端html及JS代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="./jquery-1.12.0.min.js"></scr原创 2018-05-11 16:14:22 · 423 阅读 · 0 评论 -
js获取一周、一个月之前的日期,js日期转毫秒,毫秒转日期
1.js日期转毫秒,毫秒转日期【1】js毫秒时间转换成日期时间var oldTime = (new Date("2012/12/25 20:11:11")).getTime(); //得到毫秒数不是上面格式的时间需要转换starttime ='2012-12-25 20:17:24'; starttime = starttime.replace(new RegExp("-","gm...原创 2018-08-25 15:35:37 · 4151 阅读 · 0 评论 -
js判断浏览器
/判断火狐、谷歌、IE浏览器function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判断是否Firefox浏览器 if (...原创 2018-09-04 17:40:28 · 171 阅读 · 0 评论 -
js实现日期格式化以及获取一周前格式化后的日期
直接上代码,如下:function dateFormat(Date,fmt) { var o = { "M+": Date.getMonth() + 1, //月份 "d+": Date.getDate(), //日 "H+": Date.getHours(), //小时 "m+": Date.getMinutes(), //分 ...原创 2018-09-10 17:39:25 · 1456 阅读 · 0 评论 -
js对象数组(JSON) 根据某个共同字段 分组
希望的是将下面的对象数组:[ {"id":"1","groupname":"值1","value":"11"}, {"id":"2","groupname":"值1","value":"22"}, {"id":&qu原创 2019-01-19 10:11:38 · 5992 阅读 · 0 评论 -
JS数组对象去重
var allData = [ {key:1,value:2}, {key:2,value:3}, {key:1,value:2}, {key:1,value:3} ]; var result = []; var obj = {}; for(var h =0; h<allData.length; h++){ i...原创 2019-01-24 19:07:52 · 477 阅读 · 0 评论 -
JS数组去重,删除对象属性
1.数组去重var arr = ['apple','strawberry','banana','pear','apple','orange','orange','strawberry']; var r = arr.filter(function(element,index,self){ return self.indexOf(element) === index; }); co...原创 2019-01-22 11:01:15 · 1225 阅读 · 0 评论 -
Js 数组——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()
filter(): 语法: varfilteredArray = array.filter(callback[, thisObject]); 参数说明:callback:要对每个数组元素执行的回调函数。thisObject :在执行回调函数时定义的this对象。//过滤掉小于 10 的数组元素://代码:function isBigEno...转载 2019-03-26 16:10:00 · 170 阅读 · 0 评论 -
冒泡与捕获,事件绑定,阻止事件冒泡,阻止默认行为
Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄。对于事件绑定兼容写法,如下:var x = document.getElementById("myBtn");if (x.addEventLi...原创 2018-05-02 16:17:15 · 253 阅读 · 0 评论 -
event对象兼容性,获取事件委托对象
在IE中,event对象为window的属性,作用于全局作用域,而在Firefox中,event对象是最为事件的参数存在的。为兼容不同浏览器,采用如下写法:var btn = document.getElementById('btn'); btn.onclick = function(e){ var e = window.event || e; }对于event的部分属性,比...原创 2018-05-02 15:41:01 · 436 阅读 · 0 评论 -
js中几种实用的跨域方法原理详解
js中几种实用的跨域方法原理详解这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题,我们可以使用以下几种方法:一...转载 2018-05-02 10:19:50 · 107 阅读 · 0 评论 -
JS实现幂运算 x的平方
Math.pow(x,y) // x的y次幂 x——底数,y——幂数 x,y必须为数字eg:Math.pow(2,3) 表示2的三次方 结果为8原创 2017-10-26 09:58:38 · 56291 阅读 · 0 评论 -
JSON取值(key是中文或者数字)方式详解
先准备一个json对象用于演示var json = {'name':'zhangsan', '年龄':23, 404:'你可能迷路了'};使用JS中with关键字with(json) { console.log(name);//输出:zhangsan console.log(年龄);//输出:23 console.log(404);//输出:404,用这种方法读取key是数...转载 2017-10-27 17:37:32 · 4830 阅读 · 0 评论 -
JS性能优化之文档碎片创建
1.何为文档碎片通俗易懂解释文档碎片:我们每次去超市买东西,都是用袋子一次性把所有东西运回来,而不可能选择每次只拿一样东西。而当我们用JS DOM向页面插入元素的时候,每插入一个元素,页面就会渲染一次,但当我们要插入过多元素的时候,页面渲染的次数会使得DOM的操作性能降低。而在这个过程中,文档碎片就类似于一个我们买东西的袋子,我们每次创建好一个元素的时候,不直接插入页面中,而是插入文档碎片里,最...原创 2017-11-22 18:42:57 · 1045 阅读 · 0 评论 -
跳出for循环,break和continue的区别
1.break:跳出当前循环体,也称结束当前循环体2.continue:跳出此次循环,继续执行下一次循环<script type="text/javascript"> var newRoleData = [2,1]; var oldRoleData = [2,3]; for(var k = 0; k<newRoleData.length; k++) { ...原创 2017-11-28 15:07:24 · 215730 阅读 · 0 评论 -
正则表达式连续匹配多个字符
原字符串为 'aaa&bbb&ccc%dd%_',需要分别对应替换 '&'——>'\&';'%'——> '\%';'_'——>'\_'<script type="text/javascript"> var str1 = 'aaa&bbb&ccc%dd%_'; var regArr = [ { ..原创 2017-12-01 16:38:50 · 20110 阅读 · 0 评论 -
JSON与Javascript对象的区别
json定义 :是一种格式,用于数据交换。Javascript 对象定义 : 一种javascript的引用类型区别对比内容JSONJavascript 对象键名必须是加双引号可允许加单引号,双引号,也可以不加属性值只能是数值(10进制) ,字符串(双引号),布尔值和null,也可以是数组,符合JSON的对象,不能是函数,NaN,Infinity,-Infinity和undefinedjavasc...原创 2017-12-06 17:09:58 · 577 阅读 · 0 评论 -
jQuery插件开发及jQuery.extend函数详解和jQuery.fn与jQuery.prototype区别
一、jQuery插件开发分为两种: 首先需要声明的是原生javascript中是没有extend这个属性和方法的,只有prototype原形链,extend是jQuery中的方法。1.类级别:类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法。开发扩展其方法时使用$.extend方法,即jQuery.extend(object);$.extend({add:...原创 2017-12-14 10:58:08 · 946 阅读 · 0 评论 -
JQuery创建文档碎片
(1)文档碎片可以提高DOM的操作性能。比如要插入一万个li标签,如果没有文档碎片,就必须插入一个然后页面渲染一次,插入完全部就要渲染一万次,太损耗性能。利用文档碎片,可以先把需要修改的全部放入文档碎片中,再一次渲染,且会减少页面无用标签的多层嵌套;(2)文档碎片原理: document.createDocumentFragment()...原创 2018-01-12 11:13:34 · 1019 阅读 · 0 评论 -
JS循环遍历对象,获取key:value
let obj = { 'a':'aa', 'b':'bb', 'c':'cc', 'd':'dd' };for(let i in obj){ console.log(i); //a b c d console.log(obj[i]); // aa bb cc dd}原创 2018-01-18 11:01:16 · 69931 阅读 · 0 评论 -
事件捕获和事件冒泡、事件委托
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时...原创 2018-01-23 18:11:46 · 224 阅读 · 0 评论 -
js只保留整数,向上取整,四舍五入,向下取整等函数
1.丢弃小数部分,保留整数部分 parseInt(5/2)2.向上取整,有小数就整数部分加1Math.ceil(5/2)3,四舍五入.Math.round(5/2)4,向下取整Math.floor(5/2)Math 对象的方法方法描述abs(x)返回数的绝对值acos(x)返回数的反余弦值asin(x)返回数的反正弦值atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正...转载 2018-02-08 10:09:03 · 513 阅读 · 0 评论 -
鼠标滚轮事件 mousewheel/DOMMouseScroll
1.Jquery-MouseWheel jquery默认是不支持支持鼠标滚轮事件(mousewheel) jquery MouseWheel下载:https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js 然后就可以使用mousewheel和unmousewheel事件函数了 1 $('div.m...原创 2018-03-16 14:57:34 · 2349 阅读 · 0 评论 -
JS数组查重、数组对象求差集
var uuidArr = ["bbb","vvv","aaa","fff","fff"],flag = true; var arr1 = [ {"rolename":"aaa"}, {"rolename":"bbb"}, {"rolename":&quo原创 2018-03-23 11:11:56 · 4746 阅读 · 0 评论 -
浏览器渲染机制与JS文件引入顺序
基于结构、行为、样式分离的思想,大多数网站开发者将css、js文件由外部引入。众所周知,浏览器的渲染机制是自上而下的,如下图所示:1、 首先当用户输入一个URL的时候,浏览器就会发送一个请求,请求URL对应的资源。2、 然后浏览器的HTML解析器会将这个文件解析,并且构建成一棵DOM树。3、 在构建DOM树的时候,遇到JS和CSS元素,HTML解析器就换将控制权转让给JS解析器或者是CSS解...原创 2018-04-03 15:33:12 · 1298 阅读 · 0 评论 -
ES6的数组解构赋值浏览器兼容问题
let [arr1,arr2,arr3] = [[1,2,3],["a","b","g","f"],[{"name":"John"},{"name":"Ally"}]];在IE 11 中会报错,IE 11不支持数组的解构赋值火狐、谷歌支持原创 2018-04-12 16:57:10 · 2807 阅读 · 0 评论 -
location.ancestorOrigins Firefox 和 IE 下的替代用法
window.location的ancestorOrigins属性原创 2018-04-12 17:50:53 · 2297 阅读 · 1 评论 -
鼠标滚轮事件兼容性及鼠标滚轮事件案例
鼠标滚轮事件在火狐、IE、谷歌浏览器的兼容性如下 chrome & IE: 滚轮事件:mousewheel 后滚: d3.event.wheelDelta = -120(或者120的整数倍) d3.event.detail = 0 前滚: d3.event.wheelDelta =...原创 2018-04-23 17:22:04 · 1236 阅读 · 0 评论 -
js 匿名函数自调用
//第一种方法 (function (argument) { console.log(argument) })("有参匿名函数自调用"); //第二种方法 (function () { console.log("无参匿名函数自调用方法一") }()); //第三种方法 !function () { console.log("有参...原创 2017-10-20 10:58:38 · 1690 阅读 · 1 评论