
JavaScript
文章平均质量分 58
主要是记录js,JavaScript,JQuery等笔记
Mr.菓菓
这个作者很懒,什么都没留下…
展开
-
分享几个拖拽组件
一款强大且兼容性极好的拖拽排序库, 兼容「IE7+」, 并且支持 「vanilla JavaScript / Angular / React」等框架.原创 2024-06-25 21:04:37 · 1456 阅读 · 0 评论 -
js中用来获取图片的实际尺寸的naturalWidth和 naturalHeight使用记录
是 HTMLImageElement 对象的属性,用于获取或设置图像的原始尺寸。这些属性在处理图像时非常有用,尤其是在需要知道图像的物理尺寸而不仅仅是在页面上呈现的尺寸时。属性,你可以更准确地处理图像数据,尤其是在需要知道图像的物理尺寸时,这些属性提供了重要的信息。原创 2024-04-22 17:12:32 · 1264 阅读 · 0 评论 -
页面引入PDF文件
文件,但是在没有装插件的Google浏览器中却无法浏览,这个时候我们就需要用到google的插件来解析,可以使用下边的方法进行引入,前提是可以访问Google网站。我们在做项目的时候有时候会遇到这样得需求,在页面中插入一个。上边的代码是引入google的插件,然后进行解析。格式的文档,在比较主流的浏览器中,我们可以使用。上边的代码可以在你安装了。解析插件的浏览器中嵌入。原创 2022-10-11 21:27:11 · 1016 阅读 · 0 评论 -
js 保留数字固定小数位进行截取
截取指定位数小数原创 2022-07-07 00:42:40 · 1262 阅读 · 0 评论 -
h5中的页面显示隐藏执行事件
h5中类似小程序的onShow和onHide方法原创 2022-06-30 08:15:46 · 1318 阅读 · 0 评论 -
js中的跨域解决方案
说到跨域我们需要先了一些概念同源策略定义:同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。而浏览器也是建立在这样的同源策略基础上的它是浏览器最核心最主要的功能之一。同源定义:两个url地址如果 协议、主机、端口号三个都完全相同就属于同源,就可以正常的进行数据的交互给定一个地址:http://www.localhost:8080/abc/index.html,下列列出与之同源和非同源的例子原创 2022-04-02 03:09:35 · 497 阅读 · 0 评论 -
js异步加载
问题分析在开发网站页面的时候经常会加载js文件,但是我们在加载js的时候会遇到js非常大或者执行事件长的情况下会出现页面短时间内白屏的现象。这是因为web页面是按照顺序执行的然后代码一边下载浏览器一边处理,当遇到标签浏览器会先停下来去加载相应的css文件,然后加载出来,遇到<script></script>标签会看有没有src属性,如果有就下载相应的js文件然后执行js,等js执行完毕后在继续向下执行。在这种顺序执行的情况下就会出现第一段话我们说的问题。解决方案:我们可以把原创 2022-03-25 00:44:00 · 1046 阅读 · 0 评论 -
js算法学习——选择排序
选择排序也是一种比较经典而且简单的排序方法,他主要的原理是从数组中一遍一遍的找最小的值,然后把最小的值放到最前边的方式来进行排序。类似的,我们也可以把js中数组的元素进行排序,先取出第一个数,然后在把第一个数挨个和剩余的数进行比较。代码:function selectSort(arr){ // 先定义两个遍历, // minIndex 用来存储最小的数值的下标 // temp用来存储临时数据做交换用 let minIndex, temp; // 记录数组长度 let len =原创 2022-03-17 23:03:24 · 625 阅读 · 0 评论 -
for..in 和 for..of区别
首先for…in和for…of都是用来迭代一些东西,但是他们在迭代数据的时候有很大的不同for…infor…in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性,包括继承的可枚举属性。// 数组var arr = [10, 20, 30, 40, 50];Array.prototype.myArray = function(){};arr.youArray = 'youSome';// 对象var obj = {a: 10, b: 20, c: 30, d: 40};Objec原创 2022-03-06 02:06:12 · 240 阅读 · 0 评论 -
关于h5页面手机访问获取用户地理位置的功能——Geolocation位置API
Geolocation是由H5提供的新的获取用户使用的设备的地理位置的API,它可以让访问者在访问当前页面的时候,经过用户同意获取访问者当前的地理坐标位置。此属性只能在网站为https的协议下运行他提供了三个有效的方法,geolocation属于navigator对象下的一个子对象,所以调用的时候需要通过navigator来进行调用。getCurrentPosition()确定设备的地理位置并且返回一个携带地理位置信息的Position对象,语法:navigator.geolocation.get原创 2022-03-03 00:55:15 · 4059 阅读 · 0 评论 -
ES6的模块导入和导出
js在之前的版本中是不支持模块的概念的,一般我们在开发中为了我们的的项目能够多人协作开发,并且每个人定义的变量不会被他人所覆盖,我们会通过一些方式进行控制把我们的代码写到一个自执行的函数中,然后在函数中定义我们的变量名和方法名,然后我们把这些方法和变量存到一个对象中,最后通过一个对象名把它挂载到window对象上,供外界使用。这种情况虽然解决了大部分的命名冲突问题,但是还会有冲突的出现,他也没有真正的实现模块化。后来一些js社区出现了一些模块化的解决方案,require.js、sea.jsES.原创 2022-03-01 23:42:37 · 1617 阅读 · 1 评论 -
JavaScript中数组的学习总结
js中数组的重新学习原创 2022-01-22 00:32:43 · 1192 阅读 · 1 评论 -
记录getBoundingClientRect和getClientRects
getBoundingClientRect()DOM元素的一个方法,用来返回Element元素的css盒模型的所有信息,并返回一个DOMRect对象,对象内包括元素的大小、位置等。语法element.getBoundingClientRect()返回值{ bottom: 118, //元素底部距离窗口顶部距离(等于y + height) height: 110, // 元素的高度值 left: 8, // 元素左侧距离窗口左侧的距离 right: 599.015625, // 元素右侧原创 2022-01-17 13:13:33 · 860 阅读 · 0 评论 -
js生成的随机数的方法
js生成随数原创 2021-12-23 17:53:59 · 7223 阅读 · 0 评论 -
将一维数组转换成树形结构数组方法总结
我们在开发中经常会处理数组,特别是后端传给我们的扁平化数组,然后将它处理为多维结构的数组将扁平化数组转换成树形结构数组的n中方法原始数据var arr = [ { id: 1, pid: 0, text: '一级1' }, { id: 2, pid: 0, text: '一级2' }, { id: 3, pid: 1, text: '二级1-1' }, { id: 4, pid: 1, text: '二级1-2' } { id: 5, pid: 2, text: '二级2-1'.原创 2021-12-13 08:15:40 · 2481 阅读 · 0 评论 -
防抖函数,和节流函数
防抖函数的定义通过延迟执行的方式,降低某种执行特别频繁事件造成的浏览器性能问题或者是过多请求服务器行为;一个需要频繁触发的函数需要在规定时间内,只让最后一次生效,前面的不生效使用场景防抖函数一般用在onScroll,onResize,onmousemove等操作很频繁的事件第一种:// 当用户输入文字后请求后端接口返回数据/** 基础代码*/// 获取dom元素var inputEle = document.getElementById('inputEle');// 定义一个原创 2021-11-07 16:27:12 · 301 阅读 · 0 评论 -
call, apply, bind的区别和用法
call, apply, bind的用法三个方法都是用来改变方法执行的this的执行的,示例如下:var name = 'qwguo', age = 30;var obj = { name: 'qiweiguo', objAge: this.age, myFun: function(fm, t){ console.log(arguments); console.log(this.name + ',年龄:'+ this.age, '来自:'原创 2021-11-07 00:06:59 · 103 阅读 · 0 评论 -
自己总结的数组去重的方法
在开发中我们经常需要给数组进行去重操作,这里我总结了一些数组去重的方法:首先准备代码中用到的去重原数组var obj = {a: 10, b: 20};var arr = [1,1, 0, 0,'true','true',true,true,15,15,false,false, 'false','false', undefined, undefined, 'undefined', 'undefined', null,null, NaN, NaN,'NaN', 'a', 'a',{},{},obj,ob原创 2021-11-06 23:13:18 · 144 阅读 · 0 评论 -
将类数组转换成数组的方法
类数组的概念:类数组是指:和“数组”类似,并且在写法上跟数组一样,可以按照数组的方式访问每个类数组的元素,但是不能直接使用数组方法。比如arguments,函数的第一个参数是argument[0],写法上跟数组一样,但是不是数组,他的原型是Object,获取dom元素的集合合适类数组。操作类数组的方式// 获取类数组中的元素function abc(){ for(var x = 0; x < arguments.length; x++){ console.log(arguments[x]原创 2021-10-23 18:27:44 · 1425 阅读 · 0 评论 -
通过给定一个url地址字符串获取host,honame,主域等信息
我们在日常开发中经常需要通过一个字符串URL来获取其中的域名,主域等信息。这里介绍一个比较简单的获取方式。var getLocation = function(url){ if(url){ let aDom = document.createElement('a'); aDom.href = url; let j = { hostname: aDom.hostname, host: aDom.host, origin: aDo.原创 2020-08-11 01:19:33 · 4272 阅读 · 0 评论 -
瀑布流布局实现的多种方法
瀑布流源于国外的一家图片分享网站Pinterest,该网站是通过看上去多列布局的方式展示图片,并且每一列高度有内容多少来决定形成列中的项高度不统一形成的层次不齐的砌墙效果。瀑布流布局实现的多种方法瀑布流布局看上去属于多列布局的一种,每列宽度相等但是高度不固定,从而形成的类似于砌墙效果。基础布局介绍多列瀑布流布局通过创建相同宽度的多个列然后通过计算哪一列最低然后给列中添加元素来实现。代码:<div class="falls-1" id="falls_1"> <d.原创 2020-07-04 00:28:46 · 665 阅读 · 1 评论 -
web图片裁切插件 cropper.js 详细介绍
cropper.js一个用来处理图片的插件,可以使用它来实现图片的各种模式下的裁切效果,当我们在做一个上传头像或者上传图片功能的时候,需要用户裁切出用户想要的图片位置就可以利用这个插件来实现’,'cropper.js支持移动设备的图片剪裁。它基于HTML5 canvas,可以通过Base64编码导出剪裁后的图片。图片剪裁插件Image Cropper使用方法cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设.原创 2020-06-16 20:18:53 · 4610 阅读 · 0 评论 -
浏览器控制台调试之——console输出语法使用
以前我们在调试代码的时候常用alert方法输出代码,这个方法不能输出详细内容,而且会阻止后面的代码执行,非常不利于我们调试。console用于在控制台输出内容,他的出现可以让我们在开发过程中调试代码变得方便,而且console也为我们提供了很多的方法,有些再调试过程中非常实用,可以节省很多时间。console使用我们在开发过程中经常会用到浏览器的控制台工具,来打印一些信息便于我们开发和调试,console对象为我们提供了很多的方法,能够使我们美化格式化打印的信息,对我们调试有所帮助。con.原创 2020-05-29 19:35:56 · 18555 阅读 · 0 评论 -
JavaScript中FontFace对象的使用
JavaScript中FontFace对象的使用FontFace字面理解就是字体脸,也就是文字字体样式的意思,它是通过使用javascript来定义字体对象,并且引入客户端没有安装得字体文件,可以是者服务器端,或者是第三方字体库文件介绍基本语法:concat fontFace = new FontFace('fontFamily', 'url(fontUrl) | ArrayBuffer', descriptors);参数说名:fontFamily:字符串,自定义的要应用到页面或者元素原创 2020-05-26 16:36:09 · 5771 阅读 · 3 评论