jquery如何改变元素对象的值

发布时间：2021-11-24 09:43:22 作者：iii
来源：亿速云阅读：380

# jQuery如何改变元素对象的值

## 前言
在Web开发中，动态修改页面元素是常见的需求。jQuery作为曾经最流行的JavaScript库，提供了简洁高效的API来操作DOM元素。本文将详细介绍如何使用jQuery修改元素的值，涵盖文本内容、HTML内容、表单值以及属性等常见场景。

## 一、修改元素文本内容

### 1. text() 方法
最基本的文本修改方法，会过滤HTML标签：

```javascript
// 获取文本内容
let content = $('#element').text();

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

2. 链式调用

jQuery支持链式调用：

$('#element')
  .text('Hello World')
  .addClass('active');

二、修改HTML内容

1. html() 方法

允许包含HTML标签，适合需要渲染标记的场景：

// 获取HTML内容
let htmlContent = $('#container').html();

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

2. 安全注意事项

直接使用html()插入用户输入可能导致XSS攻击，应先进行转义处理。

三、表单元素的值操作

1. val() 方法

专用于表单元素的值操作：

// 获取值
let username = $('#username').val();

// 设置值
$('#username').val('admin');

// 多选框/单选框
$('input[type="checkbox"]').val(['opt1', 'opt2']);

2. 特殊表单元素

下拉框(select)：$('#select').val('option2')
文本域(textarea)：与input相同

四、元素属性操作

1. attr() 方法

操作元素的标准属性：

// 获取属性
let src = $('#image').attr('src');

// 设置属性
$('#image').attr({
  src: 'new.jpg',
  alt: '新图片'
});

2. prop() 方法

更适合布尔属性（如checked, disabled）：

$('#checkbox').prop('checked', true);

3. data() 方法

操作data-*自定义属性：

// 设置data属性
$('#element').data('key', 'value');

// 获取data属性
let value = $('#element').data('key');

五、样式操作

1. css() 方法

直接修改内联样式：

// 单个样式
$('#box').css('color', 'red');

// 多个样式
$('#box').css({
  'background-color': '#eee',
  'padding': '10px'
});

2. 类名操作

// 添加类
$('#element').addClass('active');

// 移除类
$('#element').removeClass('inactive');

// 切换类
$('#element').toggleClass('highlight');

六、高级操作技巧

1. 回调函数

支持动态计算新值：

$('p').text(function(index, oldText) {
  return oldText + ' (已修改)';
});

2. 批量操作

jQuery天然支持批量操作：

// 修改所有匹配元素
$('.item').text('统一内容');

3. 链式操作组合

$('#form')
  .find('input')
  .val('')
  .end()
  .addClass('cleared');

七、性能优化建议

缓存jQuery对象：重复使用选择结果

let $element = $('#element');
$element.text('内容1');
$element.addClass('active');

批量DOM操作：减少回流次数

let html = '';
for(let i=0; i<100; i++){
 html += `<div>${i}</div>`;
}
$('#container').html(html);

事件委托：对动态元素更高效

$('#staticParent').on('click', '.dynamicItem', function(){
 $(this).text('已点击');
});

八、总结

jQuery提供了丰富的方法来修改元素值，核心要点包括： - 文本内容使用text() - HTML内容使用html() - 表单值使用val() - 属性操作使用attr()/prop() - 样式操作使用css()和类方法

随着现代前端框架的兴起，虽然jQuery的使用逐渐减少，但在传统项目维护和快速原型开发中，这些知识仍然非常有价值。理解这些基础操作也有助于更好地掌握现代DOM操作方式。

注意：本文示例基于jQuery 3.x版本，部分方法在早期版本中可能有差异。 “`