极客教程如何在jQuery中自动修复破碎的图片
给定一张图片或一组破损的图片，任务是用jQuery修复所有这些图片。这里有两种方法可以采取。
- 使用jQuery方法，如bind()和attr()。
- 使用jQuery方法，如bind()和hide()。
方法1：使用jQuery方法，如bind()和attr()。
jQuery bind() 方法。这个方法是用来绑定或附加一个或多个事件处理程序的元素/元素对应的特定选择器。
语法:
$(selector).bind(event, eventData, func);
参数：它接受三个参数，详细解释如下。
- event。一个字符串，包含一个或多个事件类型，如 “点击”、”按键”。
- eventData。一个包含数据的对象，然后可以在选定的元素上传递。
- func:一个事件处理程序，在选定的元素上执行。
jQuery attr() 方法。这个方法是用来设置或获取与特定选择器相对应的元素/元素的属性。
语法:
- 要返回属性值。
$(selector).attr(myAttribute);
- 要设置该属性的值。
$(selector).attr(myAttribute, val);
- 要用一个函数来设置属性的值。
$(selector).attr(myAttribute, function(i, curValue));
- 要设置多个属性。
$(selector).attr({attr1: val1, attr2: val2, ...});
参数：它接受以下参数，详细解释如下。
- myAttribute。设置属性的名称。
- val: 设置属性的值。
- function(i, curValue)。构建一个函数，返回要设置的属性值。
- i：收到的元素的索引位置。
- curValue。选定元素的当前属性值。
例子：在下面的例子中，有三张图片，其中一张包含一个破碎的统一资源定位器（或URL）。如果在加载图片（本例中为中间的图片）时出现错误，则将错误事件绑定到任何一张图片上。现在，更新图像的src属性，使其指向网络上的一个新图像。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/
20190710102234/download3.png" alt="GeeksForGeeks Logo Green" />
<!-- Broken image -->
<img src="https://media.geeksforgeeks.org/content/1.png" />
<img src="https://media.geeksforgeeks.org/wp-content/
uploads/20210915115837/gfg3-300x300.png"
alt="GeeksForGeeks Logo White" />
<script type="text/javascript">
("img").bind("error", function (e) {
varthis = (this);
(this).attr("src","https://media.geeksforgeeks.org/wp-content/"+
"uploads/20220208183723/responsive1-295x300.png");
});
</script>
</body>
</html>
输出:
Without jQuery:
With jQuery:
方法2：使用jQuery方法，如bind()和hide()。
jQuery hide() 方法。这个方法是用来隐藏特定选择器对应的元素。
语法:
$(selector).hide(duration, easing, callFunc);
参数：它接受三个参数，具体如下。
- duration。设置隐藏效果的速度。
- easing。在不同的点设置元素的速度。
- callFunc。一个回调函数，将在隐藏操作后执行。
例子：这个例子与前面的例子相同，但不同的是，我们不是更新破损图片的src属性，而是隐藏图片（类似于CSS中的display: none;）。
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- Broken image -->
<img src="https://media.geeksforgeeks.org/content/2.png" />
<img src="https://media.geeksforgeeks.org/wp-content/
cdn-uploads/20190710102234/download3.png"
alt="GeeksForGeeks Logo Green" />
<img src="https://media.geeksforgeeks.org/wp-content/
uploads/20210915115837/gfg3-300x300.png"
alt="GeeksForGeeks Logo White" />
<script type="text/javascript">
("img").bind("error", function (e) {
(this).hide();
});
</script>
</body>
</html>
输出:
Without jQuery:
With jQuery:
