jquery img
jQuery 操作图片（img）元素的方法
jQuery 提供了多种方法来操作和修改 HTML 中的 <img> 元素。以下是常见的几种操作方式：
选择图片元素
使用 jQuery 选择器可以轻松选取 <img> 元素：
// 选择所有图片
$('img')
// 选择特定类名的图片
$('img.some-class')
// 选择特定属性的图片（如 alt 属性）
$('img[alt="description"]')修改图片属性
可以通过 .attr() 方法修改图片的 src、alt 等属性：
// 修改图片的 src 属性
$('img').attr('src', 'new-image.jpg')
// 修改 alt 属性
$('img').attr('alt', 'New description')
// 获取图片的 src 属性
var imgSrc = $('img').attr('src')动态加载图片
可以通过事件触发动态加载图片：
// 点击按钮时更换图片
$('#change-btn').click(function() {
$('img').attr('src', 'another-image.jpg')
})图片预加载
预加载图片可以提升用户体验：
var image = new Image()
image.src = 'large-image.jpg'
$(image).on('load', function() {
$('img').attr('src', image.src)
})图片懒加载
实现图片懒加载以优化页面性能：
$(window).scroll(function() {
$('img.lazy').each(function() {
if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
$(this).attr('src', $(this).data('src'))
$(this).removeClass('lazy')
}
})
})图片加载错误处理
处理图片加载失败的情况：
$('img').on('error', function() {
$(this).attr('src', 'placeholder.jpg')
})图片动画效果
使用 jQuery 动画为图片添加效果：
// 淡入效果
$('img').hide().fadeIn(1000)
// 悬停放大效果
$('img').hover(
function() { $(this).css('transform', 'scale(1.1)') },
function() { $(this).css('transform', 'scale(1)') }
)响应式图片处理
根据窗口大小调整图片：
$(window).resize(function() {
$('img.responsive').each(function() {
if ($(window).width() < 768) {
$(this).attr('src', 'mobile-image.jpg')
} else {
$(this).attr('src', 'desktop-image.jpg')
}
})
})这些方法涵盖了 jQuery 操作图片元素的常见需求，包括选择、修改属性、动态加载、错误处理以及添加动画效果等。
