轻松学习jQuery控制DOM

// 确保DOM完全加载
$(document).ready(function() {
    // 获取元素
    var $element = $('#elementId');
 
    // 改变元素的文本内容
    $element.text('新的内容');
 
    // 改变元素的HTML内容
    $element.html('<strong>新的HTML内容</strong>');
 
    // 添加一个新的类
    $element.addClass('new-class');
 
    // 移除一个类
    $element.removeClass('existing-class');
 
    // 切换一个类
    $element.toggleClass('toggle-class');
 
    // 显示元素
    $element.show();
 
    // 隐藏元素
    $element.hide();
 
    // 切换元素的可见状态
    $element.toggle();
 
    // 获取元素的属性值
    var attributeValue = $element.attr('attributeName');
 
    // 设置元素的属性值
    $element.attr('attributeName', 'newValue');
 
    // 移除元素的属性
    $element.removeAttr('attributeName');
 
    // 绑定一个点击事件
    $element.click(function() {
        // 事件处理代码
        alert('元素被点击了！');
    });
 
    // 获取元素的CSS属性值
    var colorValue = $element.css('color');
 
    // 设置元素的CSS属性值
    $element.css('color', 'blue');
});

这段代码展示了如何使用jQuery来控制DOM元素的基本操作，包括获取元素、改变内容、添加或移除类、显示或隐藏元素、切换元素的可见状态、获取或设置属性、移除属性、绑定事件和获取设置CSS属性。这些是开发者在学习jQuery时通常首先需要掌握的基础知识点。