JavaScript学习随笔
文章平均质量分 80
霜月枫桥
Web前端软件工程师
展开
-
JS中数组的复制和类数组转换为数组的方法
一、数组的复制1、使用concat()var arr1=[1,2,3];var arr2=arr1.concat();arr2.push(4);console.log('arr1的值为:'+arr1);console.log('arr2的值为:'+arr2);效果图如下所示2、使用slice()var arr1=[1,2,3];var arr2=arr1.slice();arr2.pu...原创 2018-05-16 11:17:22 · 659 阅读 · 0 评论 -
js控制HTML元素自身属性的使用
HTML元素有许多自身的属性,例如disabled、readonly、required、selected……这些属性我们可以直接在HTML元素中设置也可以使用js设置HTML的自带属性。js设置HTML自带属性,使用removeAttr()和attr()方法设置HTML元素的属性。其中,attr()可以同时设置多个值,而removeAttr()则同时只能设置一个值。attr()设置原创 2017-01-16 13:51:51 · 1944 阅读 · 0 评论 -
JavaScript中的setAttribute用法
我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。1、样式问题setAttribute(class, value)中class是指改转载 2017-09-08 14:00:25 · 3276 阅读 · 0 评论 -
函数节流(throttle)与函数去抖(debounce)
一、前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。 1. window对象的resize、scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mousedown、keydown事件 4. 文字输入、转载 2017-08-29 17:52:38 · 492 阅读 · 0 评论 -
30分钟掌握ES6/ES2015核心内容(上)
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了...转载 2017-08-28 16:30:03 · 326 阅读 · 0 评论 -
前台HTML页面显示XML内容
应用场景:在网站开发过程中,读取XML格式文件,并将其所有内容都显示到页面上,即显示标签内容,又显示标签本身。备注:本博客场景还适应于读取显示含有标签的数据库存储字段。解决方法:解决方法一共有四种(可能还有别的方法,但我只知道四种,欢迎大家补充),分别如下:第一种,使用将你要显示的内容包含在标签中,便可以将标签显示在页面上。JS代码: var str原创 2017-07-26 17:49:59 · 24881 阅读 · 0 评论 -
jquery $(document).ready() 与window.onload的区别
jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载转载 2017-08-09 16:50:55 · 319 阅读 · 0 评论 -
onmusewheel事件(兼容IE,FF,opera,safari,chrome)
相信用户在浏览Google Map 时,都注意到向上或向下滚动鼠标可以使地图放大或缩小。其实,对于鼠标滚动我们并不陌生。但要给一个元素绑定鼠标滚动事件,我们有必要对该事件有一个详尽的了解。浏览器对该事件支持情况如何?IE6, Opera9+, Safari2+以及Firefox1+均支持“onmousewheel”事件,在FF 3.x中,与之相当的是“DOMMouseScroll”事件。“转载 2017-08-08 15:17:21 · 973 阅读 · 0 评论 -
JavaScript常见的内存泄漏原因
JavaScript 的垃圾收集机制javascript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中的使用的内存。而在C和C++之类的语言中,开发人员的一项基本任务就是手动跟踪内存的使用情况,这是造成许多问题的一个根源。在编写javascript程序时候,开发人员不用再关心内存使用的问题,所需内存的分配 以及无用的回收完全实现了自动管理。JavaScri转载 2017-05-19 18:42:37 · 673 阅读 · 0 评论 -
Javascript中eval()函数的使用方法与示例
JavaScript有许多小窍门来使编程更加容易。其中之一就是eval()函数,这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。语法 eval(string) 参数 描述 string 必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的转载 2017-05-19 18:42:16 · 4458 阅读 · 0 评论 -
深入理解JavaScript中的立即执行函数(function(){……})()
前言:这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见,需要的朋友可以参考下立即执行函数表达式IIFE作用:IIFE最常用的功能显然是隔离作用域。ES6之前JS原生又不提供块级作用域,所以只能用函数作用域模拟了。还有种常用就转载 2017-05-18 18:41:40 · 568 阅读 · 0 评论 -
ES6之块级作用域
一、前言在ECMAScript6(以下简称ES6)之前,ECMAScript的作用域只有两种: 1、 全局作用域; 2、 函数作用域。正是因为有这两种作用域,所以在JavaScript中出现一术语--“变量提升(hoisting)”。如下:function func(){ console.log(test); va转载 2017-05-18 18:41:23 · 567 阅读 · 0 评论 -
prototype属性简介
prototype为对象原型的意思,在JS中配置对象的prototype属性,可以减少js内存空间的占用,提高js的性能。使用示例:function Animal(name){ this.name=name;}Animal.prototype.style=['毛色','几条腿'];Animal.prototype.age=1;Animal.prototype.show=funct原创 2017-05-16 18:54:22 · 744 阅读 · 0 评论 -
ECMASript标准及JavaScript的关系
ECMAScript是一种标准或者说一种规范,而JavaScript只是理论概念上的一个合集,而不是指具体的某种语言。各浏览器公司以ECMAScript标准为基础,并作出了一些拓展,从而完成了各自浏览器的JavaScript,如JScript、ActionScript等。Web 浏览器中的 DOM 已经用 ECMAScript 实现了,所以相应的JavaScript也实现了DOM。原创 2016-03-23 15:12:12 · 1256 阅读 · 0 评论 -
js常用知识总结02
1、window自带的两种方法,可以在指定的毫秒数后调用函数或计算表达式第一种:window.setTimeout(code,millisec); //在规定的时间加载一次第二种:window.setInterval(code,millisec); // 每隔一段时间加载一次这里的code指的可以使方法,也可以是具体的js代码,但是需要写在" " 中,这里的millisec指的是原创 2016-11-11 15:23:07 · 670 阅读 · 0 评论 -
JS事件addEventListener、on、元素属性事件触发的先后顺序
三种事件触发方法都存在时示例代码如下:<div id="div1" onclick="ma()"> </div> <script> var oDiv1=document.getElementById("div1"); oDiv1.addEventListener("click",function(){ console.log(&quo原创 2018-04-27 16:11:40 · 6052 阅读 · 0 评论 -
JS对象的继承
继承 需要在某一个对象或者类的基础上,保留原有内容的同时,扩展出一些新东西一、对象的继承1、一个JSON对象,属性值只有JSON、数组、数字、字符串,没有函数。可以使用JSON.parse 和 JSON.stringify搭配实现对象的继承。var zhangsan={ x:10, y:20, z:30}var lisi=JSON.parse(JSON.stringify(zhangsa...原创 2018-05-11 10:38:41 · 440 阅读 · 0 评论 -
前端模块化,AMD与CMD的区别
最近在研究cmd和amd,在网上看到一篇不错的文章,整理下看看。 在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScri...转载 2018-03-08 16:46:40 · 260 阅读 · 0 评论 -
JS获取随机颜色(3种方法)
一共三种方法,代码如下: /*---------------------------- 方法一 -------------------------*/ var colorArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']; function random(min,max){ if(i原创 2018-01-10 14:17:39 · 15967 阅读 · 1 评论 -
JS禁止用户对页面文档进行操作
常用方法如下:禁止鼠标右键:oncontextmenu="return false";禁止选择:onselectstart="return false";禁止拖放:ondragstart="return false";禁止拷贝:oncopy=document.selection.empty() 。禁止复制:oncopy = "return false";禁止保存:,放在he转载 2018-01-25 14:44:18 · 2168 阅读 · 0 评论 -
HTML5之postMessage和addEventListener实现<iframe>跨域通信
使用postMessage实现跨域的前提条件是一个页面通过调用另一个页面,示例如下所示:在这个示例中,通过outter.html调用inner.html这是outter.htmlfunction outmethod(){var value=document.getElementById("outtext").value;document.getElementById("if原创 2016-11-16 09:37:28 · 3663 阅读 · 1 评论 -
window.history/navigator和消息框的使用
Window Historyhistory.back() 方法加载历史列表中的前一个 URL。这与在浏览器中点击后退按钮是相同的。history forward() 方法加载历史列表中的下一个 URL。这与在浏览器中点击前进按钮是相同的。window.navigator 对象包含有关访问者浏览器的信息。警告:来自 navigator 对象的信息具有误导性,不应该被用于检测浏原创 2016-11-14 10:11:47 · 801 阅读 · 0 评论 -
通过js或jQuery,<iframe>子父窗口之间元素、方法、window的相互获取
1、js在子窗口获取父窗口的windowwindow.parent//此时可以调用父窗口的window方法,比如获取父窗口的高度window.parent.innerHeight,宽度window.parent.innerWidth,移动父窗口的位置等,具体的可以看本人博客的《获取浏览器窗口的尺寸及对浏览器窗口的一些操作》篇。2、js在父窗口获取子窗口的window$("#原创 2016-11-11 17:55:56 · 27747 阅读 · 0 评论 -
JS原型链图
原型链构析对于每个对象,其自身创建成功后都有一个属性——__proto__,该属性表示一种关系,指向该对象构造器的原型,下面代码表示出 var demo=new Person("name",age); 的生成过程。var demo={};demo.__proto__=Person.prototype;Person.call(demo,"name",age);对于构造器 fu原创 2017-11-28 15:28:14 · 486 阅读 · 0 评论 -
js中数组Array和字符串String的属性方法归纳总结
1、数组创建: new Array(5)-->创建有5个元素的数组; new Array()-->创建空数组; new Array("a","b","b")-->创建有3个元素,分别为abc的数组; []-->创建空数组; ["a","b","b"]-->创建有3个元素,分别为abc的数组;2、数组的方法:转载 2016-11-11 10:44:36 · 2320 阅读 · 0 评论 -
Cookie/Session机制详解
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份。本章将系统地讲述Cookie与Session机制,并比较说明什么时候不能用Cookie,什么时候不能用Session。1.1 Cookie机制转载 2016-08-26 11:27:32 · 603 阅读 · 0 评论 -
js和jQuery获取浏览器窗口的高度、宽度的方法详解
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度对于 Internet Explorer 8、7、6、5:docume原创 2016-11-11 17:57:36 · 7764 阅读 · 0 评论 -
js用==比较两个相等的字符串时,报错
问题描述:今天我在js中比较两个两个字符串时,发现明明值相等的两个变量,在if else语句中,却不进入if中,而是去else中运行。代码如下:var checkedLanguage=$("#checked-language").text(); if(' en_US '==checkedLanguage){ $("span#checked-en").css('display','in原创 2016-11-28 11:00:25 · 6709 阅读 · 0 评论 -
js数据类型判断和数组判断
js六大数据类型:number、string、Boolean、null、undefined(以上五个为原始类型)、object(数据类型)string: 由单引号或双引号来说明,如"string"number:什么整数啊浮点数啊都叫数字,你懂的~Boolean: 就是true和false啦undefined:未定义。此关键字属于js中的常量,其它五种类型都是对象。转载 2017-04-01 15:12:09 · 823 阅读 · 0 评论 -
DATA URL简介及DATA URL利弊
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。1. Data URL基本原理图片在网页中的使用方法通常是下面这种利用i转载 2017-05-18 18:41:04 · 1940 阅读 · 0 评论 -
CommonJS及AMD模块化编程
模块化编程规范有 CommonJS、AMD(这两者常用)以及 ES Harmony(理想化规范)目的:1、高度解耦一些代码块,提高代码的复用性2、减少JS全局命名变量的冲突,避免污染全局命名空间。一、CommonJS 同步模块加载API定义很多普通应用程序(主要指非浏览器的应用)使用的API,从而填补了这个空白。它的终极目标是提供一个类似Python,Ruby和Java原创 2017-05-19 18:44:28 · 570 阅读 · 0 评论 -
JavaScript中,二分法递归示例
问题描述:对于JavaScript中的数组,采用二分法,递归的获取指定值的下标。代码: 数组查找某一数字 请输入0~9之间任一数字 结果为:无 var arr9=[0,1,2,3,4,5,6,7,8,9]; $(function(){ $(".but9").click(function(){原创 2017-03-21 15:02:05 · 952 阅读 · 0 评论 -
Array.prototype.slice.call(arguments)用法详解
我们知道,Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,除了IE下的节点集合(因为ie下的dom对象是以com对象的形式实现的,js对象与com对象不能进行转换)如:1 var a={length:2,0:'first',1:'second'};2 Array.prototype.slice.call(a);转载 2017-04-01 15:12:14 · 1419 阅读 · 0 评论 -
ECMAScript 6 扫盲
ECMAScript 6 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。本文译自 Github 上的一篇文章,目的是对还不太熟悉 ES6 语法的同学做一个简单的扫盲。1. let、const 和 block 作用域let转载 2017-03-30 17:55:15 · 656 阅读 · 0 评论 -
JS中document对象和window对象的区别
简单来说,document是window的一个对象属性。Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于Window 对象的属性和方法。document 对 Document 对象的只读引用。[windo转载 2017-03-30 16:56:39 · 1770 阅读 · 0 评论 -
javascript encodeURI和encodeURIComponent的比较
在进行SaaS前端开发的时候,大家经常会用到两个JavaScriptNative函数:encodeURI 和 encodeURIComponent。这篇文章详细解释这两个函数的用途并比较它们的不同之处背景 encodeURI 和 encodeURIComponent都是ECMA-262标准中定义的函数,所有兼容这个标准的语言(如JavaScript, ActionScript)都会实现转载 2017-03-20 10:27:02 · 387 阅读 · 0 评论 -
window.location属性的应用
1、window.location.href 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。location.hostname 返回 web 主机的域名location.pathname 返回当前页面的路径和文件名location.port 返回 web 主机的端口 (80 或 443)location.protocol 返回所使用的 web 协议(http://原创 2016-11-14 09:59:16 · 2029 阅读 · 0 评论 -
JavaScript代码性能优化总结
下面是我总结的一些小技巧,仅供参考。以下代码基本上在jQuery的源码里面都可以看到,如有说得不对的地方,请大家指出。尽量使用源生方法javaScript是解释性语言,相比编译性语言执行速度要慢。浏览器已经实现的方法,就不要再去实现一遍了。另外,浏览器已经实现的方法在算法方面已经做了很多优化。避免全局查找在一个函数中会用到全局对象存储为局部变量来减少全局查找转载 2017-03-09 11:16:04 · 389 阅读 · 0 评论 -
ajax属性详解
jquery中的ajax方法参数总是记不住,这里记录一下。 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。2.type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。3.timeout: 要求为Number类型的转载 2016-09-01 19:41:08 · 9681 阅读 · 1 评论 -
div的垂直滚动条自动滚到最下面
文章原地址:http://www.cnblogs.com/fuyun2000/archive/2012/03/28/2420530.html在聊天窗口中当消息增多超过消息窗体DIV的高度时就会出现滚动条,但此时滚动条在绝大多数浏览器中都始终位于DIV的顶部,这样就会导致之后的消息看不见,必须往下拖动滚动条才能看到新的消息,如果做到当出现滚动条时,滚动条始终位于DIV的底部呢?方式一转载 2016-05-17 12:44:39 · 3981 阅读 · 0 评论