随笔分类 -  javascript

摘要：由于项目需要，做一些类似于OA系统的应用时，表格用到的是最多的，那么图表展示就先显得尤为的重要，其中柱柱状图、折线图、饼状图又居多。之前一直使用的是Chrome下的googleAPI中提供的chartAPI来进行表格的控制，其中对表格坐标的样式和细节调整做的比较好，但是一个不太好的问题是，很多关于googleAPI的东西需要远程加载，而google CDN的加载和访问 有时候受到地域等一系列因素会很慢，导致页面报表迟迟无法生成，造成的用户体验下降还是有些明显的。后来又接触了一下jQuery.plot的一款插件，效果也比较好。之后就用到了JQChart 大家的反响都不错，数据的生成多样，表格展示 阅读全文

摘要：首先IE是可以通过window.close()来关闭浏览器窗口的，但是在firefox和Chrome下是无效的，原因在于：Firefox下默认设置是无法通过脚本来关闭浏览器窗口的，为的是防止恶意脚本注入，所以调整的方式就是在url地址栏中输入about:config，然后在配置列表中找到 dom.allow_scripts_to_close_windows点右键的选切换把上面的false修改为true即可。 默认是falsechrome下的默认是不支持这种关闭方式的，但是也可以通过一些特殊的手段进行关闭：window.opener=null;window.open('', 阅读全文

摘要：首先说下基本的概念：hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员，返回一个bool值一个对象是否可以进行for in穷举，我们可以通过propertyIsEnumerable属性来判断，说明如下： propertyIsEnumerable属性，返回 Boolean 值，指出所指定的属性是否为一个对象的一部分以及该属性是否是可列举的。var bStr = "Test String".hasOwnProperty("split"); 阅读全文

摘要：今天做了一个任务，让我实现动态在表格中的input框中动态的录入数据，出了必要的验证之外，还要自动的切换焦点，自动的页面上移。做了一下，没多久就实现了这个功能，贴出代码来 /********动态填写学号********/ $("#userInfoList input").each(function(index){ var $tr_height=$(this).parents("tr").height(); //$("#overlay").height($tr_height); $(this).focus(function(){ ... 阅读全文

摘要：先看下效果图这三个效果是同一个js写出来的，由此可见只要掌握了 我们可以写出格式各样的提示信息，因为css的灵活性，可以让一个熟练掌握css的人将页面玩弄于鼓掌之间，只要开动你的大脑，发挥你的想象力。效果已定，我们可以梳理一下思路，以往的提示框，其实最简单的我们只要用css就可以写出来，利用a:hover就可以写出来，但是css写出来的效果有一个局限性，形式过于单一，而且考虑到Ie6等浏览器不支持很多高级的css属性，那做起来就更加有局限性了。js写出来的提示框的优点在于形式多样性，而且会“跟着鼠标一起跑”；那么实现的思路是1、为目标元素绑定mouseover和mouseout事件，当移入的时 阅读全文

摘要：这是一个真正可定制的jQuery editable plugin。当前它能够将任意不可编辑的标签（span、div、p...等）转换成可编辑的text input、password、textarea、下拉列表（drop-down list）等标签。你可以利用它的editableFactory对象来扩展添加自己所需的input type。 先引入插件的js文件，在页面放置要编辑的文字： <div class="d">编辑的文字</div> 接着就是实现功能了 $(".d").editable(); 很简单吧！要实现更多的效果就要给这 阅读全文

摘要：其实学了这么久的javascript一直都困扰着面向对象编程这个概念，其实虽然我们不理解，但是实际上我们工作的平时，无时无刻不接触者面向对象，并给我们提供了各种便利。 例如我们用的JSON数据传输格式，其实就是一种将数组、字符串、属性、方法 等多种元素融合在一起的东西，比如我们平时编写的function函数，也是一种对象。 其实我们可以这么理解，何为对象？ 1、函数的存在，就是一个相对抽象的可重用性较高的程序模版，那么可以减免，我们在程序中去编写重复的代码，我们可以将 功能相同的部分，编写出一套模版； 2、相对而言的，对象以如此，对象就是一种高度集合的组织方式，我们可以通过继承的方... 阅读全文

摘要：google chart API还是很强大的，在线自动帮你将所需要的数据汇总成，各式各样的图标，折线 饼状 柱状 气泡等等现在已折线稍加说明一下自己通过使用理解的一些配置属性的含义<script type="text/javascript"> google.setOnLoadCallback(drawChartLine); function drawChartLine() { var data = google.visualization.arrayToDataTable([ ['2班学生学号', '年级排名','排名波动 阅读全文

摘要：经常在网上可以看到那种滚动广告，它相对于页面静止，其实实现起来也很简单，只要用利用position:fixed这个属性就可以实现相对静止的效果，但是遗憾的是IE6并不支持这个属性。那么IE6下我们必须使用js的方法来解决它，思路无非就是1、获取页面的滚动高度，每次重新为元素的top值赋值，每次都加上相应的scrollTop值即可。首先我们需要了解几个概念：1、offsetHeight 我们可以简单的理解为元素的固有高度，一个元素形成的时候，浏览器其实已经帮我们计算出了这个盒模型，那么这个offsetHeight就是这个高度2、scrollTop 就是视图的滚动高度，当鼠标滑动的时候，页面会相. 阅读全文

摘要：js中的sort()方法是用于对数组的元素进行排序。先从w3c 复制一下定义：arrayObject.sort(sortby) 其中sortby 如果要加参数必须是一个函数 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。 如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下： 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一. 阅读全文

摘要：语言这东西，感觉就是往深里学才有意思了解每一个方法的特性特征，并学会它适用的场合，那么如果再有一点创新思维和灵感，我们也可以写出很多简约而不简单的代码！ concat比较容易理解就是数组连结，不区分重复性，一切连结到某个数组的后面，例子如下 <script type="text/javascript">//alert(a);//此处会报错，因为它无法访问到内部的a数组(function(){//控制变量作用域 防止全局变量的泛滥 var a=[1,2,3]; document.write(a.concat(4,5));//不区分重复性，一切都连接到a数组之后1, 阅读全文

摘要：最近一直在看js关于面向对象编程方面的东西，那么this肯定是需要一个被吃透 理解 同时灵活运用的对象现在总结一下自己的学习成果：我们可以用一句很形象的话来理解什么是this关键字？"this关键字引用的是 包含它的那个函数 作为某个对象的方法 被调用时所属的那个对象"，this会根据周围的环境改变而改变这句话我用几个空格隔开分开作为理解的标准，下面引入一个实例，具体分析这句话的含义var sound='Roar!';function myOrneryBeast(){ alert(this); this.style.color='green' 阅读全文

摘要：最近做项目，遇到一个问题，需要我能监测按键，控制页面动态生成一个列表，同时列表的内容，需要从后台拿取JSON数据，填充在我前台的代码模板中，同时前台能通过点击，将其中的具体数据，填充到某个需要的空白节点中。用了1个多小时差不多搞定了，但是后来发现一个问题，就是需求不停的变，需要很多地方应用这样的处理模式，当时由于时间比较赶，来不及考虑太多，用了最笨的方法，就是不停的重复复制。但是后来终于静下心来度过了1期的时间关卡后，开始考虑代码的复用，很希望能通过自己编写一个插件，能在不同的地方调用自己所希望要的东西，此意既已萌生，便开始行动....其实根据后来自己编写的一些心得以及研读了不少外国牛人编写的 阅读全文

摘要：jQuery的DataTables插件的使用方法原文地址：http://hi.baidu.com/suyuwen1/item/067bd02d35d6140b42634a51 在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务1、DataTables的默认配置$(document).ready(function() {$(‘#example’).dataTable();} );示例：http://www.guoxk.com/html/DataTables/Zero-configuration.ht 阅读全文