垦荒学园

简体中文

English

简体中文

English

切换主题

jQuery DOM 操作 ​

DOM（Document Object Model）操作是 jQuery 的核心功能之一。通过 jQuery，我们可以轻松地选择、创建、修改和删除 HTML 元素。本章将详细介绍如何使用 jQuery 进行各种 DOM 操作。

获取和设置元素内容 ​

1. text() 方法 ​

获取或设置元素的文本内容（不包含 HTML 标签）：

javascript
// 获取文本内容
var text = $('#myElement').text();

// 设置文本内容
$('#myElement').text('新的文本内容');

// 使用函数设置文本内容
$('#myElement').text(function(index, currentText) {
    return '元素 ' + index + ' 的新文本: ' + currentText;
});

2. html() 方法 ​

获取或设置元素的 HTML 内容（包含 HTML 标签）：

javascript
// 获取 HTML 内容
var html = $('#myElement').html();

// 设置 HTML 内容
$('#myElement').html('<strong>新的 HTML 内容</strong>');

// 使用函数设置 HTML 内容
$('#myElement').html(function(index, currentHtml) {
    return '<em>元素 ' + index + ' 的新 HTML: ' + currentHtml + '</em>';
});

3. val() 方法 ​

获取或设置表单元素的值：

javascript
// 获取表单元素的值
var value = $('#myInput').val();

// 设置表单元素的值
$('#myInput').val('新的值');

// 获取复选框的选中状态
var isChecked = $('#myCheckbox').val();

// 获取下拉列表的选中值
var selectedValue = $('#mySelect').val();

属性操作 ​

1. attr() 方法 ​

获取或设置元素的属性：

javascript
// 获取属性值
var title = $('#myElement').attr('title');

// 设置属性值
$('#myElement').attr('title', '新的标题');

// 设置多个属性
$('#myElement').attr({
    'title': '新的标题',
    'class': 'newClass',
    'data-id': '123'
});

// 使用函数设置属性值
$('#myElement').attr('title', function(index, currentValue) {
    return '元素 ' + index + ' 的新标题: ' + currentValue;
});

2. removeAttr() 方法 ​

删除元素的属性：

javascript
// 删除单个属性
$('#myElement').removeAttr('title');

// 删除多个属性
$('#myElement').removeAttr('title class data-id');

3. prop() 方法 ​

获取或设置元素的属性（推荐用于布尔属性）：

javascript
// 获取属性值
var checked = $('#myCheckbox').prop('checked');

// 设置属性值
$('#myCheckbox').prop('checked', true);

// 设置多个属性
$('#myElement').prop({
    'disabled': true,
    'readonly': true
});

4. removeProp() 方法 ​

删除元素的属性：

javascript
// 删除属性
$('#myElement').removeProp('propertyName');

CSS 类和样式操作 ​

1. addClass() 方法 ​

为元素添加 CSS 类：

javascript
// 添加单个类
$('#myElement').addClass('newClass');

// 添加多个类
$('#myElement').addClass('class1 class2 class3');

// 使用函数添加类
$('#myElement').addClass(function(index, currentClass) {
    return 'class-' + index;
});

2. removeClass() 方法 ​

从元素中移除 CSS 类：

javascript
// 移除单个类
$('#myElement').removeClass('oldClass');

// 移除多个类
$('#myElement').removeClass('class1 class2');

// 移除所有类
$('#myElement').removeClass();

// 使用函数移除类
$('#myElement').removeClass(function(index, currentClass) {
    return currentClass === 'toBeRemoved' ? 'toBeRemoved' : '';
});

3. toggleClass() 方法 ​

切换元素的 CSS 类：

javascript
// 切换类
$('#myElement').toggleClass('highlight');

// 切换多个类
$('#myElement').toggleClass('class1 class2');

// 根据条件切换类
$('#myElement').toggleClass('highlight', someCondition);

// 使用函数切换类
$('#myElement').toggleClass(function(index, currentClass, state) {
    return 'class-' + index;
});

4. hasClass() 方法 ​

检查元素是否包含指定的 CSS 类：

javascript
// 检查是否包含类
if ($('#myElement').hasClass('highlight')) {
    console.log('元素包含 highlight 类');
}

