jQuery - HTML

jQuery HTML 다루기

 

1. Get
text() - HTML 요소의 content 리턴
html() - HTML 요소의 content 리턴 (HTML 태그 포함)
val() - 폼 요소의 value 리턴
attr() - Attribute 값 리턴
css() - css 값 리턴

2. Set
text(string) - HTML 요소의 content 변경
html(string) - HTML 요소의 content 변경 (HTML 태그 포함)
val(value) - 폼 요소의 value 값 변경
attr(name, value) - Attribute 값 변경
css(property, value) - css 값 변경

 

$(document).ready(function(){
1. Get
    $("#btn11").click(function(){
        alert("text(): " + $("#test1").text());
    });
    $("#btn12").click(function(){
        alert("html(): " + $("#test1").html());
    });
    $("#btn13").click(function(){
        alert("val(): " + $("#test2").val());
    });
    $("#btn14").click(function(){
        alert("attr(): " + $("#test3").attr("href"));
    });
    $("#btn15").click(function(){
        alert("css(): " + $("#test1").css("color"));

    });

 

  2. Set
     매개변수를 주면 값을 변경할수 있다.

    $("#btn21").click(function(){
        $("#test1").text("test1: Hello World!");
    });
    $("#btn22").click(function(){
        $("#test1").html("test1: Hello <b> world! </b>");
    });
    $("#btn23").click(function(){
        $("#test2").val("Donald Duck");
    });

   $("#btn24").click(function(){
         $("#test3").val("href", "https://www.jQuery.com");

               //한꺼번에 여러 attribute 변경 가능

               // href와 title 변경하기
    });

  $("#btn25").click(function(){

           //$("#test1").css("color","red");

           //한꺼번에 여러 CSS 변경 가능

           //글자색 --> white,   배경색 --> gray

       $("#test1").css({

              color: "white",

              backgroundColor : "gray"

        })

   });

 

$(selector) 의 '리턴값'은  
    <--  하나의 (혹은 여러개의) element 일수 있다.
    <--  jQuery Object 를 리턴한다고 한다. (Wrapped Set)
    ★절.대.로. JavaScript 의 DOM element 객체가 아니다★
    위 결과는 마치 배열처럼 사용 가능 (for, index..). 
    각 배열요소는 DOM element 이며 JavaScript DOM 함수 사용 가능!
    
     과연 이때 text(), html(), val() 값은 어케 동작하나?
     text(), html(), val() 은 callback 함수를 매개변수로 넘겨줄수 있다.
     callback 함수의 매개변수는 2개 (index, oldvalue)이고
     결국 callback 함수의 리턴값이 새로운 값으로 된다.
   
    $("#btn31").click(function(){
     var $c1 = $(".c1");   // 리턴값은 jQuery Object (wrapped set)
    
      $(selector) 의 결과는 DOM element 가 아니다!

     $(selector) 의 결과는 배열처럼 사용 가능.

---

*  jQuery 를 사용하면 HTML element나 content 를 쉽게 다룰수 있습니다

  ①<tag> ② content ③ </tag> ④

- append() : content 맨끝에 삽입   ③
- prepend() : content 맨앞에 삽입   ②
- after() : element 다음에 삽입  ④
- before() : element 이전에 삽입  ①

-  remove() :  element 삭제
-  empty() : element의 child element들 삭제


$(document).ready(function(){
    $("#btn11").click(function(){
        $("p").append(" <b>Appendded text</b>.");
    });

    $("#btn12").click(function(){
        $("ol").append("<li>Appended Item</li>")
    });

    $("#btn21").click(function(){
       $("p").prepend("<b>Prepended text</b>");
    });
    

* #btn22 를 클릭하면 <ol> 의 아이템<li>를 '앞에' 추가

    $("#btn22").click(function(){
       $("ol").prepend("<li>Prepended item</li>");
    });
 
* append, prepend 등에 여러개 매개변수 가능

 

---

* after() & before()

    $("#btn31").click(function(){
      $("img").before("<b>Before</b>");
    });
    $("#btn32").click(function(){
     $("img").after("<b>After</b>");
    });

* remove() :  element 삭제
  empty() : element 의 child element 들 삭제

  remove() 의 매개변수로 jQuery selector 를 넣을수 있다.

    $("#btn41").click(function(){
        $("p").remove()
    });
    $("#btn42").click(function(){
       $("ol").empty()
    });