jQuery：属性、元素、尺寸位置操作、事件

$(document).ready(function() {
    // 获取属性值
    var attrValue = $('#example').attr('data-attr');
    console.log(attrValue); // 输出: 'some value'
 
    // 设置属性值
    $('#example').attr('data-attr', 'new value');
 
    // 移除属性
    $('#example').removeAttr('data-attr');
 
    // 获取元素内容
    var content = $('#example').html();
    console.log(content); // 输出: '内容'
 
    // 设置元素内容
    $('#example').html('新内容');
 
    // 获取元素文本内容
    var textContent = $('#example').text();
    console.log(textContent); // 输出: '内容'
 
    // 设置元素文本内容
    $('#example').text('新文本内容');
 
    // 获取元素位置和尺寸
    var position = $('#example').position();
    console.log(position); // 输出: {top: 100, left: 200}
    var dimension = $('#example').width();
    console.log(dimension); // 输出: 元素宽度
 
    // 获取或设置元素的CSS属性
    var color = $('#example').css('color');
    console.log(color); // 输出: 'rgb(255, 0, 0)'
    $('#example').css('color', 'blue');
 
    // 绑定点击事件
    $('#example').click(function() {
        console.log('元素被点击');
    });
 
    // 触发点击事件
    $('#example').trigger('click');
});

这段代码展示了如何使用jQuery来操作HTML元素的属性、内容、文本、位置、尺寸、CSS样式以及如何绑定和触发事件。