![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端基础
敲键盘的猫
这个作者很懒,什么都没留下…
展开
-
浏览器加载、渲染html的顺序和页面优化
浏览器加载和渲染html的顺序1. IE下载的顺序是从上到下,渲染(就是把请求的内容显示到浏览器屏幕上)的顺序也是从上到下,下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。 3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。 4. 样式表在下转载 2016-02-22 22:55:15 · 1452 阅读 · 0 评论 -
ESLint javascript格式要求
首行缩进2个空格eslint: indentfunctionhello (name) { console.log('hi', name)}字符串使用单引号(除了避免转义)eslint: quotesconsole.log('hello there')$("")禁止出现未使用的变量eslint: no-unused-varsfuncti翻译 2017-04-09 19:01:22 · 3141 阅读 · 0 评论 -
iframe高度相关知识点整理
IFRAME 元素也就是文档中的文档.contentWindow属性是指指定的frame或者iframe所在的window对象.用iframe嵌套页面是,如果父页面要获取子页面里面的内容,可以使用contentWindow或者contentDocument,其区别如下:a) contentWindow 这是个只读属性,返回指定的iframe的窗口对象。它虽然不是标准的一部分,但各个原创 2017-05-31 09:41:22 · 366 阅读 · 0 评论 -
iframe高度自适应的6个方法
iframe内容未知,高度可预测这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度。常用的兼容代码有:// document.domain = "caibaojian.com";function setIframeHeight(iframe) { if (iframe) { var iframeWin转载 2017-05-31 17:44:03 · 529 阅读 · 0 评论 -
FileReader笔记
FileReader API链接地址:https://developer.mozilla.org/en-US/docs/Web/API/FileReader实例代码: File var result = document.getElementById("result"); var file = document.getElementBy原创 2017-06-17 22:07:14 · 283 阅读 · 0 评论 -
JavaScript 闭包究竟是什么JavaScript 闭包究竟是什么
用JavaScript一年多了,闭包总是让人二丈和尚摸不着头脑。陆陆续续接触了一些闭包的知识,也犯过几次因为不理解闭包导致的错误,一年多了资料也看了一些,但还是不是非常明白,最近偶然看了一下 jQuery基础教程 的附录,发现附录A对JavaScript的闭包的介绍简单易懂,于是借花献佛总结一下。1.简单的例子首先从一个经典错误谈起,页面上有若干个div, 我们想给它们绑定一个oncl转载 2017-06-24 15:41:59 · 548 阅读 · 0 评论 -
LocalStorage基础知识小结
cookie中每条cookie的存储空间为4k,localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。localStorage的写入,localStorage的写入有三种方法: if(!window.localStorage){ alert("浏览器支持localstorage"); }el原创 2017-07-05 09:29:43 · 343 阅读 · 0 评论 -
es6 扩展运算符 三个点(...)
1 含义扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [, , ]该运算符转载 2017-06-14 14:59:12 · 444 阅读 · 0 评论 -
即时函数(Immediate Functions)
1.即时函数的声明方法即时函数(Immediate Functions)是一种特殊的JavaScript语法,可以使函数在定义后立即执行:(function () { alert('watch out!');}());下面分几部来理解这种写法:橙色部分是一个函数表达式;天蓝色的一对括号代表立即执行它,括号里是执行这个函数需要的参数(这个例子不需要参数);再转载 2017-07-22 15:45:02 · 1117 阅读 · 0 评论 -
函数的配置对象Configuration Objects
配置对象通常用在API库的实现中,当程序中需要编写要多次的模块,也可以采用这种模式。这种模式的好处是接口明确,扩展方便。比如,一个 addPerson在设计的最初需要两个参数作为初始化时人的姓名:function addPerson(first,last){...}随着程序的进一步扩展,这个函数需要的参数变多了:function addPerson(firs转载 2017-07-23 11:11:29 · 295 阅读 · 0 评论 -
对象创建模式之模块模式(Module Pattern)
模块模式可以提供软件架构,为不断增长的代码提供组织形式。JavaScript没有提供package的语言表示,但我们可以通过模块模式来分解并组织代码块,这些黑盒的代码块内的功能可以根据不断变化的软件需求而不断的被添加,替代和删除。模块模式由几种我们已经介绍过的模式共同组成:命名空间模式即时函数模式私有成员与访问控制方法模式依赖声明模式模块模式的第一步是建立一个命名空间。首先我们用先转载 2017-07-23 11:28:35 · 563 阅读 · 0 评论 -
art-template常用总结
高性能JavaScript模板引擎原理解析:http://cdc.tencent.com/2012/06/15/%E9%AB%98%E6%80%A7%E8%83%BDjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/javascript 模板引擎,官网:https://g转载 2017-08-25 11:48:52 · 1138 阅读 · 0 评论 -
html标签title属性效果优化
html标签title属性效果不友好,最致命的是响应慢,体验不好,JQuery-UI提供了很好的支持。在jquery.tip的基础上又做了修改,这样子定制效果更强。代码如下: jQuery实现的简单文字提示效果 body { margin: 0; padding: 40px; background: #fff; font: 80% Ari转载 2017-10-28 10:03:46 · 12694 阅读 · 0 评论 -
动态加载JS文件方法总结
1、JQuery方法$.getScript("./test.js"); //加载js文件$.getScript("./test.js",function(){ //加载test.js,成功后,并执行回调函数 console.log("加载js文件");});2、JavaScript方法function loadScript(url, callback) { var转载 2017-12-15 11:39:59 · 340 阅读 · 0 评论 -
A4纸表格打印
商品房预售许可审批表 body { margin: auto; width: 794px; height: 1123px; } .box { /*border: dotted red;*/ margin: auto; width: 745px; height: 1123px; } .top { padding-top: 2原创 2018-01-11 14:49:07 · 726 阅读 · 0 评论 -
工作小结:Base64注意事项、<label>标签for属性
一、Base64场景1:后台保存的客户填写备注信息,前台无法正常展示原因:无法正常展示的备注信息为客户直接从黑屏复制过来的信息,信息中包含有不可见的控制字符,回传至前台的json数据,浏览器无法正常解析。方案:使用base64编码后保存至数据库,后台回传展示信息至前台浏览器端后,js执行base64解码再展示。经过编码后的控制字符数据json数据,浏览器可以正常解析。场景2原创 2017-03-05 10:55:51 · 505 阅读 · 0 评论 -
用JS打开新窗口,防止被浏览器阻止的方法
相信做web前端或者使用JS的朋友都会遇到需要在新窗口打开页面的情况,现在浏览器大都具有弹出窗口拦截功能,所以传统的window.open()不再那么好用了。借鉴于网上查到的方法和我个人的实践,把弹出新窗口的方法给大伙都介绍一下。第一种、使用原生javascript的window.open()方法(大部分情况下会被浏览自阻止)第二种、模拟表单(form)提交,原理是指定表单的action为转载 2017-02-01 13:50:09 · 2924 阅读 · 0 评论 -
HTML <form> 标签的 target 属性
定义和用法target 属性规定在何处打开 action URL。属性值值描述_blank在新窗口中打开。_self默认。在相同的框架中打开。_parent在父框架集中打开。_top在整个窗口中打开。framename在指定的框架中打开。实例在下面原创 2016-02-28 15:01:58 · 492 阅读 · 0 评论 -
使用框架结构之frameset
首先,我希望在你的目录下,有4个网页,各自显示不同的内容。如图所示:1.html显示“火影忍者”2.html显示“英雄联盟”3.html显示“嵌入式开发、网页开发、安卓开发”4.html显示“alsp”OK,来介绍下frameset的语法 cols="第一个框架窗口的宽度,第二个框架窗口的宽度"......>所谓框架集属性frameset,其目转载 2016-04-18 18:37:22 · 679 阅读 · 0 评论 -
浮动框架iframe
浮动框架式一种比较特别的框架,和frame比较类似。不过frame必须在frameset中才可以,而iframe不一样,首先, 他是一种内联框架,其次,他可以放在网页中的任何位置。所以,iframe可以直接放置在中或者其他标签之中。OK,来看下iframe的语法。简单吧。当然,还有其他的一些属性:1)width:框架的宽度2)height:框架的高度3)转载 2016-04-18 18:54:31 · 7705 阅读 · 0 评论 -
创建框架链接--frameset的连接方法
首先看下小编的目录架构1.html将作为主页面2.html将作为目录页面,里面有2个目录,分别是目录一和目录二3.html为目录一将要链接的页面4.html为目录二将要链接的页面然后,看下1.html的代码其中,name的意思是,指定frame的名字,他有什么用呢,看后面再看2.html的代码目录一目录二我创建了一个列表,然后目录一链转载 2016-04-18 20:16:34 · 2013 阅读 · 0 评论 -
keycode对照表
keycode 8 = BackSpace 回格keycode 9 = Tab keycode 12 = Clearkeycode 13 = Enter 回车keycode 16 = Shift_Lkeycode 17 = Control_Lkeycode 18 = Alt_Lkeycode 19 = Pausekeycode转载 2016-06-01 16:52:51 · 606 阅读 · 0 评论 -
页面嵌套 Iframe 产生缓存导致页面数据不刷新问题
最近遇到个比较古怪的问题:当页面嵌套多个 Iframe 时会出现 Iframe 里包含的页面无法看到最新的页面信息。 初步解决方案,在 Iframe 指向的页面地址后缀添加一个随机数或者时间戳。这样能确保每次在加载页面时,让浏览器知道它是最新的页面。说白了就是欺骗下浏览器,躲过缓存的灾难。(这是从 Stack Overflow 和 CSDN 上找到一个看似可行,能彻底治根的办法。 )转载 2016-08-31 22:08:50 · 9975 阅读 · 0 评论 -
url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介
转载地址:http://www.haorooms.com/post/js_escape_encodeURIComponent引子浏览器URl地址,上网一定会用到,但是浏览器地址有中文或者浏览器url参数操作的时候,经常会用到encodeURIComponent()和decodeURIComponent()以及encodeURI()等等。关于浏览器参数操作,请看文章http://转载 2016-09-18 21:07:47 · 551 阅读 · 0 评论 -
文本输入框input将输入转换为统一大小写
转载地址:http://blog.csdn.net/yieryi_/article/details/52078596文本输入框input将输入转换为统一大小写,通常有两种方法:JS和CSS方法。1.JS方式1).JS方式,通过监控key事件来做到。key事件有三种: keydown event , keypress event, keyup eventps:KeyDow转载 2016-10-23 17:55:28 · 2045 阅读 · 1 评论 -
js使用心得——避免全局变量冲突的小技巧
在写js代码的时候,经常会因为这样或者那样的原因用到全局变量,如果全局变量只在一个js里使用,那就没问题,但如果变量在不同的js文件里出现,这时隐藏的问题就会开始暴露,也许你能很快修复出现的BUG,又或许全无头绪。 先看下边的js文件test1.jsvar a = 1, b = 2, c = a + b;//此时c的值为3html代码如下:a转载 2016-11-23 21:10:49 · 1151 阅读 · 0 评论 -
js获取当前页面名称
// 取当前页面名称(不带后缀名) function pageName() { var a = location.href; var b = a.split("/"); var c = b.slice(b.length-1, b.length).toString(String).split("."); return c原创 2016-11-24 20:43:36 · 2433 阅读 · 1 评论 -
block,inline和inline-block概念和区别
转载地址:http://www.cnblogs.com/KeithWang/p/3139517.html总体概念block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一转载 2016-11-26 12:29:17 · 299 阅读 · 0 评论 -
JS中typeof与instanceof的区别
typeoftypeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。它返回值是一个字符串,该字符串说明运算数的类型。typeof 一般只能返回如下几个结果:number,boolean,string,function,object,undefined。我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="undefined"){aler转载 2016-12-08 22:29:13 · 349 阅读 · 0 评论 -
html标签的嵌套规则
一、HTML 标签包括 块级元素(block)、内嵌元素(inline) 1、块级元素 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签: address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul转载 2016-12-24 20:54:08 · 390 阅读 · 0 评论 -
html标签title属性值包括<br/>处理
用js赋给title属性的html实体,无法解析,导致 也无法解析,应该使用\r\n代替,使用 无法实现换行,因为没有经过浏览器的再解析。str_info.replace(/\/g, '\r\n');原创 2017-02-21 20:47:08 · 2768 阅读 · 0 评论 -
前台图片Canvas压缩上传小结
需求来源:之前有个提交审核表单的业务,表单中含有大量附件图片,大约有20多张吧,为了省事,采用的同步上传,一次需要上传很多照片,本来单张图片限制为200KB,这样子总图片大小约为5MB左右,想想也可以接收。业务上线后,得知用户大部分都是中老年人居多,手机拍照的图片很大,不会压缩。放开图片尺寸上传限制后,上传数据太大,体验很不好,就有了前台图片压缩的需求。业务实现要点:1、上传的图片使用ca原创 2018-01-13 10:13:55 · 606 阅读 · 0 评论