编程马·菜鸟教程

Appearance

第4章：jQuery DOM 操作（高频实战，核心重点） ​

4.1 DOM 元素内容操作（获取/设置文本、HTML内容） ​

text()：获取/设置元素文本内容（不含HTML标签） ​

  • 作用：获取或设置元素的文本内容，会自动转义HTML标签

  • 语法：

    • 获取：$(selector).text()
    • 设置：$(selector).text(content)

  • 示例：

    javascript
    // 获取文本内容
const text = $('#myElement').text();
console.log('文本内容：', text);

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

html()：获取/设置元素HTML内容（含HTML标签） ​

  • 作用：获取或设置元素的HTML内容，不会转义HTML标签

  • 语法：

    • 获取：$(selector).html()
    • 设置：$(selector).html(content)

  • 示例：

    javascript
    // 获取HTML内容
const html = $('#myElement').html();
console.log('HTML内容：', html);

// 设置HTML内容
$('#myElement').html('<strong>加粗文本</strong>');

val()：获取/设置表单元素的值（input、select等） ​

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

  • 语法：

    • 获取：$(selector).val()
    • 设置：$(selector).val(value)

  • 示例：

    javascript
    // 获取输入框的值
const value = $('#inputField').val();
console.log('输入值：', value);

// 设置输入框的值
$('#inputField').val('默认值');

// 获取下拉框的值
const selectValue = $('#selectField').val();
console.log('选择值：', selectValue);

// 设置下拉框的值
$('#selectField').val('option2');

4.2 DOM 元素属性操作（获取/设置元素属性） ​

attr()：获取/设置普通属性（如src、href、class） ​

  • 作用：获取或设置元素的属性

  • 语法：

    • 获取：$(selector).attr(attributeName)
    • 设置：$(selector).attr(attributeName, value)
    • 设置多个属性：$(selector).attr({attr1: value1, attr2: value2})

  • 示例：

    javascript
    // 获取属性值
const src = $('img').attr('src');
console.log('图片地址：', src);

// 设置单个属性
$('a').attr('href', 'https://jquery.com/');

// 设置多个属性
$('img').attr({
    src: 'image.jpg',
    alt: '图片描述',
    title: '图片标题'
});

prop()：获取/设置布尔属性（如checked、disabled） ​

  • 作用：获取或设置元素的属性，对于布尔属性（如checked、disabled、selected）更准确

  • 语法：

    • 获取：$(selector).prop(propertyName)
    • 设置：$(selector).prop(propertyName, value)

  • 示例：

    javascript
    // 获取复选框状态
const isChecked = $('#checkbox').prop('checked');
console.log('是否选中：', isChecked);

// 设置复选框状态
$('#checkbox').prop('checked', true);

// 禁用按钮
$('#button').prop('disabled', true);

removeAttr()：删除元素指定属性 ​

  • 作用：删除元素的指定属性

  • 语法：$(selector).removeAttr(attributeName)

  • 示例：

    javascript
    // 删除图片的src属性
$('img').removeAttr('src');

// 删除链接的href属性
$('a').removeAttr('href');

4.3 DOM 元素样式操作（设置CSS样式，简化样式控制） ​

css()：获取/设置单个CSS样式 ​

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

  • 语法：

    • 获取：$(selector).css(propertyName)
    • 设置：$(selector).css(propertyName, value)
    • 设置多个样式：$(selector).css({property1: value1, property2: value2})

  • 示例：

    javascript
    // 获取CSS样式
const color = $('#myElement').css('color');
console.log('颜色：', color);

// 设置单个样式
$('#myElement').css('font-size', '18px');

// 设置多个样式
$('#myElement').css({
    color: 'red',
    backgroundColor: 'yellow',
    padding: '10px',
    margin: '5px'
});

addClass()：给元素添加CSS类 ​

  • 作用：给元素添加一个或多个CSS类

  • 语法：$(selector).addClass(className)

  • 示例：

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

