jquery_jquery의 html, val 및 text 속성 값 간의 연결 및 차이점 소개

우선 html 속성에는 매개변수가 있는 메서드와 매개변수가 없는 메서드 두 가지가 있습니다.

1. 매개변수 없음 html(): 첫 번째로 일치하는 요소의 html 콘텐츠를 가져옵니다. 이 기능은 XML 문서와 함께 사용할 수 없습니다. 그러나 문자열

을 반환하는 XHTML 문서에 사용할 수 있습니다. 예:

html 페이지 코드:

>
jquery 코드: $("div").html();

결과: Hello

2. 매개변수 html(val): 일치하는 각 요소의 html 콘텐츠를 설정합니다. 이 기능은 XML 문서와 함께 사용할 수 없습니다. 그러나 XHTML 문서에는 사용할 수 있습니다. jquery 객체 반환

html 페이지 코드:

jquery 코드: $("div").html("

만나서 반가워요< ;/p>");

결과: [

]

두 번째로 text 속성에는 매개변수가 있는 방법과 매개변수가 없는 방법 두 가지

1. 매개변수 없음 text(): 일치하는 모든 요소의 내용을 가져옵니다. 결과는 일치하는 모든 요소에 포함된 텍스트 내용을 결합한 텍스트입니다. 반환되는 것은 문자열

예:

html 페이지 코드:

Hello Fine

p> ;감사합니다!

jquery 코드: $("p").text()

결과: HelloofineThankyou! 텍스트 매개변수(val): html()과 유사하게 일치하는 모든 요소의 텍스트 콘텐츠를 설정하지만 HTML을 인코딩합니다("<" 및 ">"를 해당 HTML 항목으로 대체). jquery 객체
html 페이지 코드:

단락 테스트

jquery 코드: $("p").text("일부 새 텍스트." ) ;

결과:[

새 텍스트

]

마지막으로 val( ) 속성, 참조가 있는 속성과 참조가 없는 속성입니다.

1. 매개변수 없는 val(): 첫 번째로 일치하는 요소의 현재 값을 가져옵니다. jQuery 1.2에서는 모든 요소의 값을 반환할 수 있습니다. 선택 포함. 다중 선택 시 선택한 값이 포함된 배열이 반환됩니다.

은 문자열, 배열을 반환합니다.

예:

html 페이지 코드:




코드 복사

코드는 다음과 같습니다.

> <옵션>싱글 <옵션>싱글2 Multiple

Multiple2

Multiple3 ; /select>


jquery 코드: $("p").append( "Single: " $("#single").val() " < ;b>다중: " $("#multiple").val().join(", "));

결과:[

단일 : SingleMultiple:Multiple, Multiple3]

2. 매개변수 val(val): 일치하는 각 요소의 값을 설정합니다. jQuery 1.2에서는 요소를 확인, 선택 및 선택하고 jquery 객체를 반환하는 값을 할당할 수도 있습니다.

html 페이지 코드: >jquery 코드: $("input").val("hello world!");

결과: hello world!

------------ ---- -------------------

요약:

1. 드롭다운 상자의 태그에 있는 옵션에 값을 할당하면 옵션에 값 속성이 있지만 페이지에 있는 옵션의 값 속성은 이를 페이지에 표시하는 역할을 하지 않습니다. 실제로 페이지에 표시될 수 있는 것은 옵션 태그 사이의 텍스트 필드입니다. 따라서 옵션 태그에 값을 지정하려면 html() 메서드를 사용하세요

2. 태그, 입력 태그의 value 속성이 페이지에 표시하는 역할을 담당하므로 입력 태그의 텍스트에 값을 할당하고 브라우저가 이를 구문 분석할 때 브라우저에 텍스트 값을 표시하면 val() 속성을 사용해야 합니다.