【译】jQuery延迟加载插件(Lazy Load)

2012-01-17 4 Comments

最新版本的Lazy Load并不能替代你的网页。即便你使用JavaScript移除了图片的src属性，有些现代的浏览器仍然会加载图片。现在你必须修改你的html代码，使用占位图片作为img标签的src属性。真实的图片地址应该存储在data-original属性中。 <img data-original="img/example.jpg" src="img/grey.gif"> 好处是现在你可以把你所有的JavaScript脚本放在页面的底部。如果你想支持没有启用JavaScript的浏览器，你必须在<noscript>标签内包含原始图像。阅读下面的文档获取更多信息。 Lazy Load 是用JavaScript编写的jQuery插件。它会延迟长页面中的图片加载。可视区域外的图片在用户滚动到他们之前不会加载。这与图片预加载(image preloading)是截然相反的情况。 在包含很多大体积图片的长页面中使用Lazy Load，会使加快页面的载入速度。当可视区域的图片加载完成后，浏览器将会处于准备状态。在一些情况下，这也会帮助服务器降低负载。 Lazy Load 灵 » » »阅读更多

模拟HTML5文本框的placeholder属性

2011-09-14 No Comments

不支持placeholder属性的浏览器用jQuery库模拟。 包裹文本框的外层容器加上.placeholder类，有效率地获取对应元素。 if (!('placeholder' in document.createElement('input'))) { $('.placeholder').find('input[placeholder], textarea[placeholder]').each(function(k, v) { var $obj = $(v), val = $obj.val(), placeholder = $obj.attr('placeholder'); if (val == '') { $obj.val(placeholder); } $obj.focus(function() { if ($obj.val() === placeholder) { $obj.val(''); } }).blur(function() { val = $obj.val(); if (val == '' || val == placeholder) { $obj.val(placeholder); } }); }); } 查看演示 阅读更多

jQuery资源收集

2011-08-24 No Comments

JQuery最佳实践 关于使用jQuery时的最佳实践。使用最新版本的jQuery库，优化选择器查询，尽可能使用javascript原生的方法，缓存查询后的jQuery对象，使用实践委托，减少修改DOM次数等。 JQuery设计思想 基础的jQuery使用方式，jQuery的一些设计思想。如果有javascript基础可迅速掌握，或许不了解javascript童鞋还是要读读《jQuery基础教程》。 阅读更多

jQuery 属性选择器

2010-08-14 No Comments

$(‘[name|=value]‘) 匹配属性值为value或value-形式的元素 $(‘[name*=value]‘) 匹配属性值包含value字符的元素 $(‘[name~=value]‘) 匹配属性值包含value(value为独立的字符串)字符的元素,例如(id=”box1 box2 box3″) $(‘[name$=value]‘) 匹配给定的属性以指定值结尾的元素 $(‘[name=value']) 匹配给定的属性为指定值的元素 $(‘[name!=value]‘) 匹配给定的属性不包括指定值的元素 $(‘[name^=value]‘) 匹配给定的属性以指定值开头的元素 $(‘[name]‘) 匹配拥有给定属性的元素，例如某个元素拥有id属性(<div id=”"></div>) $(‘[name1=value1][name2=value2']) 匹配多组属性 阅读更多

jQuery基本选择器

2010-07-21 No Comments

基本选择器封装了JavaScript提供的操作DOM的本地函数。比如getElementById()，getElementsByTagName()，或者特定JS引擎所提供的getElementsByClassName()函数。利用jQuery提供的这些选择器可以快速地获取操纵指定的元素。 * $(‘*’) 获取文档中的所有元素(包括html, head, body, etc)。 $('*') $('#all *') id="all"的所有后代元素 #id $(‘#id’) 根据指定的ID属性匹配一个元素。也可以结合CSS选择器的规则获取元素。 $('#id') $('#id_1, #id_2') id="id_1"和id="id_2"的元素 $('#id_1 #id_2') id="id_1"的元素包含id="id_2"的元素 element $(‘element’) 根据给定的元素名获取所有元素 $('div') .class $(‘.class’) 根据给定的类名获取所有元素(多个元素可以拥有相同的类名，一个元素可以有多个类名) $('.class') $(‘selector1, selector2, selectorN’) 合并给定选择器的结果并返回，sele » » »阅读更多