jQuery 操作 HTML 元素和属性的方法

jQuery 是一种流行的 JavaScript 库，用于简化 JavaScript 代码的编写和维护。它提供了许多有用的方法来操作 HTML 元素和属性。在本文中，我们将介绍 jQuery 操作 HTML 元素和属性的方法，并提供两个示例说明。

操作 HTML 元素

我们可以使用 jQuery 选择器来选择 HTML 元素，然后使用 jQuery 方法来对它们进行操作。以下是一些常用的方法：

HTML 内容

• text(): 获取或设置元素的文本内容。
• html(): 获取或设置元素的 HTML 内容。
• val(): 获取或设置表单元素的值。

示例：

// 获取元素的文本内容
var txt = $('#myDiv').text();
console.log(txt); // 输出元素的文本内容

// 设置元素的 HTML 内容
$('#myDiv').html('<p>新的 HTML 内容</p>');

// 获取表单元素的值
var val = $('#myInput').val();
console.log(val); // 输出输入框的值

属性操作

• attr(): 获取或设置元素的属性值。
• prop(): 获取或设置元素的属性值，如 checked、selected 等。
• data(): 获取或设置元素的数据属性值。

示例：

// 获取或设置元素的属性值
var href = $('#myLink').attr('href');
console.log(href); // 输出链接的 href 属性值

$('#myImg').attr('src', 'newImage.jpg'); // 设置图片的 src 属性值

// 获取或设置元素的数据属性值
var name = $('#myDiv').data('name');
console.log(name); // 输出元素的 data-name 属性值

$('#myDiv').data('name', '张三'); // 设置元素的 data-name 属性值

操作 CSS 样式

我们可以使用 jQuery 的 css() 方法来操作 CSS 样式，它接受一个对象参数，其中包含要设置的 CSS 属性和值。

示例：

// 设置元素的 CSS 样式
$('#myDiv').css({
    'background-color': 'red',
    'font-size': '16px'
});

// 获取元素的 CSS 样式
var bgColor = $('#myDiv').css('background-color');
console.log(bgColor); // 输出元素的背景颜色值

总结：

通过使用 jQuery 提供的许多方法进行操作，可以轻松地操作 HTML 元素和属性。在操作时，我们可以使用选择器来选择元素并进行操作。同时，我们还可以使用 jQuery 的 CSS 方法来操作元素的 CSS 样式。