随笔分类 - jQuery
摘要：更好地使用jQuery，这里总结了8个小技巧。 1、DOM遍历是昂贵的，将变量缓存起来。 //不推荐var h = $('#ele').height();$('#ele').css('height', h-20); //推荐var $ele = $('#ele');var h = $ele.height();$ele.css('height',h-20); 2、尽可能地合并函数。 ...
阅读全文
摘要：对于刚创建的元素，使用jQuery的each方法，有时候会不起作用。解决方案大致有2种： 1、刚创建完的时候，就使用each方法 $('#btn').on("click", function(){ $('#div').append(""); $("input").each(function(){ //TODO: });
}); 2、页面加载完毕...
阅读全文
摘要：在很多电商网站中，在购物车所在页面，涉及到商品数量的时候，都会提供一个+号按钮和-号按钮来实现增1和减1，并且只允许input中输入数值。Bootstrap TouchSpin这款插件就是针对此需求而写。 首先引入必要的css和js文件。 □ 控制数值的精度和自增自减量 ...
阅读全文
摘要：有这样的一个需求：对于一组checkbox，当点击每个checkbox后，把当前处于选中状态的checkbox的某个属性值取出来连接成字符串，并以逗号分开。 html部分： 选项一 选项二 选项三 jQuery部分，给每个checkbox定义点击事件，遍历所有选中的checkbox。 ...
阅读全文
摘要：在客户端上传文件，通常需要限制文件的尺寸和格式，最常用的做法是使用某款插件，一些成熟的插件的确界面好看，且功能强大，但美中不足的是：有时候会碰到浏览器兼容问题。本篇就来写一个"原生态"的jQuery插件，使之能限制上传文件的大小和格式。 首先，写一个名称为checkFileTypeAndSize.js的插件。通过判断当前文件的后缀名是否被包含在预先设置所允许的后缀名数组中，来限制文件格式；通过...
阅读全文
摘要：对于现代浏览器(支持html5)来说，在客户端统计上传文件的大小，可以通过$(selector)[0].files[0].size来实现。但在老版本的IE浏览器中，比如IE7,IE8或IE9，却不支持这种做法，但可以借助ActiveXObject对象来实现。 @section scripts
{ } 另外，在IE中启用ActiveXObject按如下做法：
→工具→Intern...
阅读全文
摘要：本篇实践一个多层模态窗口，而且是自适应的。 点击页面上的一个按钮，弹出第一层自适应模态窗口。 在第一层模态窗口内包含一个按钮，点击该按钮弹出第二层模态窗口，弹出的第二层模态窗口会挡住第一层模态窗口，即第二层模态窗口打开的时候，无法关闭第一层模态窗口。 具体页面实现部分如下： ...
阅读全文
摘要：ASP.NET MVC借助jQuery的验证机制，提供了一套从客户端到服务端异步验证的解决方案，通常情况下，用起来相当方便。但面对一些相对特殊的情况，可能会遇到验证失效的场景，比如在使用ajax动态异步加载视图的时候。所以，有必要了解其背后运行的原理。首先从了解jQuery验证开始。本篇主要包括： ● jQuery验证的各种方式● 错误信息是如何显示的● 调用validate方法的背后发生了什...
阅读全文
摘要：在jQuery中，on方法可以为元素绑定事件，trigger方法可以手动触发事件，围绕这2个方法，我们来体验jQuery中的观察者模式(Observer Pattern)。 ■ on方法绑定内置事件，自然触发 比如，我们给页面的body元素绑定一个click事件，这样写。 hello以上，我们只有点击body，才能触发click事件。也就是说，当给页面元素绑定内置...
阅读全文
摘要：jQuery异步获取json数据有2种方式，一个是$.getJSON方法，一个是$.ajax方法。本篇体验使用这2种方式异步获取json数据，然后追加到页面。 在根目录下创建data.json文件：{ "one" : "Hello", "two" : "World"}■ 通过$.getJSON方法获取json数据 ■ 通过$.ajax方法获取json数据 ...
阅读全文
摘要：本篇体验使用jQuery制作水平的、多级的、下拉菜单。 下拉菜单的html部分如下。 主页 产品 服务 网页设计 图形设计 视频制作 ...
阅读全文
摘要：6、实用函数 ● 修剪字符串$('#id').val($.trim($('#someid').val()))● 遍历集合可能这样写：var anArray = ['one','two'];for(var n = 0; n 3;})console.log(arr);//结果是：4 5 6如果把grep的第三个参数显式地设置为true，结果怎样呢？var arr = [1, 2, 3, 4, 5, ...
阅读全文
摘要：5、动画特效 ● 自制折叠内容块 内容块如下 标题 近日，《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧，恒大统治力比上赛季下降了很多，恒大外援存在位置重叠的问题，客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大...
阅读全文
摘要：4、事件 ● 通过方法名给元素绑定事件：$('li').click(function(event){})● 通过bind方法给元素绑定事件：$('li') .bind('click',function(event){}) .bind('click',function(event){}) 可见，通过bind，可以给元素绑定多个事件。● 事件的命名空间为什么需要事件命名空间？→假设，先给l...
阅读全文
摘要：1、基础 jquery对象集： $()：jquery对象集合 获取jquery对象集中的元素： 使用索引获取包装器中的javascript元素：var temp = $('img[alt]')[0] 使用jquery的get方法获取jquery对象集中的javascript元素：var temp = $('img[alt]').get(0) 使用jquery的eq方法获取jquer...
阅读全文
摘要：本篇的标题虽然是"jQuery闭包之浅见..."，但实际上本篇涉及的多半是javascript"闭包"相关内容，之所以写这个标题，完全是因为自己平常用jQuery写前端习惯了。还有一个原因是：javascript"闭包"很容易造成"内存泄漏", 而jQuery已经自动为我们规避、处理了由"闭包"引发...
阅读全文
摘要：□ 实现Accordion高度一致 Index 世界杯第一天 在揭幕战中，巴西队将在圣保罗迎战克罗地亚队。 世界杯第二天 今天的焦点之战是上届世界冠军巴西队将在萨尔瓦多对战"无冕之王"荷兰队。此外，...
阅读全文
摘要：!!是逻辑"非非"，即是在逻辑“非”的基础上再"非"一次。通过!或!!可以将很多类型转换成bool类型，再做其它判断。 应用场景：判断一个对象是否存在 假设有这样一个json对象：{ color: "#E3E3E3", "font-weight": "bold" }，需要判断是否存在，用!!再好不过。 如果仅仅打印对象，无法判断是否存在： var temp ...
阅读全文
摘要：var str = "我有一头小毛驴，我从来也不骑"; 1、打印出某索引位置上的字符 //结果：毛 alert(str.charAt(5)); 2、打印出某索引位置上的Unicode字符 //结果：27611 alert(str.charCodeAt(5)); 3、串联字符串 var str1 = "有一天我心血来潮，骑着去赶集"; al...
阅读全文
摘要：页面部分： 点我 □ 方法一： attr('checked')返回undefined，不推荐使用 1: 无论是否勾选，都返回undefined： □ 方法二：prop('checked')返回true或false，可使用 1: $(function() { 2: $('#bt...
阅读全文
