jQuery - Get, Set Content and Attributes

콘텐츠 가져오기 - text(), html() 및 val()

• text()- 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.
• html()- 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환합니다.
• val()- 양식 필드의 값을 설정하거나 반환합니다.

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

 

 

속성 가져오기 - attr()

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

 

 

$("#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(), 모두 콜백 함수와 함께 제공됩니다. 콜백 함수에는 선택한 요소 목록의 현재 요소 인덱스와 원래(이전) 값의 두 가지 매개변수가 있습니다. 그런 다음 함수에서 새 값으로 사용하려는 문자열을 반환합니다.

$("#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()메서드는 속성 값을 설정/변경하는 데에도 사용됩니다.

$("button").click(function(){
  $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});

$("button").click(function(){
  $("#w3s").attr({
    "href" : "https://www.w3schools.com/jquery/",
    "title" : "W3Schools jQuery Tutorial"
  });
});

 

 

 

attr()에 대한 콜백 함수

jQuery 메서드 attr()에는 콜백 기능도 있습니다. 콜백 함수에는 선택한 요소 목록의 현재 요소 인덱스와 원래(이전) 속성 값이라는 두 개의 매개변수가 있습니다. 그런 다음 함수에서 새 속성 값으로 사용하려는 문자열을 반환합니다.

$("button").click(function(){
  $("#w3s").attr("href", function(i, origValue){
    return origValue + "/jquery/";
  });
});