如何使用jQuery修改值？避免重复向<head>添加<style>的方法

jQuery提供了一系列实用方法来修改不同类型的值，我给你整理了几种最常用的场景：

• 修改元素文本内容：用text()方法，不带参数时是获取文本，传入参数就是修改内容。

  // 把id为"demo"的元素文本改成"新内容"
  $('#demo').text('新内容');
  

• 修改元素HTML内容：如果需要插入带HTML标签的内容，用html()方法，它会自动解析标签。

  // 给id为"content"的div插入一段带p标签的内容
  $('#content').html('<p>这是带HTML格式的新内容</p>');
  

• 修改表单元素的值：针对input、select、textarea这类表单控件，用val()方法最方便。

  // 把用户名输入框的值改成"JohnDoe"
  $('#username').val('JohnDoe');
  // 选中下拉框里的"Beijing"选项
  $('#city-select').val('Beijing');
  

• 修改元素属性值：普通属性用attr()，布尔属性（比如checked、disabled）推荐用prop()。

  // 修改图片的src属性
  $('#avatar').attr('src', 'new-avatar.png');
  // 勾选"同意条款"复选框
  $('#agree-terms').prop('checked', true);
  

• 修改元素CSS样式：用css()方法，支持单个样式修改或批量设置。

  // 把标题文字改成红色
  $('#title').css('color', 'red');
  // 批量修改多个样式
  $('#box').css({
      'background-color': '#f0f0f0',
      'font-size': '18px',
      'padding': '10px'
  });