javascript
文章平均质量分 91
Buddha_ITXiong
这个作者很懒,什么都没留下…
展开
-
javascript中的this到底是指什么(二)?
在我的上一篇博客中有写到javascript中this关键字方面的知识,我在里面提到过一句话:谁调用了我,我就是谁的对象。谁最后调用了我,我就是谁的对象。其实这个this指向的对象也是可以改变的,那怎样才能改变这个this指向的对象呢?相信接触过javacrript一段时间的朋友对call()方法以及apply()方法都不会陌生吧。接下来就一起来看看这两个方法的具体用法吧。1.apply(...原创 2018-03-15 11:47:20 · 381 阅读 · 1 评论 -
jquery判断网页到达顶部和底部
在网页应用中我们经常会遇到这样的需求当页面滑动到顶部的时候当页面滑动到底部的时候(滑动到底部加载更多数据)某个元素进入可视区范围的时候(图片懒加载)通常要实现这些判断的话就必须对网页中的各种高度有个清晰的了解,如页面可视高度,页面总内容高度以及页面滚动的高度等var scrollTop = $(this).scrollTop();//滚动条的高度,即页面滚动的高度var scrollHeigh...原创 2018-05-23 16:48:54 · 1627 阅读 · 0 评论 -
npm run eject后执行npm start报错
在用creata-react-app脚手架构建react项目的时候,发现默认配置是不支持sass和less预编译的,对于习惯less写法的我来说是万万不能接受的,于是就百度查找“create-react-app配置less”,然后得出解决办法就是执行npm run eject,作用就是把之前的默认配置全部暴露出来,因此可以自定义修改webpack的配置。如图:执行成功之后再次启动项目 npm st...原创 2018-05-24 10:53:43 · 3155 阅读 · 0 评论 -
react实现底部固定菜单栏
在项目中经常会碰到这种需求,底部固定的菜单栏目,本来是想直接用react-router-dom组件的navLink来实现的,因为navLink组件有个属性 activeClassName设置选中样式,默认值为active,通过这个直接给选中的当前页面添加一个选中的样式即可,但是因为我想在里面加入一个图标,这就涉及到图标也要切换了,捣鼓了一下也不知道怎么用navLink来实现,最后就只能自己来写了。...原创 2018-06-01 09:43:14 · 8689 阅读 · 0 评论 -
nodejs如何打断点调试程序
在node中打断点调试程序不像浏览器那样可直接在浏览器中某一行打断点,那么node该如何打断点调试程序呢?1.进入我们要执行的node文件 2.执行 node --inspect-brk index.js3.在谷歌浏览器中打开地址:chrome://inspect/#devices 显示页面如下4.点击上图中红框中的inspect按钮,进入程序调试界面:...原创 2018-07-10 17:23:40 · 9320 阅读 · 0 评论 -
百度地图如何创建窗口以及自定义标注
我想要实现的功能:点击地图上的标注即弹出窗口 步骤:1.模拟数据:即要标注的数据,其中type字段为,根据不同的type值展示不同的标注图let data = [ { title:'测试标题1', content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容", lat: "30.316369", lon: "...原创 2018-07-13 18:47:50 · 1033 阅读 · 0 评论 -
artTemplate辅助函数详细讲解
昨天奈何一个朋友一直问我artTemplate的辅助函数怎么用,和他说了一大堆也是懵逼,索性自己再写一个专门关于辅助函数的用法,希望可以帮得到其他有需要的朋友!!!先展示下整体代码,和效果图,之后我会以图片+文字的方式帮助理解:注意artTemplate.js和zepto.js根据自己的路径来改<!DOCTYPE html><html lang="en">&l...原创 2018-08-10 09:34:54 · 1439 阅读 · 0 评论 -
网页弹出遮罩层时页面向右偏移出现抖动问题
网页中经常会用到遮罩层的情况,在出现遮罩层的时候页面会整体向右偏移一段距离,因此会出现页面抖动,用户体验不好。首先我们要思考为什么会出现这种现象:1:写遮罩层的时候我们一般会给它设置fixed定位2:为了不让遮罩层下面的内容可滚动,我们一般会把body设置为overflow:hidden;当遮罩层出现的时候,会把浏览器默认的17px宽度的滚动条给隐藏掉,这时候页面就会向右偏移17p...原创 2019-04-01 15:19:09 · 1575 阅读 · 0 评论 -
javascript类数组转数组
1:什么是类数组简单的说--具有数组的length属性,但是不具备数组的方法,如shift,unshift,splice,slice,concat,reverse,sort,forEach等2:使用场景 1:函数内部arguments对象 2:获取的dom对象,如$('ul li')3:测试arguments test(10,20,30...原创 2019-04-22 18:16:44 · 705 阅读 · 0 评论 -
js实现文字墙效果
文字墙的原理就是对js随机函数的操作 Math.random().先看效果图:代码:引用了模板渲染插件artTemplate,想看效果的可以下载到本地替换我的路径或者引用cdn,artTemplate文档<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2019-04-24 18:22:41 · 1306 阅读 · 0 评论 -
jquery实现点击链接滚动到指定位置
效果图:点击左边导航,右边内容滚动到相对应区域代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{margi...原创 2019-04-29 14:58:22 · 739 阅读 · 0 评论 -
js判断chrome和360极速浏览器和360安全浏览器
在做项目的时候有用到判断不同浏览器的这个需求,然后就是按部就班的根据window.navigator对象里面的user-agent属性来判断,如果你以为就这么简单的话那就错来。以下是我自己遇到的几个坑,在此记录以下1.360浏览器在不同域名访问的情况下user-agent是不一样的,比如说在https://hao.360.com/这个域名下,展示为从其他域名访问如下:通过上面两...原创 2019-04-30 13:14:00 · 10331 阅读 · 2 评论 -
ios上面input输入框键盘弹起出现的一些问题
ios上面当用户点击输入框的时候软键盘弹出来会把页面内容向上顶起来,当收起键盘的时候,页面内容并没有回到之前的位置,这样会造成页面上的一些元素点击不到,因为位置发生了变化解决办法:在input绑定失去焦点事件 //处理移动端ios键盘收起页面位置不重置问题 handleBlur (){ window.scroll(0, 0); }...原创 2019-05-21 13:45:34 · 2201 阅读 · 1 评论 -
从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理
前言见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正。----------超长文+多图预警,需要花费不少时间。----------如果看完本文后,还对进程线程傻傻分不清,不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我,一定是我写的还不够清晰,我来改。。。----------正文开始----------最近发现有不少介绍JS单线...转载 2019-06-05 15:00:03 · 347 阅读 · 0 评论 -
style,script文件版本号处理
写代码的时候经常会遇到修改了样式文件和脚本文件后但是没有效果的问题,仔细查看页面dom结构的话会发现代码仍然是你修改之前的代码,这就是浏览器历史记录缓存的问题,碰到这种情况就必须强制刷新页面或者清除浏览器本地缓存。但是这样做是非常麻烦的,有时候要经常做这样的操作难免会感到繁琐。所以想着自己写哥函数来解决这个问题,当然你也可以用一些构建工具比如gulp之类的也是可以的。解决问题的主要思路就是...原创 2019-06-20 17:18:20 · 480 阅读 · 0 评论 -
javascript函数节流
应用场景实时输入检测:如根据用户输入文本来实时查询数据(判断注册用户名是否重复),邮箱格式检验页面滚动操作onscroll事件页面窗口大小改变onresize事件鼠标移入移出事件onmouseover,onmouseout作用对于以上高频率的执行操作来说如果不进行节流控制的话,一旦请求频繁会造成页面很卡甚至死机,函数节流可以大大的减少网页请求从而提高性能页面滚动事件不节流的效果:一次滚动执行了12...原创 2018-05-23 14:33:11 · 247 阅读 · 0 评论 -
js改变对象的属性名
var arr = [ { "courseName": "语文", "code": "english" }, { "courseName": "数学", "code": "ywhx" }];var a = JSON.stringify(arr).re原创 2018-05-25 14:47:30 · 4812 阅读 · 0 评论 -
用javascript实现用户头像上传并压缩demo
无聊写的一个用户头像上传的demo原理:把用户头像img标签和input选择文件标签重叠(大小相等,位置相同),通过设置input inzex的值把input覆盖在图片的上面并且透明度设置为0,即隐藏input;调用h5的fileReader接口拿到图片的base64地址用canvas实现图片压缩上传接口函数uploadImg为模拟的,根据自己项目自定义index.html:<!DOCT...原创 2018-05-11 15:52:29 · 2096 阅读 · 2 评论 -
js数组常用排序法
1. 冒泡排序(从后向前)var array = [1,4,-8,-3,6,12,9,8];function sort(arr){ for(var j=0;j<arr.length-1;j++){ //两两比较,如果前一个比后一个大,则交换位置。 for(var i=0;i<arr.length-1-j;i++){ if(a...原创 2018-03-15 13:55:40 · 338 阅读 · 0 评论 -
ajax知识总结
什么是ajax?1.ajax的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)2.ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。3.ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。关键...原创 2018-03-15 16:51:33 · 245 阅读 · 0 评论 -
javascript中的this到底是指什么(一)?
写js也有两年多了,在平时工作中也经常会用到this关键字,但是仅局限于用它,如果要求我讲明白this到底是什么的话可能就有点懵逼了,相信大家在面试的时候面试官也经常会问你this是神马东东,为了避免这种面试尴尬也是因为确实想把基础打扎实一点,所以就认认真真学了一遍。查阅了很大大神写的博客,标题都是类似于这种~~~"彻底弄懂js中的this关键字"等等等,我自认为自己写的这篇博客做不到那么牛逼的程......原创 2018-03-14 18:06:25 · 14172 阅读 · 22 评论 -
javascript闭包
要弄清楚javascript闭包这个知识点之前先看看变量的作用域,我们知道在js语法中,变量分为局部变量和全局变量。局部变量:在函数内部声明的变量,只能在该函数中才能被访问,函数执行完后即被释放 全局变量:在函数外面声明的变量,在任何地方都可以被访问到。如果在函数内部申明的变量没有用var定义的话,那么这个变量也是全局变量var userName="I am outer var";//全局变...原创 2018-03-13 15:24:35 · 206 阅读 · 0 评论 -
网页cookies
cookies是什么?cookies就是用户在浏览网页的时候,把用户输入的一些资料如用户名或密码什么的记录到浏览器里面,以便用户下次访问该页面的时候浏览器会直接返回该用户的信息给用户,可以理解为cookies就是记录用户在浏览器中的操作。cookies作用:1.可以在客户端上保存用户数据,起到简单的缓存和用户身份识别等作用。2.保存用户的登陆状态,用户进行登陆,成功登陆后,服务器生成特定的cook...原创 2018-03-13 10:28:46 · 685 阅读 · 0 评论 -
sessionStorage与localStorage用法详解
sessionStorage与localStorage二者都是H5新增的api用于本地存储sessionStorage:仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。localStorage:生命周期是永久,这意味着除非用户显示在浏览...原创 2018-03-15 23:27:18 · 481 阅读 · 0 评论 -
javascript原生DOM知识总结
DOM是什么?dom是Document Object Model的缩写,也就是文档对象模型的意思,它是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。上面对dom的解释比较官方不易理解,用我自己的话来解释的话:网页是由一系列的html组成,如果把每一个页面当成一棵树的话,那页面里面的html就是数的分支。同样把dom也当成一棵树的话,那么d...原创 2018-03-16 17:30:28 · 579 阅读 · 0 评论 -
js DOM事件流
1.事件就是用户或浏览器自身执行的某种动作。诸如click(点击)、load(加载)、mouseover(鼠标悬停)。2.事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。3.事件处理程序响应某个事件的函数就叫事件处理程序(或事件侦听器)。DOM0级事件处理程序下面例子中展示了dom0绑定事件的两种方法以及如何解绑事件,执行代码我们发现如果给同一元素同时绑定两个事件的话,则后...原创 2018-03-19 10:49:34 · 348 阅读 · 0 评论 -
artTemplate子模板和辅助函数详解
我们知道artTemplate是一个前端模板引擎,可以使我们告别字符串拼接渲染的麻烦。关于这个模板的优点和具体用法我就不一个个解释。我在这里只针对于其中的子模板和辅助函数并用实际代码例子来详细的解释一下。先看代码和效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2018-03-19 15:21:29 · 2293 阅读 · 0 评论 -
网页前端性能优化
加载优化(最耗时)减少 HTTP 请求:浏览器一般同时响应请求为4个请求(PC 一般为4个,Android 支持4个,IOS 5后可支持6个),所以尽量减少页面的请求数,首次加载同时请求数不能超过4个。(Webpack打包等)合并 CSS、 JavaScript;合并小图片、 使用 CSS sprite,base-64;缓存:使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服...转载 2018-03-22 10:19:06 · 281 阅读 · 0 评论 -
javascript垃圾回收机制与内存管理
一、垃圾回收机制—GCJavascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按照固定的时间...转载 2018-03-27 15:46:01 · 177 阅读 · 0 评论 -
javascript事件循环以及同步、异步
一. 单线程我们常说“JavaScript是单线程的”。所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。但是实际上还存在其他的线程。例如:处理AJAX请求的线程、处理DOM事件的线程、定时器线程、读写文件的线程(例如在Node.js中)等等。这些线程可能存在于JS引擎之内,也可能存在于JS引擎之外,在此我们不做区分。不妨叫它们工作线程。二. 同步和...转载 2018-03-29 17:27:19 · 254 阅读 · 0 评论 -
用jqrid插件写的一个demo
网上关于jqrid插件的用法和文档一大堆,在这里我就不提了,写这篇博客的主要目的就是记录一下自己在用jqrid作项目的过程中遇到的一些小问题拿出来给大家分享一下,当然大佬可以直接无视。。。。。要解决的问题:初次渲染表格数据与切换搜索条件更新表格数据表格字段中默认只显示text文本,如果想在某个td中显示图片或按钮(例如表格中最后一列一般会有操作按钮)该如何展示?某个td中要显示的内容不能直接使用后...原创 2018-05-04 14:05:11 · 463 阅读 · 0 评论 -
原生javascript分页
这是一个用原生js实现的分页插件,有兴趣的可以看看函数封装的思想,借鉴一下思维效果图:html:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>分页插件</title></head><s转载 2018-05-11 09:12:45 · 579 阅读 · 0 评论 -
关于在苹果浏览器中new Date()函数兼容性问题
直接上代码var currentTime = '2019-08-28 06:30:30';document.write('result:'+new Date(currentTime));在谷歌浏览器中效果:在苹果浏览器中效果再看一个具体点的代码效果 var currentTime = '2019-08-28 06:30:30'; //获取当...原创 2019-08-29 11:37:46 · 1008 阅读 · 1 评论