当前位置：首页 > jquery

jquery img

2026-03-02 14:06:47jquery

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')

动态加载图片

可以通过事件触发动态加载图片：

jquery img

// 点击按钮时更换图片
$('#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)
})

图片懒加载

实现图片懒加载以优化页面性能：

jquery img

$(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 操作图片元素的常见需求，包括选择、修改属性、动态加载、错误处理以及添加动画效果等。