[jQuery / JS] DOM, CSS 변경 / 반환하기 (text ,attr , css , show...)

목차

1. DOM 변경
2. CSS 조작
3. show / hide / fade

---

DOM (브라우저 객체)에 반환하거나 변경하는 함수들

$(선택자).func(); ---> func에 대해 배워봅시다!

 

1. 반환하는 jQuery 함수 (get)

• $(selector).text() : 선택된 요소 반환합니다
• $(selector).html() 선택된 요소의 html 반환합니다
• $(selector).val() : 입력 필드/value값을 반환합니다
• $(selector).attr(attributeName) : 선택된 요소의 인자로 주어진 것에 해당하는 속성의 값을 반환한다
• $(selector).position() : top과 bottom 필드를 가지고 있는 객체를 반환합니다.

ex) position 함수 사용법

var pos = $(selector).position();
var top = pos.top;
var left = pos.left;

---

2. 변경하는 jQuery 함수 (set)

기본 setting 함수

• $(selector).text(textString) : 선택된 요소의 텍스트를 인자에 입력한 값으로 설정합니다.
• $(selector).html(htmlString) : 선택된 요소의 innerHTML을 입력한 문자열로 설정합니다.
• $(selector).val(value) : 선택된 요소의 value값을 입력한 문자열로 설정합니다
• $(selector).attr(attributeName , value)  : 첫번째 인자에 해당되는 속성에 두번째 인자에 해당하는 값을 넣어줍니다.
• $(selector).addClass(className) : 선택된 요소에 지정한 class를 추가합니다.
• $(selector).removeClass(className) : 선택된 요소의 클래스하나를 삭제합니다.

 

추가적인 setting 함수(아래에 예시 다 있습니다)

• $(selector).append(content) : 선택된 요소 바로 뒤에 인자로 넣어준 content요소를 붙입니다.
• $(content).appendTo(selector) : content요소를 바로 뒤에 인자로 넣어준 선택자뒤에 붙입니다.
• $(selector).remove() : 해당하는 요소를 삭제합니다.
• $(selector).empty() : 해당하는 요소의 자식노드들을 전부 삭제합니다.

---

append vs appendTo

둘다 완전히 똑같은 역할을 합니다! 

$('<div>').appendTo($('#test'));
$('#test').append($('<div>'));

appendTo는 인자로 어디다가 새 요소를 달지 선택자를 받고

append 는 인자로 달 새 요소를 받습니다.

 

content부분은 요소를 넣어도 되지만 위에 예시처럼 html태그를 포함한 문자열로 받아도 됩니다!

 

append와 비슷한 함수로 prepend가 있는데요, append는 새요소를 선택자요소뒤에 넣는다면 prepend는 앞에 넣습니다 

• $(selector).prepend(content);
• $(content).prependTo(selector);

---

remove , empty 예시

<div class="container">
	<p class="hello">Hello</p>
	<p class="goodbye">Goodbye</p>
</div>

// div 태그 자체가 없어집니다
$(".container").remove();

// 자식태그인 p태그 전부 없어집니다 Hello , Goodbye 다 없어집니다
$(".container").empty();

---

CSS 변경 또는 반환하기

css를 변경할때 attr랑 헷갈리지 마세요! 못바꿉니다...

//get
$(selector).css(propertyName);
//set
$(selector).css(propertyName, value);

// 몇가지 css는 이렇게 간단하게 바꿀수 있습니다
$(selector).width();
$(selector).width(value);

 

{} 를 이용하면 "" 안써도되지만 -(하이픈)이 있으면 ""를 이용해야합니다.

또 -를 빼고 두번째 단어의 첫글자를 대문자로 바꾸면 가능합니다.

• $("#div1").css({"background-color":"red", "color":"blue"});
• $("#div1").css({backgroundColor:"red", color:"blue"});

 

---

요소 가시화하기 / 숨기기

$(selector).show();
$(selector).hide();

// 서서히 나타나기
$(selector).fadeIn(millisec);
//서서히 사라지기
$(selector).fadeOut(millisec);