5. css() 方法 ​

获取或设置元素的 CSS 样式：

javascript
// 获取单个 CSS 属性
var color = $('#myElement').css('color');

// 获取多个 CSS 属性
var styles = $('#myElement').css(['color', 'font-size', 'background-color']);

// 设置单个 CSS 属性
$('#myElement').css('color', 'red');

// 设置多个 CSS 属性
$('#myElement').css({
    'color': 'red',
    'font-size': '16px',
    'background-color': '#f0f0f0'
});

// 使用函数设置 CSS 属性
$('#myElement').css('font-size', function(index, currentValue) {
    return parseInt(currentValue) * 1.2 + 'px';
});

元素尺寸和位置 ​

1. width() 和 height() 方法 ​

获取或设置元素的宽度和高度：

javascript
// 获取宽度和高度
var width = $('#myElement').width();
var height = $('#myElement').height();

// 设置宽度和高度
$('#myElement').width(200);
$('#myElement').height(100);

// 设置宽度和高度（使用字符串）
$('#myElement').width('50%');
$('#myElement').height('auto');

// 使用函数设置尺寸
$('#myElement').width(function(index, currentWidth) {
    return currentWidth + 50;
});

2. innerWidth() 和 innerHeight() 方法 ​

获取或设置元素的内部宽度和高度（包含 padding）：

javascript
// 获取内部宽度和高度
var innerWidth = $('#myElement').innerWidth();
var innerHeight = $('#myElement').innerHeight();

// 设置内部宽度和高度
$('#myElement').innerWidth(200);
$('#myElement').innerHeight(100);

3. outerWidth() 和 outerHeight() 方法 ​

获取或设置元素的外部宽度和高度（包含 padding 和 border）：

javascript
// 获取外部宽度和高度
var outerWidth = $('#myElement').outerWidth();
var outerHeight = $('#myElement').outerHeight();

// 获取外部宽度和高度（包含 margin）
var outerWidthWithMargin = $('#myElement').outerWidth(true);
var outerHeightWithMargin = $('#myElement').outerHeight(true);

// 设置外部宽度和高度
$('#myElement').outerWidth(200);
$('#myElement').outerHeight(100);

DOM 元素操作 ​

1. 创建元素 ​

使用 jQuery 创建新的元素：

javascript
// 创建简单的元素
var $div = $('<div>');

// 创建带有内容的元素
var $p = $('<p>这是一个段落</p>');

// 创建带有属性的元素
var $input = $('<input type="text" class="form-control" placeholder="请输入内容">');

// 创建复杂的元素结构
var $complex = $('<div class="container"><h2>标题</h2><p>内容</p></div>');

2. 插入元素 ​

append() 方法 ​

在元素内部的末尾插入内容：

javascript
// 在元素内部末尾插入内容
$('#myElement').append('<p>新段落</p>');

// 插入现有元素
$('#myElement').append($('#anotherElement'));

// 插入多个内容
$('#myElement').append('<p>段落1</p>', '<p>段落2</p>');

prepend() 方法 ​

在元素内部的开头插入内容：

javascript
// 在元素内部开头插入内容
$('#myElement').prepend('<p>新段落</p>');

// 插入现有元素
$('#myElement').prepend($('#anotherElement'));

after() 方法 ​

在元素后面插入内容：

javascript
// 在元素后面插入内容
$('#myElement').after('<p>新段落</p>');

// 插入现有元素
$('#myElement').after($('#anotherElement'));

before() 方法 ​

在元素前面插入内容：

javascript
// 在元素前面插入内容
$('#myElement').before('<p>新段落</p>');

// 插入现有元素
$('#myElement').before($('#anotherElement'));

3. 删除元素 ​

remove() 方法 ​

删除元素及其所有子元素和事件：

javascript
// 删除元素
$('#myElement').remove();

// 根据条件删除元素
$('p').remove('.highlight');

// 删除元素但保留数据和事件
$('#myElement').remove('.temp');

detach() 方法 ​

删除元素但保留数据和事件：

javascript
// 删除元素但保留数据和事件
var $element = $('#myElement').detach();

// 稍后重新插入元素
$('body').append($element);

empty() 方法 ​

清空元素的内容：

