$(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样式以及如何绑定和触发事件。