jquery는 입력 입력 값을 변경합니다.

jQuery는 웹 개발을 크게 단순화할 수 있는 다양한 기능과 기능을 제공하는 매우 강력한 JavaScript 라이브러리입니다. 일반적인 작업 중 하나는 입력 요소의 입력 값을 변경하는 것입니다. 이 기사에서는 jQuery를 사용하여 입력 요소의 입력 값을 변경하는 방법을 살펴보겠습니다.

jQuery Selector

jQuery를 사용하여 입력 요소의 입력 값을 변경하기 전에 먼저 선택기의 개념을 이해해야 합니다. 선택기는 HTML 요소를 선택하는 데 사용되는 표현식입니다. 요소 이름, 클래스, ID, 속성 등을 기준으로 HTML 요소를 선택할 수 있습니다.

다음은 몇 가지 일반적인 jQuery 선택기입니다.

1. 요소 선택기: 요소 이름으로 요소를 선택합니다. 예: $("input")
2. 클래스 선택기: 클래스 이름으로 요소를 선택합니다. 예: $( ".class ")
3. ID 선택기: ID로 요소를 선택합니다. 예: $("#id")
4. 속성 선택기: 요소 속성으로 요소를 선택합니다. 예: $("[name='username' ]")

입력 요소의 입력 값 변경

일반적으로 val() 함수를 통해 입력 요소의 값을 변경할 수 있습니다. val() 함수는 요소 값을 가져오고 설정하기 위해 jQuery에서 제공하는 함수입니다. 다음은 입력 상자의 값을 변경하는 예입니다.

HTML 코드:

<input id="username" type="text" value="Hello World!">

jQuery 코드:

$("#username").val("New Value");

위 코드에서는 ID 선택기를 통해 사용자 이름이 ID인 입력 요소를 선택하고 을 전달합니다. val() 함수는 해당 값을 "새 값"으로 변경합니다.

입력 요소의 입력 값을 동적으로 변경

때로는 입력 요소의 입력 값을 다른 요소의 값으로 동적으로 변경해야 하는 경우가 있습니다. 예를 들어, 버튼을 클릭한 후 한 텍스트 상자의 값을 다른 텍스트 상자에 할당할 수 있습니다. 예는 다음과 같습니다.

HTML 코드:

<input id="username1" type="text" value="Old Value">
<input id="username2" type="text" value="">

<button id="btn">Click me</button>

jQuery 코드:

$("#btn").click(function() {
  var oldVal = $("#username1").val();
  $("#username2").val(oldVal);
});

위 코드에서는 click() 함수를 통해 버튼에 대한 클릭 이벤트 핸들러를 추가했습니다. 버튼을 클릭하면 ID가 username1인 요소의 값을 가져온 다음 이를 ID가 username2인 요소에 할당합니다.

추가 작업

jQuery는 .val() 함수 외에도 입력 요소의 입력 값을 변경하는 데 사용할 수 있는 다른 많은 함수도 제공합니다. 다음은 일반적으로 사용되는 몇 가지 함수입니다.

1. text() 함수: 입력 요소의 일반 텍스트 내용을 설정하는 데 사용됩니다. 예: $("#username").text("New text")
2. html () 함수: HTML 코드를 입력 요소의 값으로 설정하는 데 사용됩니다. 예: $("#username").html("New HTML");
3. append() 함수: 콘텐츠를 추가하는 데 사용됩니다. 입력 요소의 끝, 예: $("#username").append(" Appended Text");
4. prepend() 함수: 입력 요소의 시작 부분에 콘텐츠를 추가하는 데 사용됩니다. 예: $("#username").prepend( " Prepended Text");

Summary

이 글에서는 jQuery를 사용하여 입력 요소의 입력 값을 변경하는 방법과 일반적으로 사용되는 함수 및 선택기를 소개합니다. . 이러한 기술을 익히면 개발자가 웹 개발 작업을 더 쉽게 완료하고 작업 효율성을 높일 수 있습니다.

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