javascript
// 清空元素内容
$('#myElement').empty();

4. 替换元素 ​

replaceWith() 方法 ​

替换元素：

javascript
// 替换元素
$('#myElement').replaceWith('<p>新的内容</p>');

// 使用现有元素替换
$('#myElement').replaceWith($('#anotherElement'));

replaceAll() 方法 ​

替换所有匹配的元素：

javascript
// 替换所有匹配的元素
$('<p>新的内容</p>').replaceAll('.oldClass');

元素遍历 ​

1. 父元素遍历 ​

parent() 方法 ​

获取直接父元素：

javascript
// 获取直接父元素
var $parent = $('#myElement').parent();

// 根据选择器获取父元素
var $specificParent = $('#myElement').parent('.container');

parents() 方法 ​

获取所有祖先元素：

javascript
// 获取所有祖先元素
var $parents = $('#myElement').parents();

// 根据选择器获取祖先元素
var $specificParents = $('#myElement').parents('.container');

parentsUntil() 方法 ​

获取到指定元素为止的所有祖先元素：

javascript
// 获取到指定元素为止的所有祖先元素
var $parentsUntil = $('#myElement').parentsUntil('.container');

2. 子元素遍历 ​

children() 方法 ​

获取直接子元素：

javascript
// 获取所有直接子元素
var $children = $('#myElement').children();

// 根据选择器获取直接子元素
var $specificChildren = $('#myElement').children('.item');

find() 方法 ​

获取所有后代元素：

javascript
// 获取所有后代元素
var $descendants = $('#myElement').find('*');

// 根据选择器获取后代元素
var $specificDescendants = $('#myElement').find('.item');

3. 兄弟元素遍历 ​

siblings() 方法 ​

获取所有兄弟元素：

javascript
// 获取所有兄弟元素
var $siblings = $('#myElement').siblings();

// 根据选择器获取兄弟元素
var $specificSiblings = $('#myElement').siblings('.item');

next() 方法 ​

获取下一个兄弟元素：

javascript
// 获取下一个兄弟元素
var $next = $('#myElement').next();

// 根据选择器获取下一个兄弟元素
var $specificNext = $('#myElement').next('.item');

nextAll() 方法 ​

获取后面的所有兄弟元素：

javascript
// 获取后面的所有兄弟元素
var $nextAll = $('#myElement').nextAll();

// 根据选择器获取后面的所有兄弟元素
var $specificNextAll = $('#myElement').nextAll('.item');

nextUntil() 方法 ​

获取到指定元素为止的后面所有兄弟元素：

javascript
// 获取到指定元素为止的后面所有兄弟元素
var $nextUntil = $('#myElement').nextUntil('.stop');

prev() 方法 ​

获取上一个兄弟元素：

javascript
// 获取上一个兄弟元素
var $prev = $('#myElement').prev();

// 根据选择器获取上一个兄弟元素
var $specificPrev = $('#myElement').prev('.item');

prevAll() 方法 ​

获取前面的所有兄弟元素：

javascript
// 获取前面的所有兄弟元素
var $prevAll = $('#myElement').prevAll();

// 根据选择器获取前面的所有兄弟元素
var $specificPrevAll = $('#myElement').prevAll('.item');

prevUntil() 方法 ​

获取到指定元素为止的前面所有兄弟元素：

javascript
// 获取到指定元素为止的前面所有兄弟元素
var $prevUntil = $('#myElement').prevUntil('.stop');

克隆元素 ​

clone() 方法 ​

克隆元素：

javascript
// 克隆元素（不包含事件和数据）
var $clone = $('#myElement').clone();

// 克隆元素（包含事件和数据）
var $cloneWithData = $('#myElement').clone(true);

// 将克隆的元素插入到页面中
$('body').append($clone);

完整示例 ​

