20
3 月
2014
当我们要显示后台传过来若干个尺寸不一的图片时，为了保证图片大小的一致性及比例的协调，需要动态改变图片显示尺寸。通过搜索，我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持在一定范围内，如果图片的原始尺寸都大于max*值，则显示出来的图片宽度都相等。
原始代码：
01 |
$(document).ready(function() { |
02 |
$('.post img').each(function() { |
03 |
var maxWidth = 100; // 图片最大宽度 |
04 |
var maxHeight = 100; // 图片最大高度 |
05 |
var ratio = 0; // 缩放比例 |
06 |
var width = $(this).width(); // 图片实际宽度 |
07 |
var height = $(this).height(); // 图片实际高度 |
11 |
ratio = maxWidth / width; // 计算缩放比例 |
12 |
$(this).css("width", maxWidth); // 设定实际显示宽度 |
13 |
height = height * ratio; // 计算等比例缩放后的高度 |
14 |
$(this).css("height", height); // 设定等比例缩放后的高度 |
18 |
if(height > maxHeight){ |
19 |
ratio = maxHeight / height; // 计算缩放比例 |
20 |
$(this).css("height", maxHeight); // 设定实际显示高度 |
21 |
width = width * ratio; // 计算等比例缩放后的高度 |
22 |
$(this).css("width", width * ratio); // 设定等比例缩放后的高度 |
在我的js代码中，也采取了这种写法。然而在不同的浏览器测试效果时，发现此种写法不能适应chrome浏览器（chrome版本号为10.0.648.204），会产生图片以原有尺寸显示出来的bug。后来把$(‘.post img’).each()的代码用$(window).load()方法包装起来，就解决了chrome浏览器显示不正确的问题。那么在chrome浏览器中为什么会产生bug，并且$(document).ready和$(window).load有什么区别呢？
原来document ready事件是在HTML文档载入即DOM准备好就开始执行了，即使图片资源还没有加载进来。而window load事件执行的稍晚一些，它是在整个页面包括frames, objects和images都加载完成后才开始执行的。从这种区别可以分析出chrome浏览器在对于图片不采用$(window).load()方法处理时，图片载入与动态改变图片的js代码执行顺序不确定。
关于上面的代码,放到我的页面中时获取图片高度时会报错,提示没有提供width方法：
1 |
var width = $(this).width(); // 图片实际宽度 |
2 |
var height = $(this).height(); // 图片实际高度 |
故修改代码如下：
01 |
jQuery(window).load(function () { |
02 |
jQuery("div.product_info img").each(function () { |
03 |
DrawImage(this, 680, 1000); |
06 |
function DrawImage(ImgD, FitWidth, FitHeight) { |
07 |
var image = new Image(); |
09 |
if (image.width > 0 && image.height > 0) { |
10 |
if (image.width / image.height >= FitWidth / FitHeight) { |
11 |
if (image.width > FitWidth) { |
12 |
ImgD.width = FitWidth; |
13 |
ImgD.height = (image.height * FitWidth) / image.width; |
15 |
ImgD.width = image.width; |
16 |
ImgD.height = image.height; |
19 |
if (image.height > FitHeight) { |
20 |
ImgD.height = FitHeight; |
21 |
ImgD.width = (image.width * FitHeight) / image.height; |
23 |
ImgD.width = image.width; |
24 |
ImgD.height = image.height; |
11
3 月
2014
JQuery
常用模拟
有时候，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。
在JQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。
1 |
$('#btn').trigger("click"); |
这样，当页面加载完毕后，就会立刻输出想要的效果。也可以直接简写click()，来达到同样的效果：
触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件，JQuery代码如下：
1 |
$('#btn').bind("myClick", function(){ |
2 |
$('#test').append("<p>我的自定义事件.</p>"); |
想要触发这个事件，可以使用以下代码来实现：
1 |
$('#btn').trigger("myClick"); |
传递数据
trigger(type[，data])方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
下面是一个传递数据的例子。
2 |
$('#btn').bind("myClick", function(event, message1, message2){ |
3 |
$('#test').append( "<p>"+message1 + message2 +"</p>"); |
5 |
$('#btn').click(function(){ |
6 |
$(this).trigger("myClick",["我的自定义","事件"]); |
7 |
}).trigger("myClick",["我的自定义","事件"]); |
执行默认操作
trigger()方法触发事件后，会执行浏览器默认操作。例如：
1 |
$("input").trigger("focus"); |
以上代码不仅会触发为<input>元素绑定的focus事件，也会使<input>元素本身得到焦点（这是浏览器的默认操作）。
如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。
1 |
$("input").triggerHandler("focus"); |
该方法会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，不会得到焦点。