jquery 改變dom值

在網頁開發過程中，我們通常需要對 DOM 元素進行增刪改查操作。其中，改變 DOM 元素的值是一項常見的操作。 jQuery 作為一個受歡迎的 JavaScript 函式庫，提供了豐富的 API 來改變 DOM 元素的值。

本文將介紹 jQuery 如何改變 DOM 值，包括如何取得元素的值、如何修改元素的值、以及如何透過鍊式呼叫來操作多個元素。

取得元素的值

在 jQuery 中，我們可以透過選擇器來取得 DOM 元素，然後透過 API 來取得元素的值。以下是一些常見的取得元素值的 API：

1. val()：取得 input、select 或 textarea 元素的值。

例如，取得一個文字方塊的值：

var value = $('#input-id').val();

2. text()：取得元素的文字內容。

例如，取得一個 p 元素的文字內容：

var text = $('p').text();

3. html()：取得元素的 HTML 內容。

例如，取得一個 div 元素的 HTML 內容：

var html = $('div').html();

4. attr()：取得元素的屬性值。

例如，取得一個 img 元素的 src 屬性：

var src = $('img').attr('src');

以上 API 也可以接受一個函數作為參數，用來自訂取得元素的值。例如：

var value = $('input').val(function(index, value) {
  return value.toUpperCase();
});

當取得多個元素的值時，可以使用 each() 函數來遍歷元素並取得它們的值。例如，取得所有文字方塊的值：

$('input[type="text"]').each(function() {
  console.log($(this).val());
});

修改元素的值

取得元素的值只是改變 DOM 元素的一部分操作，更常見的是修改 DOM 元素的值。以下是一些常見的修改 DOM 元素的 API：

1. val()：設定 input、select 或 textarea 元素的值。

例如，將一個文字方塊的值設為 "hello"：

$('#input-id').val('hello');

2. text()：設定元素的文字內容。

例如，將一個 p 元素的文字內容設定為 "world"：

$('p').text('world');

3. html()：設定元素的 HTML 內容。

例如，將一個div 元素的HTML 內容設定為"

title

"：

$('div').html('<h1>title</h1>');

4. attr()：設定元素的屬性值。

例如，將一個img 元素的src 屬性設為"image.jpg"：

$('img').attr('src', 'image.jpg');

對多個元素進行操作

現在，我們已經了解如何取得和修改單一DOM 元素的值。但通常情況下，我們需要對多個元素進行相同或不同的操作。 jQuery 提供了鍊式呼叫和過濾器來實現對多個元素的操作。

使用鍊式呼叫

jQuery 的鍊式呼叫使我們可以在一條語句中對多個元素進行操作。例如，將所有h1 元素的背景色修改為紅色：

$('h1').css('background-color', 'red');

將所有文字方塊的值設為空：

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

同時修改多個屬性：

$('img').attr({
  'src': 'image.jpg',
  'alt': 'image'
});

使用過濾器

過濾器是jQuery 提供的一個強大的選擇器，可以選擇一組元素中的子集。例如，選擇所有class 為"active" 的元素：

$('.active')

選擇第一個p 元素：

$('p:first')

選擇前三個div 元素：

$('div:lt(3)')

可以將過濾器與API 結合使用，對所選的元素進行操作。例如，將class 為"highlight" 的文字方塊的值設為空：

$('input.highlight:text').val('');

以上範例展示了不同的過濾器用法，透過熟悉過濾器的使用方法，可以靈活地選擇需要操作的元素。

總結

透過本文的介紹，我們學習了 jQuery 如何取得和修改 DOM 元素的值，以及如何透過鍊式呼叫和篩選器實現對多個元素的操作。這些技巧可以讓我們更快速地操作 DOM 元素，提高開發效率。同時，學習 jQuery 的操作方法也可以為學習其他 JavaScript 函式庫和框架奠定基礎。

以上是jquery 改變dom值的詳細內容。更多資訊請關注PHP中文網其他相關文章！