详解jquery赋值

一、基础性质

在使用jquery进行赋值时，我们首先需要了解jquery的基础性质。在jquery中，我们可以使用“$”符号来引用jquery库。

$('selector')

其中，“selector”表示我们要选择的元素，jquery会根据选择器的不同来定位想要修改的元素。

在jquery中，我们可以使用.val()方法来获取或设置元素的值。

// 获取input元素的值
$('input').val();

// 设置input元素的值
$('input').val('new value');

二、表单元素值的赋值

jquery最常用的赋值方式之一就是对表单元素的值进行赋值。比如我们可以通过下面的代码来设置文本框中的值。

$('input[type="text"]').val('new value');

同样的，我们也可以对下拉选项进行赋值。

$('select').val('option-value');

对于单选和复选框，我们需要使用.prop()或者.attr()方法来设置它们的checked属性。

// 设置单选框为选中状态
$('input[type="radio"][value="radio-value"]').prop('checked', true);

// 设置多个复选框为选中状态
$('input[type="checkbox"][value="value-1"], input[type="checkbox"][value="value-2"]').prop('checked', true);

三、元素属性值的赋值

除了对表单元素的值进行赋值，jquery还可以对元素的属性进行赋值。我们可以使用.attr()方法来实现此功能。

// 设置img元素的src属性值
$('img').attr('src', 'path/to/image.jpg');

同样的，我们也可以使用.removeAttr()方法来移除元素的属性。

// 移除button元素的disabled属性
$('button').removeAttr('disabled');

四、元素内容的赋值

有时候我们需要修改元素内部的HTML内容，jquery同样也提供了这样的方法。我们可以使用.html()或者.text()方法来对元素的内容进行赋值。

// 将div元素的HTML内容设置为new content
$('div').html('new content');

// 将p元素的文本内容设置为new text
$('p').text('new text');

需要注意的是，使用.html()方法会将元素内部的所有内容全部替换，包括子元素。而使用.text()方法则仅替换文本内容。

五、综合案例

下面是一个综合应用各种jquery赋值方法的例子。在下面的例子中，我们通过一个按钮实现对多个表单元素的值进行修改，同时也修改了两个元素的属性。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jquery赋值综合案例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#change-btn').click(function() {
        $('input[type="text"]').val('new value');
        $('select').val('option-value');
        $('input[type="checkbox"][value="value-1"], input[type="checkbox"][value="value-2"]').prop('checked', true);
        $('input[type="radio"][value="radio-value"]').prop('checked', true);
        $('img').attr('src', 'path/to/image.jpg');
        $('button').removeAttr('disabled');
        $('div').html('new content');
        $('p').text('new text');
      });
    });
  </script>
</head>
<body>
  <div>
    <img src="path/to/image.jpg">
    <p>old text</p>
    <form>
      <input type="text" value="old value">
      <select>
        <option value="option-value">option-text</option>
      </select>
      <input type="checkbox" value="value-1">
      <input type="checkbox" value="value-2">
      <input type="radio" value="radio-value">
      <button disabled>old button</button>
    </form>
    <button id="change-btn">Change</button>
  </div>
</body>
</html>

原创文章，作者：NKGO，如若转载，请注明出处：https://www.506064.com/n/149134.html