jQuery - 콘텐츠 및 속성 설정
콘텐츠 설정 - text(), html() 및 val()
콘텐츠 를 설정하기 위해 이전 페이지와 동일한 세 가지 방법을 사용할 것입니다 .
text()- 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.html()- 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환합니다.val()- 양식 필드의 값을 설정하거나 반환합니다.
다음 예제에서는 jQuery , 및 메서드를 사용하여 콘텐츠를 설정하는 방법을 text()보여 html()줍니다 val().
예시
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text(), html() 및 val()에 대한 콜백 함수
위의 세 가지 jQuery 메서드 text()인 , html(), 및 val(), 모두 콜백 함수와 함께 제공됩니다. 콜백 함수에는 선택한 요소 목록의 현재 요소 인덱스와 원래(이전) 값의 두 가지 매개변수가 있습니다. 그런 다음 함수에서 새 값으로 사용하려는 문자열을 반환합니다.
다음 예 는 콜백 함수 text()를 보여줍니다.html()
예시
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
속성 설정 - attr()
jQuery attr()메서드는 속성 값을 설정/변경하는 데에도 사용됩니다.
다음 예는 링크에서 href 속성의 값을 변경(설정)하는 방법을 보여줍니다.
예시
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
이 attr()방법을 사용하면 동시에 여러 속성을 설정할 수도 있습니다.
다음 예는 href 및 title 속성을 동시에 설정하는 방법을 보여줍니다.
예시
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
attr()에 대한 콜백 함수
jQuery 메서드 attr()에는 콜백 기능도 있습니다. 콜백 함수에는 선택한 요소 목록의 현재 요소 인덱스와 원래(이전) 속성 값의 두 가지 매개변수가 있습니다. 그런 다음 함수에서 새 속성 값으로 사용하려는 문자열을 반환합니다.
다음 예제에서는 attr()콜백 함수를 보여줍니다.
예시
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
jQuery 연습
jQuery HTML 참조
모든 jQuery HTML 메소드에 대한 전체 개요를 보려면 jQuery HTML/CSS 참조 로 이동하십시오 .