以下是一个展示 jQuery DOM 操作的完整示例：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery DOM 操作示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container {
            border: 1px solid #ccc;
            padding: 20px;
            margin: 10px 0;
        }
        .highlight {
            background-color: yellow;
        }
        .new-class {
            color: red;
            font-weight: bold;
        }
        .item {
            margin: 5px 0;
            padding: 5px;
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
    <h1>jQuery DOM 操作示例</h1>
    
    <div class="container">
        <h2>内容操作</h2>
        <p id="textContent">这是原始文本内容</p>
        <div id="htmlContent">这是包含 <strong>HTML</strong> 的内容</div>
        <input type="text" id="inputValue" value="原始值">
        <button id="updateContent">更新内容</button>
    </div>
    
    <div class="container">
        <h2>属性操作</h2>
        <div id="attrElement" title="原始标题" class="old-class">属性操作示例</div>
        <button id="updateAttr">更新属性</button>
    </div>
    
    <div class="container">
        <h2>CSS 类和样式操作</h2>
        <div id="styleElement">CSS 操作示例</div>
        <button id="updateStyle">更新样式</button>
    </div>
    
    <div class="container">
        <h2>元素插入和删除</h2>
        <div id="insertContainer">
            <p>原始段落</p>
        </div>
        <button id="addElement">添加元素</button>
        <button id="removeElement">删除元素</button>
    </div>
    
    <div class="container">
        <h2>元素遍历</h2>
        <div class="parent">
            <div class="child">子元素 1</div>
            <div class="child">子元素 2</div>
            <div class="child">子元素 3</div>
        </div>
        <button id="traverse">遍历元素</button>
        <div id="traverseResult"></div>
    </div>
    
    <script>
        $(function() {
            // 内容操作示例
            $('#updateContent').click(function() {
                // 更新文本内容
                $('#textContent').text('这是更新后的文本内容');
                
                // 更新 HTML 内容
                $('#htmlContent').html('这是更新后的包含 <em>HTML</em> 的内容');
                
                // 更新表单值
                $('#inputValue').val('更新后的值');
            });
            
            // 属性操作示例
            $('#updateAttr').click(function() {
                // 更新属性
                $('#attrElement').attr('title', '更新后的标题');
                
                // 添加类
                $('#attrElement').addClass('new-class');
                
                // 设置多个属性
                $('#attrElement').attr({
                    'data-id': '123',
                    'data-name': 'example'
                });
                
                // 显示属性值
                console.log('Title:', $('#attrElement').attr('title'));
                console.log('Class:', $('#attrElement').attr('class'));
            });
            
            // CSS 类和样式操作示例
            $('#updateStyle').click(function() {
                // 添加类
                $('#styleElement').addClass('highlight');
                
                // 设置 CSS 样式
                $('#styleElement').css({
                    'color': 'blue',
                    'font-size': '18px',
                    'padding': '10px'
                });
                
                // 切换类
                $('#styleElement').toggleClass('new-class');
            });
            
            // 元素插入和删除示例
            $('#addElement').click(function() {
                // 在末尾添加元素
                $('#insertContainer').append('<p class="item">新添加的段落</p>');
                
                // 在开头添加元素
                $('#insertContainer').prepend('<p class="item">新添加到开头的段落</p>');
                
                // 在后面添加元素
                $('#insertContainer p:first').after('<p class="item">插入到第一个段落后面的段落</p>');
                
                // 在前面添加元素
                $('#insertContainer p:last').before('<p class="item">插入到最后一个段落前面的段落</p>');
            });
            
            $('#removeElement').click(function() {
                // 删除元素
                $('#insertContainer p:last').remove();
            });
            
            // 元素遍历示例
            $('#traverse').click(function() {
                var result = '';
                
                // 获取父元素
                result += '父元素: ' + $('.child:first').parent().prop('tagName') + '<br>';
                
                // 获取子元素
                result += '子元素数量: ' + $('.parent').children().length + '<br>';
                
                // 获取兄弟元素
                result += '第一个子元素的兄弟元素数量: ' + $('.child:first').siblings().length + '<br>';
                
                // 获取下一个兄弟元素
                result += '第二个子元素的下一个兄弟: ' + $('.child:eq(1)').next().text() + '<br>';
                
                // 获取上一个兄弟元素
                result += '第三个子元素的上一个兄弟: ' + $('.child:eq(2)').prev().text() + '<br>';
                
                $('#traverseResult').html(result);
            });
        });
    </script>
</body>
</html>

通过本章的学习，你应该掌握了如何使用 jQuery 进行各种 DOM 操作。在下一章中，我们将学习 jQuery 的事件处理机制。