jquery div

jQuery 操作 div 元素

jQuery 提供了多种方法来操作 div 元素，包括选择、修改内容、样式调整、事件绑定等。以下是常见操作的示例：

选择 div 元素

通过 ID 选择 div：

$('#divId')

通过类名选择 div：

$('.divClass')

通过标签名选择所有 div：

$('div')

修改 div 内容

设置 div 的 HTML 内容：

$('#divId').html('<p>New content</p>')

设置 div 的文本内容：

$('#divId').text('New text content')

修改 div 样式

添加 CSS 类：

$('#divId').addClass('newClass')

移除 CSS 类：

$('#divId').removeClass('oldClass')

直接修改 CSS 属性：

$('#divId').css('color', 'red')

事件绑定

绑定点击事件：

$('#divId').click(function() {
    alert('Div clicked!')
})

绑定鼠标悬停事件：

$('#divId').hover(
    function() {
        $(this).css('background-color', 'yellow')
    },
    function() {
        $(this).css('background-color', 'white')
    }
)

动态创建和添加 div

创建新的 div 元素：

var newDiv = $('<div>', {
    id: 'newDiv',
    class: 'box',
    text: 'This is a new div'
})

将新 div 添加到页面：

$('body').append(newDiv)

动画效果

显示/隐藏 div：

$('#divId').toggle()

淡入淡出效果：

$('#divId').fadeIn()
$('#divId').fadeOut()

滑动效果：

$('#divId').slideUp()
$('#divId').slideDown()