前端兼容

学习要点： 1.什么是 jQuery 2.学习 jQuery 的条件 3.jQuery 的版本 4.jQuery 的功能和优势 5.其他 JavaScript 库 6.是否兼容低版本 IE 7.下载及运行 jQuery 一．什么是 jQuery jQuery 是一个 JavaScript 库，它通过封装原生的 JavaScript 函数得到一整套定义好的方法。它的作者是 John Resig ，于 2006 年创建的一个开源项目，随着越来越多开发者的加入， jQuery 已经集成了 JavaScript 、 CSS 、 DOM 和 Ajax 于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。 主旨：以更少的代码、实现更多的功能 二．学习 jQuery 的条件 jQuery 是 JavaScript 库，所以 jQuery 在使用上要比原生的 JavaScript 要简单，但是对于网页编程来说，有些通用的基础知识是必备的： 1.XHTML 或 HTML5 （含 CSS ，网页必备的基础技术， XHTML 已完结 90 课）； 2.JavaScript （虽然 jQuery 使用比 JavaScript 简单，但各种语法来自 JavaScript ，只要掌握已出课程的第一季 149 课即可，并不需要完全精通，只要理解语法和项目中简单的用法即可。）；

后台管理UI的选择 目录 一、EasyUI 二、DWZ JUI 三、HUI 四、BUI 五、Ace Admin 六、Metronic 七、H+ UI 八、Admin LTE 九、INSPINIA 十、LigerUI 十一、FineUI 十二、其它UI 十三、总结 最近要做一个企业的OA系统，以前一直使用EasyUI，一切都好，但感觉有点土了，想换成现在流行的Bootstrap为基础的后台UI风格，想满足的条件应该达到如下几个： 1、美观、大方、简洁 2、兼容IE8、不考虑兼容IE6/IE7，因为现在还有很多公司在使用Win7系统，系统内置了IE8 3、能通过选项卡打开多个页面，不想做单页，iframe也没关系 4、性能好，不要太笨重 5、最好以Bootstrap为基础 6、还希望在以后别的系统中能够复用。 一次次反复纠结的选择开始了，给大家介绍下我考虑过的UI，也给大家一个参考。 一、EasyUI easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强大的。 优点：轻量、功能强大、免费

面试有几点需注意： 面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。 题目类型： 理论知识、算法、项目细节、技术视野、开放性题、工作案例。 细节追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的。 回答问题再棒，面试官（可能是你面试职位的直接领导），会考虑我要不要这个人做我的同事？所以态度很重要、除了能做事，还要会做人。（感觉更像是相亲( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ )） 资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。 前端开发知识点： HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack CSS基本功：布局、盒子模型、选择器优先级 HTML5、CSS3、Flexbox JavaScript： 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs 其他： 移动端、响应式、自动化构建、HTTP、离线存储、 WEB安全、优化、重构 团队协作、可维护

1、console.log 方法在IE中不兼容 低版本的 IE 根本就没有 console.log() 方法，所以如果你在 JS 上运行这个方法就有可能会出错。 在 IE11 上运行 console.log() 方法，在开启了 F12开发者工具时可以正常运行且输出，但是如果没有运行开发者工具时代码就会有问题。console.log 方法不会执行，并且后面的代码也不会执行。此时你就会很难排查问题，因为你在开启开发者工具时就会正常运行且输出。 所以说我们平时应该养成良好的编程习惯，一些测试用的打印语句要及时的删掉。 当然如果你想在 IE 上也能正常运行这个方法，也可以自己写兼容： <script type="text/javascript"> if(!window.console){ window.console = {}; } if(!window.console.log){ window.console.log = function(msg){}; } </script> 来源： https://www.cnblogs.com/wenxuehai/p/12400801.html

1、居中问题 div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码margin: 0 auto; 2、高度问题 两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;} 3、clear:both; 不想受到float浮动的，就在div中写入clear:both; 4、IE浮动 margin产生的双倍距离 #box { float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略 } 5、padding问题 FF设置 padding 后，div会增加 height 和

