![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 90
lihefei_coder
这个作者很懒,什么都没留下…
展开
-
iframe与父页面、子页面的交互
父页面获取子页面父页面获取子页面的window对象: //原生JS获取方式:var frameWin = document.getElementById("ifr").contentWindow;或var frameWin = document.getElementsByTagName('iframe')[0].contentWindow;或var frameWin = documen原创 2017-11-26 09:41:09 · 14283 阅读 · 0 评论 -
JavaScript日期字符与毫秒互转
给原生Date构造函数添加格式化方法Date.prototype.format = function(e) { var a = function(m, l) { var n = "" , k = (m < 0) , j = String(Math.abs(m)); if (j.length < l) {原创 2017-12-19 18:24:19 · 1267 阅读 · 0 评论 -
js点击按钮和指定下拉元素以外的区域隐藏下拉内容
html<button type="button" id="btn">切换显示下拉内容▼</button><div id="box" style="display:none;">内容框</div>jsvar btn = document.getElementById('btn');var box = btn.nextSibling;while (box.nodeType != 1) {原创 2017-11-28 18:34:02 · 2606 阅读 · 0 评论 -
Object.keys() 获取对象的length
众所周知,JavaScript里json格式的对象是没有length属性的,如果需要得到一个对象的具体有多少个属性,Object.keys方法就能派上用场了,Object.keys方法返回的是一个数组,所以它有length值比如想知道Chrome里的window对象有多少个属性,可以用下面这中方式得到var arr = Object.keys(window); //测试版本为Chrome 61.0.原创 2017-11-10 15:02:59 · 17111 阅读 · 0 评论 -
Javascript Array forEach()中无法return和break,代替方法some()与every()
我们都知道for循环里要跳出整个循环是使用break,但在数组中用forEach循环如要退出整个循环使用break会报错,使用return也不能跳出循环。使用break将会报错:var arr = [1,2,3,4,5];var num = 3;arr.forEach(function(v){ if(v == num) { break; } console.log原创 2017-08-05 22:58:24 · 71796 阅读 · 5 评论 -
JavaScript计时器 console.time(name)
console.time(name)与console.timeEnd(name)需要成对出现,而且参数必须是相同的字符串才能正常输出console.time('计时');for(var i=0; i<10000; i++){}console.timeEnd('计时');原创 2017-07-19 20:03:28 · 709 阅读 · 0 评论 -
JavaScript计算页面滚动条宽度
//右侧滚动条宽度计算var vs_w = document.offsetWidth - document.clientWidth;//底部滚动条高度计算var hs_h = document.offsetHeight - document.clientHeight;原创 2017-07-18 14:51:45 · 2596 阅读 · 0 评论 -
Google Map Event 谷歌地图事件
var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(39.915, 116.404), zoom: 10});//地图绑定事件示例google.maps.event.addListener(map,"click",function(even原创 2017-06-28 11:06:29 · 7757 阅读 · 0 评论 -
JavaScript常用工具类
JavaScript类型判断isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String'}isNumber (o) { //是否数字 return Object.prototype.toString.call(o).slice(8, -1) =转载 2018-02-01 13:45:49 · 657 阅读 · 0 评论 -
html标签与字符串互转义
处理表单输入内容时html代码注入问题//把HTML格式的字符串转义成实体格式字符串function escapeHTMLString(str) { str = str.replace(/</g,'<'); str = str.replace(/>/g,'>'); return str;}//把实体格式字符串转义成HTML格式的字符串function esc原创 2018-01-09 16:32:04 · 17753 阅读 · 0 评论 -
JavaScript严格模式与非严格模式的区别
1.变量声明//非严格模式a = 1;console.log(a); //1//严格模式'use strict'a = 1; console.log(a); // Uncaught ReferenceError: a is not defined2.函数体内this指向//非严格模式function foo() { console.log(this);}foo()...原创 2018-10-11 10:50:32 · 586 阅读 · 0 评论 -
JS监听变量变化
单个属性变化监听:Object.defineProperty(obj, prop, descriptor) //监听a对象的age属性var a = { age: 10 };Object.defineProperty(a, 'age', { get: function() { //取值的时候会触发 console.log('get: ' + age); ...原创 2018-07-27 11:49:41 · 10923 阅读 · 1 评论 -
获取文本域内容换行数
$('textarea').on('input propertychange', function() { var v = $(this).val(); var arr = v.split(/\n/); var len = arr.length;});原创 2018-05-22 19:14:50 · 2086 阅读 · 0 评论 -
常见网页状态码
2开头 (请求成功)表示成功处理了请求的状态代码。200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。 201 (已创建) 请求成功并且服务器创建了新的资源。 202 (已接受) 服务器已接受请求,但尚未处理。 203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。 204 (无内容) 服务器成功...转载 2018-04-19 20:04:44 · 7637 阅读 · 0 评论 -
判断元素点中的是自身而不是子元素或其它元素
document.body.addEventListener('click',function(e){ //e.target为点中的元素 //e.currentTarget为绑定事件的元素 if(e.target == e.currentTarget){ console.log('我点中了自己'); }},false);...原创 2018-04-10 21:11:59 · 1142 阅读 · 0 评论 -
前端生态学习链接
React官网:https://reactjs.org/ 中文:http://react-china.org/Angularjs官网:https://angularjs.org/ 中文:http://www.angularjs.cn/Vue.js官网:https://cn.vuejs.orgECMAScript6阮一峰:http://es6.ruan原创 2018-02-02 11:42:09 · 660 阅读 · 0 评论 -
javascript中的Error对象
在javascript中一旦代码解析或运行时发生错误,javascript引擎就会自动产生并抛出一个Error对象的实例,然后整个程序就中断在发生错误的地方。Error对象的实例有三个基本的属性: name:错误名称 message:错误提示信息 stack:错误栈Error对象是最一般的错误类型,在它的基础上,javascript还定义了其他6种错误:①、SyntaxError转载 2017-06-14 14:54:37 · 2562 阅读 · 0 评论 -
JavaScript中判断数据是不是数组
const arr = [1,2,3];arr.constructor == Array; //(多个frame跨页面时会有问题)arr instanceof Array; //(多个frame跨页面时会有问题)Array.isArray(arr); //IE9以下不兼容Object.prototype.toString.call(arr) == '[object Array]原创 2017-06-26 14:43:36 · 402 阅读 · 0 评论 -
ECMAScript规范第8版(ES2017)已发布,新功能一览
EcmaScript 8或EcmaScript 2017在6月底由TC39正式发布。 去年,似乎我们在谈论EcmaScript。 这不是什么 目前的标准是每年发布一个新的ES规范版本一次。 ES6于2015年发布,ES7于2016年发布,但ES5发布后却有人记得吗? 这是发生在2009年,在JavaScript的神奇的兴起之前。所以我们将JavaScript的开发变化作为稳定的语言,现在我们需要将E翻译 2017-07-13 16:23:51 · 17432 阅读 · 0 评论 -
JavaScript Cookie操作
Cookie的完整形式:document.cookie = 'user=张三;expires=2100-01-01 08:00:00;path=/demo;domain=http://www.demo.com;secure';user:名称 张三:内容 expires:过期时间(可选) path:路径(可选) domain:域名访问(可选) secure:安全访问(可选)//名称内容设置原创 2017-03-12 00:13:42 · 773 阅读 · 0 评论 -
JavaScript Cookie 设置、获取、删除
设置Cookiefunction setCookie(name,value,day){ var date = new Date(); date.setDate(date.getDate() + day); document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value) + ';expir原创 2017-03-11 00:54:59 · 277 阅读 · 0 评论 -
禁用按键F5刷新,兼容chrome、firefox、IE
低版本按键事件window.onload = function(){ var timer = null; //声明定时器变量 document.onkeydown = function(event){ clearTimeout(timer); //每次按键先清除定时器,避免定时器重复多开 var event = event || window.even原创 2017-02-21 11:13:58 · 2821 阅读 · 0 评论 -
IE8- bind() 函数兼容
if(!Function.prototype.bind){ Function.prototype.bind = function(){ if(typeof this !== 'function'){ throw new TypeError('Function.prototype.bind - what is trying to be bound is not ca原创 2017-02-21 16:46:39 · 1068 阅读 · 0 评论 -
BOM、DOM、CSS尺寸获取
clientWidth:获取元素的宽度(包括内边距,减去滚动条) clientHeight:获取元素的高度(包括内边距,减去滚动条)offsetWidth:获取元素的宽度(包括边框、内边距、滚动条) offsetHeight:获取元素的高度(包括边框、内边距、滚动条)scrollWidth:获取元素宽度(包括内边距,减去滚动条,包括超出内容的宽度) scrollHeight:获取元素高度(包括原创 2017-02-20 22:50:15 · 675 阅读 · 0 评论 -
HTML5压缩图片
实现思路:1.通过文件选择按钮获取本地图片 2.获取本地图片的dataURI数据创建本地图片预览 3.创建canvas画布图片预览 4.通过canvas的toDataURL()方法返回压缩后的图片格式的dataURI 5.用canvas返回的dataURI创建压缩后的图片预览注意点:1.不兼容低版本IE浏览器 2.canvas 必须有宽度和高度 3.输出为jpg格式才能压缩方法及参数说明原创 2016-12-23 15:00:33 · 1586 阅读 · 0 评论 -
JavaScript中call、apply、bind函数的用法
call、apply、bind函数的应用原创 2016-11-21 16:32:01 · 493 阅读 · 0 评论 -
JavaScript正则表达式贪婪模式与惰性模式
JavaScript正则表达式贪婪模式与惰性模式元字符/元符号匹配规则例子结果?匹配出现0次或1次 /a?/.test('abcd');true+匹配出现1次或多次/a+/.test('aaaaaaaa');true*匹配出现0次或1次或多次/a*/.test('bbbbb');true{n}匹配刚好出现n次/a{5}/.test('aaaab');false原创 2016-11-01 15:18:29 · 2744 阅读 · 0 评论 -
JavaScript登录记住密码
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>记住密码</title></head><body><form id="loginForm"> <input id="user" type="t原创 2017-03-22 14:56:56 · 1567 阅读 · 0 评论 -
JavaScript 获取计算后的样式
W3C标准浏览器的获取方法:var oDiv = document.getElementById('div');//获取计算后的font-sizevar sFs = getComputedStyle(oDiv,null).getPropertyValue('font-size');//推荐使用//或者var sFs= getComputedStyle(oDiv,null).fontSize;原创 2017-03-13 00:23:31 · 2869 阅读 · 0 评论 -
JavaScript字符串拼接变量名及赋值
某些时候需要通过传参的形式来改变或获取有规律的变量值,就可以用到变量名拼接传参拼接变量名获取值方法一:(适用于全局变量)//通过中括号[]var str_a = '你好';var str_b = 'hello';function test(s){ return window['str_' + s];}console.log(test('a')); //你好conso...原创 2017-04-14 14:43:35 · 28533 阅读 · 2 评论 -
JavaScript语言运算bug
JavaScript是一门松散型的语言,在运算上存在一些不可思议的地方,下面列出几种我已知的一些例子原创 2017-05-13 14:18:54 · 670 阅读 · 0 评论 -
解决JavaScript库命名冲突问题 noConflict
当一个页面需要引入两个不同的js库,如果它们挂载在window对象下的全局变量命名空间相同,就会产生命名冲突。 为了解决这个问题,像jQuery库就提供了noConflict()方法来处理,实现思路如下:var $ = '$'; //初始全局变量$ (假设这是第一个库,挂载在window对象下的全局变量名为$)//封装一个命名空间为jQuery的库 (假设这是第二个库,挂载在window对象下的全原创 2017-06-30 16:11:04 · 881 阅读 · 0 评论 -
JavaScript数组排序bug
//默认排序const arr = [1,9,2,101,95,50];arr.sort();console.log(arr); //[1, 101, 2, 50, 9, 95] 此处有bug//修复bugconst arr = [1,9,2,101,95,50];arr.sort(function(n,m){ if(n>m){ return 1; }el原创 2017-06-29 17:00:28 · 515 阅读 · 0 评论 -
JavaScript常用字符串方法和属性
var str = ‘abcd’str.charAt(0); //输出下标位置的字符str.charCodeAt(0);//输出下标位置的字符编码值str.concat(‘e’); //输出拼接后的字符串str.indexOf(‘c’); //输出指定字符的下标位置str.lastIndexOf(‘c’); //从后向前搜索输出指定字符的下标位置str.length; //输出字符串长度str.lo原创 2017-03-11 23:40:39 · 908 阅读 · 0 评论 -
JavaScript正则表达式分组模式:捕获性分组与非捕获性分组及前瞻后顾(断言)
javascript正则表达式里分组模式以小括号来()表示分组,例:/([a-z])/捕获性分组:正则表达式在开启捕获性分组工作模式时会把每个分组里的值保存起来,有时候我们需要利它来完成一些工作。 比如想把‘hello world’互换成‘world hello’,这时候捕获性分组就派上用场了。方法一:通过exec函数var str = 'hello world'; //首先原创 2016-11-03 15:49:13 · 15263 阅读 · 4 评论 -
JavaScript设置、获取页面url信息
1,设置或获取对象指定的文件名或路径。alert(window.location.pathname)2,设置或获取整个 URL 为字符串。alert(window.location.href);3,设置或获取与 URL 关联的端口号码。alert(window.location.port)4,设置或获取 URL 的协议部分。alert(window.location.protocol)5,设置或获取转载 2017-04-05 18:02:56 · 682 阅读 · 0 评论 -
页面可见性改变事件 : visibilitychange
浏览器里当用户切入或切出当前标签页时,会触发visibilitychange事件(IE10以下浏览器不兼容)。这个事件能很好的解决页面在不可见的情况下,通过状态判断针对性减少网络请求、服务器压力等。document.addEventListener('visibilitychange', function() { if(document.hidden){ //页面不可见状态原创 2017-03-23 16:04:46 · 4219 阅读 · 0 评论