[jQuery] DOM 가져오기와 설정하기

jQuery의 매우 중요한 부분 중 하나는 DOM을 조작할 수 있는 가능성이다.

jQuery에는 요소와 속성에 쉽게 액세스하고 조작할 수 있는 DOM 관련 메서드가 함께 제공된다.

---

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

DOM 조작을 위한 간단하지만 유용한 세 가지 jQuery 메서드는 아래와 같다.

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

text() ,html()메소드를 사용하여 콘텐츠를 가져오기 :

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

val()메서드를 사용하여 입력 필드의 값을 가져오기 :

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

---

속성 가져오기 - attr()

attr()메서드는 속성 값을 가져오는 데 사용된다.

링크에서 href 속성 값을 가져오기:

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

---

콘텐츠 설정 - text(), html(), val()

동일한 세 가지 방법을 사용하여 내용을 설정한다 .

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

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()

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()에 대한 콜백 함수

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

attr() 의 콜백함수:

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