jquery가 dom 값을 변경합니다.

웹 개발 과정에서 우리는 보통 DOM 요소를 추가, 삭제, 수정, 확인해야 합니다. 그 중 DOM 요소의 값을 변경하는 것이 일반적인 작업입니다. 널리 사용되는 JavaScript 라이브러리인 jQuery는 DOM 요소의 값을 변경하는 풍부한 API를 제공합니다.

이 글에서는 요소의 값을 가져오는 방법, 요소의 값을 수정하는 방법, 체인 호출을 통해 여러 요소를 조작하는 방법 등 jQuery가 DOM 값을 변경하는 방법을 소개합니다.

요소 값 가져오기

jQuery에서는 선택기를 통해 DOM 요소를 가져온 다음 API를 통해 요소의 값을 가져올 수 있습니다. 다음은 요소 값을 가져오기 위한 몇 가지 일반적인 API입니다.

1. val(): 입력, 선택 또는 텍스트 영역 요소의 값을 가져옵니다.

예를 들어 텍스트 상자의 값을 가져옵니다.

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 요소. 다음은 DOM 요소를 수정하기 위한 몇 가지 일반적인 API입니다.

1. val(): 입력, 선택 또는 텍스트 영역 요소의 값을 설정합니다.

예를 들어 텍스트 상자의 값을 "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');

Operation on multiple elements

이제 단일 DOM 요소의 값을 가져오고 수정하는 방법을 살펴보았습니다. 그러나 일반적으로 여러 요소에 대해 동일하거나 다른 작업을 수행해야 합니다. jQuery는 여러 요소에 대해 작동하는 연결 호출과 필터를 제공합니다.

연쇄 호출 사용

jQuery의 연쇄 호출을 사용하면 하나의 명령문에서 여러 요소에 대해 작업을 수행할 수 있습니다. 예를 들어, 모든 h1 요소의 배경색을 빨간색으로 변경합니다:

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

모든 텍스트 상자의 값을 빈 값으로 설정:

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

동시에 여러 속성 수정:

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

필터 사용

필터 요소 집합의 하위 집합을 선택할 수 있는 강력한 선택기입니다. 예를 들어 "active" 클래스가 있는 모든 요소를 ​​선택합니다.

$('.active')

첫 번째 p 요소 선택:

$('p:first')

처음 세 개의 div 요소 선택:

$('div:lt(3)')

API와 함께 필터를 사용하여 선택한 요소에 대해 작업을 수행할 수 있습니다. 예를 들어, "highlight" 클래스가 있는 텍스트 상자의 값을 공백으로 설정합니다.

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

위의 예는 다양한 필터 사용법을 보여줍니다. 필터 사용에 익숙해지면 작동해야 하는 요소를 유연하게 선택할 수 있습니다.

요약

본 글의 소개를 통해 jQuery가 DOM 요소의 값을 획득하고 수정하는 방법과 체인 호출 및 필터를 통해 여러 요소를 조작하는 방법을 배웠습니다. 이러한 기술을 통해 DOM 요소를 더 빠르게 작동하고 개발 효율성을 향상시킬 수 있습니다. 동시에 jQuery를 작동하는 방법을 배우면 다른 JavaScript 라이브러리 및 프레임워크를 배우기 위한 기초도 마련할 수 있습니다.

위 내용은 jquery가 dom 값을 변경합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!