詳解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/zh-hant/n/149134.html