jQuery 가져오기/설정

jQuery의 매우 중요한 부분은 DOM을 조작할 수 있는 가능성입니다.

jQuery는 HTML 요소와 속성을 효과적으로 조작할 수 있는 메서드를 제공합니다.

이 장에서는 jQuery가 어떻게 요소 내용과 속성 값을 가져오고 설정하는지 설명할 것입니다.

HTML DOM(문서 객체 모델)

문서 객체 모델이는 일반적으로DOM이는 웹 사이트가 상호작용할 수 있도록 하는 중요한 부분입니다.

문서 객체 모델이는 창에 표시된 HTML 문서를 나타냅니다.

이는 jQuery가 웹 사이트의 내용, 구조, 스타일을 조작할 수 있는 인터페이스입니다.

jQuery로 내용을 가져오거나 설정-html(), text(), val()

jQuery를 사용하면 HTML 요소를 쉽게 조작할 수 있습니다.

DOM 작업을 위해 다음과 같은 jQuery 메서드가 있습니다:

• html()

• text()

• val()

다음 장에서는 각 메서드를 사용하는 방법을 설명할 것입니다.

jQuery html() 메서드

jQuery html()메서드는 선택된 요소의 내용(innerHTML)을 가져오거나 설정합니다.

아래의 예제는 버튼 클릭 시 첫 번째 부분의 내용을 가져옵니다:

$("button").click(function(){
　　alert($("p").html()));
});

아래의 예제는 버튼 클릭 시 모든 부분의 내용을 변경합니다:

$("button").click(function(){
　　$("p").html("저는 말하고 싶습니다: 	<b>Hello world</b>);
});

jQuery text() 메서드

jQuery text()메서드는 선택된 요소(그 후손 포함)의 텍스트 내용을 가져오거나 설정합니다.

아래의 예제는 버튼 클릭 시 모든 부분의 텍스트 내용을 가져옵니다:

$("button").click(function(){
　　alert($("p").text()));
});

아래의 예제는 버튼 클릭 시 모든 부분의 텍스트 내용을 변경합니다:

$("button").click(function(){
　　$("p").text("저는 말하고 싶습니다: 	Hello world");
});

html()과 text()의 차이

html()와text()메서드는 모두 HTML 요소의 내용을 설정하거나 가져오지만 다음과 같은 차이가 있습니다:

html()：

• 선택된 요소의 내용(내부 HTML)을 설정하거나 가져오는 방법(텍스트+ HTML 태그）

• html() 메서드를 사용할 때가져오기내용을 가져오면, 그 내용을 반환합니다:첫 번째 선택된 요소의 내용

text()：

• 선택된 요소의 내용(내부 HTML)을 설정하거나 가져오는 방법(순수 텍스트）

• text() 메서드를 사용할 때가져오기내용을 가져오면, 그 내용을 반환합니다:모든 선택된 요소의 텍스트 내용

아래의 예제는 html() 메서드와 text() 메서드의 차이를 보여줍니다:

$("#btn1").click(function(){
　　$("p").html("저는 말하고 싶습니다: 	<b>Hello world</b>);
});
$("#btn2").click(function(){
　　$("p").text("저는 말하고 싶습니다: 	<b>Hello world</b>);
});

jQuery val() 메서드

jQuery val()선택된 양식 요소의 value 속성을 가져오거나 설정하는 방법을 설명합니다.

다음 예제에서 가져옵니다<input>필드의 값:

$("button").click(function(){
　　$("input:text").val();
});

다음 예제에서 설정합니다}}<input>필드의 값:

$("button").click(function(){
　　$("input").val("Hello　world");
});

jQuery 속성 가져오기/설정-attr()

jQuery attr()메서드를 통해 선택된 요소의 속성과 값을 가져오거나 설정합니다。

다음 예제에서 이미지의src속성의 값:

$("button").click(function(){
　　$("img").attr("src");
});

다음 예제에서 이미지의src속성의 값:

$("button").click(function(){
　　$("img").attr("src",　"logo_jquery.png");
});

다음 예제에서 여러 속성과 값을 설정합니다:

$("button").click(function(){
　　$("img").attr({
　　　　alt:　"Seagull　Icon",
　　　　title:　"Image　by　Seagull",
　　　　width:　"350px",
　　　　height:　"300px"
　　});
});

jQuery HTML 참조

완전한 HTML 메서드에 대한 참조를 위해 방문하십시오jQuery HTML / CSS 참조。