jQuery DOM 수정

text()

선택한 요소의 텍스트 내용을 설정하거나 반환합니다.

html()

선택한 요소의 html 마크업을 포함한 내용을 설정하거나 반환합니다.

val()

선택한 요소의 value값을 설정하거나 반환합니다.

위 세 가지 메소드에는 콜백 함수가 제공되며, 이 함수는 현재 요소의 인덱스와 바로 이전에 가지고 있던 값의 매개변수를 가지고 있습니다.

attr()

선택한 요소의 다양한 속성 값을 설정하거나 변경할 수 있습니다. 객체 형식으로 전달하면 동시에 복수의 속성값을 설정할 수도 있죠. attr() 메소드에서도 콜백 함수을 전달할 수 있습니다. 이 함수에는 현재 인덱스값과 바로 직전에 갖고 있던 속성값, 두 가지의 매개변수를 사용할 수 있습니다.

콘텐츠 삽입

append()

선택한 요소 내부의 끝에 내용 삽입

prepend()

선택한 요소 내부의 시작에 내용 삽입

after()

선택한 요소 외부의 뒤에 내용 삽입

before()

선택한 요소 외부의 앞에 내용 삽입

Manipulating CSS (css 조작)

클래스를 이용해서 미리 css를 지정해놓고, 여러 요소에 클래스를 변경하여 css를 수정할 수 있는 방식입니다.

addClass()

선택한 요소에 클래스를 추가

removeClass()

선택한 요소에 클래스를 제거

toggleClass()

선택한 요소에 토글 기능으로 클래스를 추가, 제거를 반복시킴

css()

선택한 요소에 직접 css를 적용시키는 메소드입니다. 객체의 키:밸류 형태로 다중의 css 속성을 동시에 적용할 수도 있습니다.

Traversing the DOM

traversing은 DOM의 계층 구조를 횡단하며 관리하는 것을 의미합니다. 여기에는 부모, 자식, 자손, 형제의 개념이 존재합니다.

필터링

first()

지정한 요소의 첫 번째 요소를 반환합니다.

last()

지정한 요소의 마지막 요소를 반환합니다.

eq()

지정한 요소의 특정 인덱스 번호의 요소를 반환합니다.

filter()

지정한 요소 중 특정 기준에 따른 요소를 반환합니다. 기준은 css 선택자로 줄 수도 있습니다.

not()

filter() 메소드와 반대로, 특정 기준에 해당되지 않는 나머지 요소들을 반환합니다.

오늘의 개발지식

호이스팅

스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동한다는 의미입니다.

스코프

함수 스코프(function-scoped)

var 는 함수 스코프입니다.

블록 스코프(block-scoped)

let과 const는 블록 스코프입니다.

let과 const

let과 const는 할당하기 전에는 사용할 수 없습니다. 즉, 정의하고 초기값을 할당해줘야 사용이 가능합니다. 이는 TDZ(Temporal Dead Zone)에 영향을 받기 때문인데요. TDZ 영역에 있는 변수는 사용할 수 없습니다. 이런 개념을 적용한 이유는 자바스크립트의 '느슨한 결합'의 단점을 보완해서, 코드의 동작을 예측가능하게 하고 예상치 못한 오류를 줄이기 위함입니다.

css 상대 단위, rem & em

상대 단위는 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. 반대로 절대 단위는 항상 고정되어 있는 단위입니다. 상대 단위인 em, rem은 font-size의 속성값을 기준으로 비례해서 결정됩니다. em은 해당 단위가 사용되고 있는 요소의 font-size가 기준입니다. rem은 최상위 요소인 html 요소의 폰트사이즈가 기준이 됩니다. 따라서 rem 단위를 쓰면 해당 요소의 폰트사이즈는 신경쓰지 않게 됩니다.

em을 쓸 경우 여러 단계를 거치며 적용하는 게 복잡해지기 때문에, rem을 쓰는 것이 재사용과 유지보수 측면에서 유리하다고 볼 수 있습니다.

참조링크

자바스크립트 중급 강좌 : 140분 완성
Classes
w3schools.com/jquery