随笔分类 - javascript
javascript
摘要：JavaScript调试技巧之console.log()详解
对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；
alert弹出框需要点击确认比较麻烦，而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑。
最重要的是alert只能输出字符串，不能输出对象里面的结构，console.log()console.log()可以接受任何字符串、数字和JavaScript对象，可以看到清楚的对象属性结构，在ajax返回json数组对象时调试很方便。
阅读全文
摘要：php用jquery-ajax上传多张图片限制图片大小
用filesize函数获取文件大小,filesize这个内置函数不能直接放$fileInputName或者$file['name']，要用$file['tmp_name']，或者直接用$file['size']
上图是打印出来的$file属性
阅读全文
摘要：jquery通过name属性取值的方法
//$("input[name='imgtitle']").val();//这个只能取到第一个的值
//通过each函数取得所有input的值
var titles = "";
$("input[name='imgtitle']").each(function(){
titles += $(this).val()+",";
});
//取textarea的值
var desc = $("textarea[name='imgdesc']").val();
阅读全文
摘要：jQuery上传插件,文件上传测试用例
jQuery File Upload-jQuery上传插件介绍
http://www.jq22.com/jquery-info230
jQuery File Upload-jQuery上传插件demo
http://www.jq22.com/yanshi230
阅读全文
摘要：CasperJS基于PhantomJS抓取页面
Casperjs是基于Phantomjs的，而Phantom JS是一个服务器端的 JavaScript API 的 WebKit。
CasperJS是一个开源的,用JavaScript编写的,基于PhantomJS的导航脚本和测试工具 ,它简化了定义一个完成的导航操作所需的步骤,还提供了很有用的函数封装,方法,和语法糖,它可以完成下面这些常见任务:
阅读全文
摘要：让前端独立于后端进行开发，模拟数据生成器Mock.js
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。
阅读全文
摘要：禁止火狐浏览器缓存input标签方法
问题1：在火狐浏览器里，云平台的输入框、选项框、勾选框…填写之后按F5刷新页面，之前填的东西会保留着，其它浏览器不会
问题2：在网页上用的方式来存储一些变量，值被改变后，按下F5刷新网页，input的值会被Firefox自动还原到刷新前的状态，所以某些时候，一些基于这些值进行的JS事件就无法被初始化。
让Firefox不缓存input值需要进行如下修改：
input加上一个 autocomplete="off" 的属性就能阻止Firefox的默认缓存机制。刷新之后，这些input的值都初始化。
还有一个写法，在form标签里面加上autocomplete="off" 的属性可以把全个表单中所有input都设置为不缓存的：
阅读全文
摘要：Jquery图片上传组件，支持多文件上传
http://www.jq22.com/jquery-info230
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频 。
支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。
http://www.jq22.com/yanshi230
多文件上传也是一个个上传的，关键是在选择的时候让他一次性选择多个
阅读全文
摘要：jquery一句话实现快速搜索功能
//快捷搜索公共方法，其中obj为显示行的子节点
function filter(obj, filterNameValue){
$(obj).hide().filter(":contains('"+(filterNameValue)+"')").show();
}
例如：
onkeyup="filter('table tbody tr', this.value)"
onkeyup="filter('select option', this.value)"
需要到显示的子节点
阅读全文
摘要：百度地图api通过地址显示地图，白名单
阅读全文
摘要：jquery checkbox相关 prop方法
firefox中 checkbox属性checked="checked"已有，但复选框却不显示打钩的原因
复选框绑定了click事件，点一次选中，再点击取消选中，依次类推。
这个功能在ie中没问题，但是在firefox中测试的时候，前两次都没有问题，可以正常显示选中和取消，但当再去选中的时候，复选框的属性checkbox值变为"checked"，没问题，但是复选框却不在显示选中状态，明明属性值改了，但是却不显示勾选。
正解：后来经偶像指点，原来是jQuery版本问题。我操作属性用的是
$("**").attr("attrName");而jQuery的版本用的是1.9，这就是存在一个兼容性和稳定性问题。
jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断，即:
$("input[type='checkbox']").prop("checked");
$("input[type='checkbox']").prop("disabled", false);
阅读全文
摘要：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
但在较复杂的页面上出现问题，间隔，内外边距常困扰开发人员，需要深入源码和文档理解栅格系统才能运用自如。
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
Bootstrap 栅格系统的精妙之处, 通过container, row, column都有15px的padding槽边和 row的margin -15px设置，巧妙实现在 column 中嵌套 row进行nesting 扩展(超过12列)，而不需要再套一层 container
阅读全文
摘要：EasyUI+bootsrtap混合前端框架
用户没有登录前浏览的页面用bootsrtap框架
用户登录进去后的商家管理的用 jQuery EasyUI 1.4.5 框架
商家管理的大部分是表单相关的，用EasyUI比较方便，用户登录前的页面大部分是内容展示页，用响应式的比较友好
这两个结合是最适合我们团队目前人员情况的，在美观，兼容性和开发效率上应该是最优的组合了
阅读全文
摘要：javascript闭包(Module模式)的用途和高级使用方式
javascript闭包的用途：
1. 匿名自执行函数：或者可以理解为，避免污染全局变量
2. 缓存：源于闭包的核心特性便是保存状态，应用此特性便可对需要的变量进行缓存
3. 实现封装：同样可以使用闭包保存状态的特性，充当一个作用域块，将块里面的属性变量至于内存之中来实现封装
4. 闭包的另一个重要用途是实现面向对象中的对象，传统的对象语言都提供类的模板机制：原理同上。
阅读全文
摘要：css去掉a标签点击后的虚线框,outline,this.blur()
1：在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。
测试
2：在a标签里嵌套其他标签，比如span等，把内容放在被嵌套的标签里。这时候点击这个链接，聚焦的是a的子标签，自然不会聚焦在a标签上，所以也能避免这个问题。
3：不适用a标签做链接，采用其他标签，使用js做出hover的效果。
4.在css中加入.xxx a{outline:none;blr:expression(this.onFocus=this.blur());}
阅读全文
摘要：jquery easyUI中combobox的使用总结
一、如何让jquery-easyui的combobox像select那样不可编辑?
为combobox添加editable属性 设置为false
清除火狐缓存记录在不想使用缓存的input 中添加 autocomplete="off" 或者在 input 所在的form 标签中添加 autocomplete="off";
阅读全文
摘要：javascript中的console.log有什么作用？
主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。
相比alert他的优点是：
他能看到结构话的东西，如果是alert，淡出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到
Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…}
它有网页的各种提示。
阅读全文
摘要：在线js调试工具JSbin、jsFiddle
JS Bin - Collaborative JavaScript Debugging
JSbin:在线网站代码调试工具是一个主要用于帮助测试 JavaScript 和 CSS 的代码片段的Web 应用，功能与 jsFiddle 网站一致，拥有简单的操作界面和全面的测试环境。
利用Fiddler的可以修改HTTP数据的特性，我们就非常敏捷地基于生产环境修改并验证，确认后再发布。
阅读全文
摘要：checkbox的readonly不起作用的解决方案
checkbox没有readOnly属性，readonly不起作用
解决方案一: onclick="return false;" checked 让点击无效
解决方案二:disabled="disabled"属性 让checkbox变灰
另：checkbox 如果不给它赋值，则默认值为on
阅读全文
摘要：jquery-easyui combobox combogrid 级联不可编辑实例
如何让jquery-easyui的combobox像select那样不可编辑?
为combobox添加editable属性 设置为false
阅读全文
