大家好。
有一个HTML代码:
<h3 class="title"><a href="http://www.site.com/bla0">Title Test</a></h3>
<img width="550" height="550" src="http://www.site.com/images/image_test1-550x550.jpg" alt="Test Imgage 1" />
<h3 class="title"><a href="http://www.site.com/bla1">Title Test</a></h3>
<img width="550" height="550" src="http://www.site.com/images/image_test2-550x550.jpg" alt="Test Imgage 2" />
一个任务。加载页面时,将src标签中的文字550x550替换为300x200 接下来需要将宽高分别替换为300和200
结果应该是这样的:
<h3 class="title"><a href="http://www.site.com/bla0">Title Test</a></h3>
<img width="300" height="200" src="http://www.site.com/images/image_test1-300x200.jpg" alt="Test Imgage 1" />
按照我的理解,逻辑应该是这样的,我们找到title类,然后寻找它后面的img元素,找到它的src并进行替换。但是如何在页面加载时执行所有这些操作呢?我能做的最多的就是这个
$('title').next().each(function() {
var test = $(this).find('img').attr('src').replace("550x550","300x200");
alert(test);
});
但据我了解,事件应该在页面加载之前发送,这样图像就已经从 300x200 加载了,即使 put 而不是 var test, return,它仍然没有替换,我不明白为什么(我刚开始学习js)很有意思,但是有些点不是很清楚。
我也想知道这个方法有没有什么坑?使用浏览器时?
谢谢
.each()
计算新的属性值。(感谢@Grundy的科学知识。)应该在就绪事件上运行。此时,DOM 结构已经生成,但是还没有加载图片。
.replace 函数替换字符串中的文本,但不替换属性中的文本。必须先将 src 属性获取为字符串,将其转换,然后将其写回,将其指定为.attr()的第二个参数。