JQuery HTML

김빛나리·2020년 7월 5일
0

1. Get

  • .text()
    • text를 그대로 보여줌
  • .html()
    • text를 보여주는데 아래 같은 코드들도 포함해서 보여줌
  <b> </b>
  • .val()
    • input text박스에 있는 value를 출력
  • .attr("href")
    • 해당 것의 링크를 출력

2. Set

  • .text("Hello world!");
    • 해당 것의 text를 Hello world!로 바꿈
  • .html()
  .html("<b>Hello world!</b>")
  - 해당 것의 html을 <b>Hello world!</b>로 바꿔서 출력

3. Add

  • append()
    • Inserts content at the end of the selected elements
    • $("p").append("Some appended text.");
      • p(paragraph)뒤에 Some appended text. 추가한다.
      $("p").append("<b>Appended text</b>.");
      $("ol").append("<li>Appended item</li>");
  • 비교
        // Create text with HTML
      var txt1 = "<p>Text.</p>";
        // Create text with jQuery
      var txt2 = $("<p></p>").text("Text.");  
        // Create text with DOM
      var txt3 = document.createElement("p");
      txt3.innerHTML = "Text.";    
        // Append new elements
      $("body").append(txt1, txt2, txt3);   
  • prepend()
    • Inserts content at the beginning of the selected elements
      $("p").prepend("Some prepended text.");
      	  - <p>앞에 Some prepended text. 추가한다.
      $("p").prepend("<b>Prepended text</b>. ");
      $("ol").prepend("<li>Prepended item</li>");
  • after()
    • Inserts content after the selected elements
    • prepend랑 비슷
    • image 뒤에 글씨 넣을 때 사용
    • 예제
          // Create element with HTML
        var txt1 = "<b>I </b>";
          // Create with jQuery
        var txt2 = $("<i></i>").text("love ");
          // Create with DOM
        var txt3 = document.createElement("b");
        txt3.innerHTML = "jQuery!";
           // Insert new elements after img
        $("img").after(txt1, txt2, txt3);
  • before()
    • Inserts content before the selected elements
    • append랑 비슷
    • image 앞에 글씨 넣을 때 사용

4. Remove

  • remove()
    • Removes the selected element (and its child elements)
    • 아예 전체가 싹다 사라짐
  • empty()
    • Removes the child elements from the selected element
    • text만 지움으로써 빈 공간을 남김
  • 괄호 안에 특정한 class, id 써서 그것만 remove할 수 있음(여러개 쓸 수 있음)
    • $("p").remove(".test, .demo");

5. CSS Classes

  • addClass()
    • Adds one or more classes to the selected elements
    • 예제
      head안 style속에 .blue { color: blue; }
      head안 script속에$("h1, h2, p").addClass("blue");
      body안에 h1, h2, p는 .blue가 입혀진다.
  • removeClass()
    • Removes one or more classes from the selected elements
    • $("h1, h2, p").removeClass("blue");
      • blue라고 하는 class를 가진 것들의 css를 remove
  • toggleClass()
    • Toggles between adding/removing classes from the selected elements
    • add와 remove가 포함되어있는 것

6. css()

  • Sets or returns the style attribute
  • set
    • $("p").css("background-color", "yellow");
      • p의 배경색을 yellow로 칠해
    • $("p").css({"background-color": "yellow", "font-size": "200%"});
      • multi도 가능

7. Dimension

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

참고: https://www.w3schools.com/jquery/jquery_dom_get.asp

0개의 댓글