前端浏览器兼容问题 常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit IE浏览器：Trident内核，也称为IE内核 Chrome浏览器：Webkit内核，现在是Blink内核 Firefox浏览器：Gecko内核，俗称Firefox内核 Safari浏览器：Webkit内核 Opera浏览器：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核； 360浏览器：IE+Chrome双内核 猎豹浏览器：IE+Chrome双内核 百度浏览器：IE内核 QQ浏览器：Trident（兼容模式）+Webkit（高速模式） 常见的兼容性问题： 不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同 解决方案：css里增加通配符*{margin：0；padding：0} IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题 解决方案 :设置display：inline； 当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度 解决方案 :超出高度的标签设置overflow：hidden，或者设置line-height的值小于你的设置高度 图片默认有间距 解决方案 ：使用float为img布局 IE9以下浏览器不能使用opacity 解决方案 ：opacity：0.5

之前在网上看到一个博主写的前端通用的下载文件的方法，个人觉得很实用，所以mark一下，方便以后查阅 源文地址 （源文还有上传/下载excel文件方法） 因为项目要求要兼容IE浏览器，所以完善了一下之前博主的方法 IE 浏览器：使用微软自带的msSaveBlob 方法，a标签的download属性不支持IE 谷歌浏览器（只测试过谷歌）：创建a标签 ，添加download属性，模拟鼠标点击事件 　　 //这里res.data是返回的blob对象 var blob = new Blob([res.data.fileData], {type: 'application/json;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型 var href = window.URL.createObjectURL(blob); //创建下载的链接 if (window.navigator.msSaveBlob) { try { window.navigator.msSaveBlob(blob, 'model.json') } catch (e) { console.log(e); } } else { // 谷歌浏览器 创建a标签

/* * jQuery table2excel - v1.1.1 * jQuery plugin to export an .xls file in browser from an HTML table * https://github.com/rainabba/jquery-table2excel * * Made by rainabba * Under MIT License */ /* * jQuery table2excel - v1.1.1 * jQuery plugin to export an .xls file in browser from an HTML table * https://github.com/rainabba/jquery-table2excel * * Made by rainabba * Under MIT License */ //table2excel.js ;(function ( $, window, document, undefined ) { var pluginName = "table2excel", defaults = { exclude: ".noExl", name: "Table2Excel", filename: "table2excel", fileext: ".xls", exclude_img: true,

/*--> */ /*--> */ 关于阴影这个效果，IE和W3C都有实现的代码，但效果却不统一(以W3C的效果为主)。 W3C实现代码：box-shadow: 水平偏移 垂直偏移 阴影模糊值 阴影外延值 insert(是否内阴影); IE的阴影实现代码： progid:DXImageTransform.Microsoft.Shadow(color=颜色, direction=角度, strength=阴影强度); 但IE的阴影看起来有点恶心，而且还不可以设置模糊值。可以 点击这里查看 所以，要想效果跟W3C的效果接近，可以利用IE滤镜的模糊效果达到 IE的模糊效果实现代码： filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=7); 实现原理是新建一个层，加模糊效果作为阴影，实现如下： 外阴影： .outer{ position:relative; font-size:0; width:182px; height:137px; margin:0 0 50px 5px; } .outer .w3cShadow { position:relative; border:1px solid #000; box-shadow: 0 0 10px #000000; } .outer .ieShadow{ display:none

前言 这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距： 这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用 文中有误请您提出，以免误人自误 技术选型 单页or多页 spa（single page application）也就是我们常常说的web应用程序webapp，被认为是业内的发展趋势，主要有两个优点： ① 用户体验好 ② 可以更好的降低服务器压力 但是单页有几个致命的缺点： ① SEO支持不好，往往需要单独写程序处理SEO问题 ② webapp本身的内存管理难，Javascript、Css非常容易互相影响 当然，这里不是说多页便不能有好的用户体验，不能降低服务器压力；多页也会有变量污染的问题发生，但造成webapp依旧是“发展趋势”，而没有大规模应用的主要原因是： webapp模式门槛较高，很容易玩坏 其实webapp的最大问题与上述几点没有关系，实际上阻碍webapp的是技术门槛与手机性能，硬件方面不必多说，这里主要说技术门槛。 webapp做的好，可以玩动画，可以玩真正意义上的预加载，可以玩无缝页面切换，从某些方面甚至可以媲美原生APP，这也是webapp受到追捧的原因。 但是，以上很容易被玩坏！因为webapp模式不可避免的需要用到框架