在经过一阶段的数据分析平台搭建工作后,结合比赛,我开始了对数据可视化的研究,结合几篇对可视化技术与工具的描述,以下整理出一些数据可视化的资料与知识,以供参考。...DataWrapper 在新版本浏览器中可以显示动态图表,而在旧版本浏览器中则显示静态图片。...8.jQuery Sparklines: 可生成波形图的jQuery 插件,主要是那些可以嵌在字里行间的小条形图、折线图、面积图。支持大多数浏览器,包括IE6。...9.Peity:jQuery 插件,可生成非常小的条形图、折线图和饼图,只支持较新版本的浏览器。再强调一遍,它能生成非常小又非常精致的小型可视化图表。...Page: http://arborjs.org/ 2.Sigma.js: 一个非常轻量级的图谱可视化库。无论如何,你得看看它的网站,在页面上方的大图上晃几下鼠标,然后再看看它的演示。
通过单步调试发现,默认视图在最后将tr写到table里面用的是jQuery的html()函数,就是这个函数在IE下执行效率非常低。...解决方案一:返璞归真 jQuery是个很锋利的工具,可有时候我们也得返璞归真一下,为什么非要用jQuery的html()函数呢,我们就用javascript dom对象里面的innerHtml属性不就可以了么...选择器查询,效率就慢在has这个伪选择器上,它是针对所有后代元素的,查找的效率是比较慢的,又是在这么多数据量的情况下,其效果就可想而知了。...优化方案二:实时记录优化法 既然慢在DOM结构巨大时,jQuery选择器的搜索效率不是很好(特别是在IE下)。如果我们每次操作都记录下勾选的tr,那么就完全可以绕开选择器。....data(target,'datagrid')变量增加两个属性:"checkedTrsBody1"和"checkedTrsBody2"分别存储frozen部分和normal部分被勾选tr的引用,然后在各个设计到勾选的操作中维护这两个属性
尤其是用手机2G/3G访问页面,不仅页面慢,而且还会用掉很多流量。...lazyload插件网上能搜出很多,常见的是: 1、jquery.lazyload.js: 依赖jQuery JavaScript /*!...iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC', // for IE6...: 'http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png' // todo : 将某些属性用global来配置,而不是每次在$...sui框架里必须指定 }); }); 代码记录完成,测试几天看看效果,如无问题后续逐一更新,如遇问题依情况而定,好了,假期回来之后工作肯定不少,抓紧时间工作去吧,有问题留言反馈!
一晃时间过得真快,不知不觉已经毕业10年了,这十年虽然我一直在从事着后台的开发,但是也接触和从事过前端的开发工作,那么接下来就让我回顾下我眼里的前端十年。...刚毕业的我 记得那个时候很多公司招聘前端的要求都有一条是要兼容各个浏览器,这里特别指的是IE6,是的,你没有听错,那个时候虽然一部分浏览器已经升级到IE8,但是仍然有大量浏览器是IE6,IE7等,因此,...搭配着Ajax和jQuery,那个时候前端开发似乎也很轻松,你需要做的就是处理一些后台发送过来的数据,然后在界面上动态展示就可以了。...那个时候我们都会定义一些基类,比如.pl5 .pr10等等,这样在写前端页面的时候,直接拿来使用非常的方便,后来在接触到bootstrap之后,才发现原来它们居然是异曲同工。...不知道当时的前端领导是否是借鉴了bootstrap,总之在我看来那个前端领导是个非常出色的前端工程师。
前段时间我就主导了这件事情,把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery 1.11.3。jQuery官方也为类似升级工作提供了jQuery Migrate插件。...,当时还是采用的jQuery 1.4.2,这次升级步子迈得算是比较大。...6. jQuery.fn.attr方法的错误使用(这是个非常易犯的错误!) jQuery Migrate中,关于attr方法的警告有以下这些: 1....IE6/7/8浏览器不支持修改input表单的type属性 在jQuery Migrate中是这样的警告: JQMIGRATE: Can't change the 'type' of an input...虽然我感觉这是一种并不算优雅的行为,但是很多浏览器都是支持这么做的,除了IE6/7/8。建议在实际中也是少用这个功能为好。 4.
MGO 是上个月 OpenJS 博客上两篇文章的作者,里面都提到了 jQuery 正在进行的 现代化工作。...要知道,这是在谷歌浏览器逆袭之前,现在微软臭名昭著的 Internet Explorer 占据了 85-90% 的浏览器市场,其中 IE6 占主导地位。...jQuery 现在的角色 在现在各种好用的浏览器都在更加符合 Web 标准的时候,jQuery 现在在 Web 中扮演的角色是啥呢?...每个操作都会创建一个新的这种包装器对象,在大多数情况下,这并不重要,但对于具有大量 DOM 操作的非常复杂的应用程序,这可能会成为一个问题。...jQuery 的持续时间比大多数开发者预期的要长得多,因为它是在 Web 2.0 时代开始时问世的。毕竟,它现在仍然可以完成它所要做的工作,而且它仍然是一个非常简单方便的 JavaScript 库。
日常的工作中可能会用到,选取处某个或者某些元素外的所有元素。...这时我们可以使用 jQuery 遍历中的 not() 方法来排除某些元素,例如根据元素的 #id ,.class 等排除,代码如下: $("div.content *").not(".keep"); 表示...2、CSS选择器内以 * 星号开头的属性: 在CSS选择器内星号 + CSS 属性,一般区别 IE6 和 IE8 、IE6 和 FF,IE7 和 IE8,IE7 和 FF 浏览器之间属性 CSS HACK...通过各大浏览器测试对比,我们会发现在 IE6 和 IE7 中宽度为 300px ,而在 IE8 及以上 MSIE 版本、谷歌浏览器、火狐(FF)浏览器却显示为 220px 宽度。...声明:本文由w3h5原创,转载请注明出处:《利用jQuery not()方法选取除某个元素外的所有元素》 https://www.w3h5.com/post/439.html
要不要做 产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先) 成本的角度 (有无必要做某件事) 2、做到什么程度 让哪些浏览器支持哪些效果 3、如何做 (1)根据兼容需求选择技术框架/库(jquery...六、处理兼容问题的方法 ---- 1、选择合适的框架 (1)Bootstrap (>=ie8) (2)jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9) (3)Vue (>=...[endif]--> 使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作,但在 Internet Explorer 10 中无法正常工作。...我们需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的页面效果。实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。...[endif]-->; 针对IE6及以下版本:只在IE6-显示的内容 。
中也有将字符串转为JSON格式的方法jquery.parseJSON( json ),接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript (JSON)对象。.../">资源链接:http://www.css88.com/jqapi-1.9/jQuery.parseJSON/ 15 jQuery中也有将字符串转为JSON格式的方法...36 这个问题往往在服务器端语言,如PHP,JSON注入到一个JavaScript文件时发生。...39 40 在jQuery 1.9之前,如果传递给$.parseJSON一个空字符串,null, 或者 undefined,,将返回null,而不是抛出一个错误...也可以使用eval()将字符串转为JSON对象,但不推荐这些方式,这种方式不安全eval会执行json串中的表达式。
此外,jQuery还拥有各种插件,以帮助开发者在最短时间内快速创建网站/网页。 1)禁用右键单击功能 如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能。...} } }); $(document).ready(function() { $('#loaded_max').val(50); }); 10、检测密码强度 在表单功能中...PNG 问题 至今,IE6 在国内仍然占据了大量的份额,因此在 Web 开发中仍然需要考虑 IE6 的兼容问题。...strPost); } } } $(document).ready(function(){ parseJson(); }); 14、隔行换色 这是一个很老的功能了,在大的列表或表格中...下面的代码可以非常简单实现这个功能。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。这其实对网页的渲染效率起到了非常大的帮助。...下图是从网上揪过来的一张图,非常详细的展现出了在数据传输过程中,Ajax起到了一个什么样的工作。 (就是browser向server发起请求,server返回给browser) ?...这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。...请求处理中 4. 请求已完成,且响应已就绪 Ajax demo 下面就是一个完整的Ajax的例子~ ?...基于jQuery的Ajax 对于日常开发中,我们可以采用jQuery所封装的Ajax,达到更高效的开发: ?
很多同学都会问在web前端开发,需要学习什么东西?难不难?多久能入门?学习多久能建好一个网站?毕业之后工资能拿到多少?...重庆IT培训来为大家讲解一下: Web前端工程师是协调前端工程师、后端程序员实现网站页面活程序的界面美化、交互体验的IT技术开发人员,需要精通HTML5、CSS3、JavaScript、jQuery、Ajax...在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的,用户使用网站的行为也以浏览为主。...前端开发的门槛其实非常低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢。所以,对于从事IT工作的人来说,前端开发是个不错的初入点。...虽然IE6很多都不兼容,但现在还使用的人还是有的。通过验证指定URI的CSS内容,可以帮我们检查一下有没有错误。
的的,能实现多种切换效果的图片切换插件.Nivoslider提供了11种切换效果,支持多种参数配置和方法函数调用,使用简单,是一款非常理想的图片切换插件。...CSS3转换:在现代设备上流畅运行的动画。 触摸:滑动支持,跟踪支持的设备上的触摸动作。 设置简单:快速使用易于使用的示例。...4:WOW Slider http://wowslider.com/WOW jQuery Slider在所有移动设备,包括IE6在内的现代和以前的浏览器上都完美无瑕地工作,这要归功于标准兼容,有效的语义标记和完全优化的脚本...5:An HTML5 Slideshow demo:https://www.dmxzone.com/go/17708/html5-slideshow/ 在Dreamweaver中以令人惊叹的HTML5幻灯片形式呈现照片...坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
也非常欢迎大家补充。...中,效率的提高是非常明显的,但是在Firefox和Chrome中,差别不大。...,尤其在Firefox和chrome中。...和chrome中,两者的效率差不多,但是在Firefox中,第一种写法反而比第二种慢很多。...除了上面的原因外,table在样式继承,offset值计算上,在多浏览器中的表现上,都有不少诡异的差异,例如:如果在td中有个元素div,则取div的offsetParent返回是td元素,并不是我们期望的具有
1.x 版本兼容 IE6、IE7 和 IE8,而 3.x 版本不兼容 IE6、IE7 和 IE8。...在实际开发中,我们建议使用 1.x 版本,而不是 3.x 版本,原因有两个: 1.现在很多网站还是要考虑兼容 IE6~IE8; 2.大多数 jQuery 插件不支持 3.x 版本,只支持 1.x 版本。...在实际开发中,我们一般都是使用压缩版,也就是“jquery.min.js”版本。压缩版经过压缩,体积小很多,这样也可以提高页面加载速度。那么小伙伴们就会问了:“为什么不用开发版呢?”...注意 jQuery 库文件的路径一定要写正确!!! 我们必须先把 jQuery 库文件引入,才能够使用 jQuery 语法。...也就是说,你写的 jQuery 代码必须放在 jQuery 库文件下面才能生效 jQuery 文件,就是一个“外部 JavaScript文件”。
众所周知,如果内容超过元素的高度,那么IE6是会自动增加元素的高度,即使你明确的定义了元素的高度。我们可以利用IE6的这个bug来让IE6也有最小高度min-height属性的效果。...max-heigt的bug比较麻烦,有2种解决方法,先看jQuery方法: if($.browser.msie&&($.browser.version === "6.0")){$(".entry").each...($(this)[0].scrollHeight>500)$(this) CSS解决方法: .css({"height":"500px","overflow":"hidden"});});} 原理: 在IE6...中可以通过设定height来达到max-height的效果....循环所有要加max-height属性的DOM元素,判断他的scrollHeight大于你要设置的最大高度如果超过了就通过设置height为最大高度,我这里使用的是[0],获取的是的DOM对象,而不是jQuery
请求中,不能更新地址栏,地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验。...Onhashchange 事件 如下面Html片段,点击不同的连接,在mainPanel中加载不同的页面: 解决方案如下: <a href="/home...val[1]); } } 使用onhashchange事件触发ajax请求: 到这里工作已经完成了...其实对于那些死抱着IE6,IE7 不放的用户,咱也没必要给他们提供这样的用户体验。...方案二:使用jQuery.History.js 对于要兼容IE6、IE7的情况,笔者一直使用jquery.history.js 这个插件(http://plugins.jquery.com/history
下面我们介绍一下jQuery如何下载与安装? jQuery下载 对于jQuery文件,我们可以到jQuery官网下载。 jQuery文件有两个常用版本:一个是1.x版本,另一个是3.x版本。...1.x版本兼容IE6、IE7和IE8,而3.x版本不兼容IE6、IE7和IE8。...1、在实际开发中,我们建议使用1.x版本,而不是3.x版本,原因有两个: 2、现在很多网站还是要考虑兼容IE6~IE8; 大多数jQuery插件不支持3.x版本,只支持1.x版本。...压缩版是经过高度压缩的,以“jquery.min.js”命名,一般供实际开发者使用。 在实际开发中,我们一般都是使用压缩版,也就是“jquery.min.js”版本。...jQuery学习必备教程 动力节点的jQuery视频带你系统的学习jQuery库,将通过视频讲解以及许多在线实例,学习如何通过使用 jQuery 应用 JavaScript 效果。
jQuery一般来说还是很好用的,但有时候它也会有些问题的,比如jQuery的html()方法设置html代码,在一种情况下,ie6、ie7、ie8 下是不能设置html代码的。...1.什么情况下IE6、IE7、IE8 jQuery.html("xxx")方法会设置不上html代码? ...答:当被加载的的html代码里面出现以下情况,ie8(包括ie8)以下是设置不上html代码的: a) 被设置的html代码中包含引用其他js的,如:中包含js 方法的,如:function Stone(){ alert("我叫MT"); },设置html代码无效。 ...[附加:被设置的html代码中如果包含引用其他外部 样式的,比如:<link href="..
各种浏览器 能熟练使用各种浏览器(Firefox,Chrome,IE等,如果还要兼容IE6,那还要用IETester)来调试。...在团队中,能遵守团队的代码风格。 代码组织 能很出组织的很好的代码。 能写出这样的代码的方式,可以通过了解MVC,MVVM,MVP,以及各种js的设计模式。...我开发的组件(很多情况下是为了兼容IE6 WTF) simple-slide 基于jquery的简单幻灯组件。兼容 Firefox,Chrome,IE6+。...不兼容IE6。 number-controller 基于jquery的输入框中输入数字,左右两侧有加减来调节数字大小的组件。兼容 Firefox,Chrome,IE6+。...jquery-linkage-select 基于jquery的联动下拉框组件 预处理语言 会使用 Less,Sass之类 Coffee Script之类 熟悉多门后台语言 nodejs是肯定要会的。
领取专属 10元无门槛券
手把手带您无忧上云