// 添加多个类
$('#myElement').addClass('highlight active');

removeClass()：删除元素CSS类 ​

  • 作用：从元素中删除一个或多个CSS类

  • 语法：$(selector).removeClass(className)

  • 示例：

    javascript
    // 删除单个类
$('#myElement').removeClass('highlight');

// 删除多个类
$('#myElement').removeClass('highlight active');

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

toggleClass()：切换元素CSS类（有则删，无则加） ​

  • 作用：切换元素的CSS类，如果元素有该类则删除，没有则添加

  • 语法：$(selector).toggleClass(className)

  • 示例：

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

// 切换多个类
$('#myElement').toggleClass('highlight active');

4.4 实操案例：操作页面元素内容、属性、样式，实现简单交互 ​

案例：元素操作练习 ​

HTML结构： ​

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>
    <style>
        .box { 
            width: 200px; 
            height: 200px; 
            border: 1px solid #ccc; 
            padding: 20px; 
            margin: 20px;
        }
        .highlight { 
            background-color: yellow; 
            border-color: red;
        }
        .large { 
            font-size: 18px;
            padding: 30px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="box" id="myBox">
        <h2>DOM操作练习</h2>
        <p>这是一个测试段落。</p>
        <img src="" alt="测试图片" id="myImage">
        <input type="text" id="myInput" placeholder="请输入文本">
        <button id="btnText">修改文本</button>
        <button id="btnHtml">修改HTML</button>
        <button id="btnAttr">修改属性</button>
        <button id="btnStyle">修改样式</button>
        <button id="btnClass">切换类</button>
    </div>
    
    <script>
        $(document).ready(function() {
            // 修改文本内容
            $('#btnText').click(function() {
                $('#myBox p').text('文本内容已修改！');
            });
            
            // 修改HTML内容
            $('#btnHtml').click(function() {
                $('#myBox h2').html('<strong>DOM操作练习（已修改）</strong>');
            });
            
            // 修改属性
            $('#btnAttr').click(function() {
                $('#myImage').attr({
                    src: 'https://via.placeholder.com/100',
                    alt: '占位图片'
                });
            });
            
            // 修改样式
            $('#btnStyle').click(function() {
                $('#myBox').css({
                    backgroundColor: '#f0f0f0',
                    border: '2px solid blue',
                    borderRadius: '10px'
                });
            });
            
            // 切换类
            $('#btnClass').click(function() {
                $('#myBox').toggleClass('highlight large');
            });
            
            // 实时获取输入框值
            $('#myInput').keyup(function() {
                const value = $(this).val();
                $('#myBox p').text('输入值：' + value);
            });
        });
    </script>
</body>
</html>

测试步骤： ​

  1. 保存文件为dom-operations.html
  2. 用浏览器打开该文件
  3. 点击各个按钮，观察页面元素的变化
  4. 在输入框中输入文本，观察实时变化

案例解析： ​

  • 修改文本：使用text()方法修改段落文本
  • 修改HTML：使用html()方法修改标题HTML内容
  • 修改属性：使用attr()方法设置图片的src和alt属性
  • 修改样式：使用css()方法设置元素的样式
  • 切换类：使用toggleClass()方法切换元素的CSS类
  • 实时获取输入：使用keyup事件和val()方法实时获取输入框值

新手易错点： ​

  1. 混淆text()和html()：

    • text()：会转义HTML标签，适合纯文本
    • html()：不会转义HTML标签，适合包含HTML的内容

  2. 混淆attr()和prop()：

    • attr()：适合普通属性（如src、href）
    • prop()：适合布尔属性（如checked、disabled）

  3. CSS属性命名：

    • 在css()方法中，使用驼峰命名法（如backgroundColor）而不是连字符（如background-color）

  4. 链式调用：

    • 可以链式调用多个方法，使代码更简洁
    javascript
    $('#myElement')
    .text('新文本')
    .css('color', 'red')
    .addClass('highlight');

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建