1. Get
- .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").css({"background-color": "yellow", "font-size": "200%"});
7. Dimension
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
참고: https://www.w3schools.com/jquery/jquery_dom_get.asp