비전공자 개발일기

addClass(), removeClass(), toggleClass(), hasClass() addClass(): 선택한 요소에 인수로 전달받은 클래스를 추가 removeClass(): 선택한 요소에 인수로 전달받은 클래스를 제거 toggleClass(): 선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가, 전달받은 클래스가 추가되어 있으면 제거 hasClass(): 인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지를 확인 ADD Class REMOVE Class Toggle Class Has Class 이 단락에 클래스를 추가 이 단락은 고정 이 단락에 클래스 추가

요소의 위치 정보 요소의 위치 변경 요소의 위치 정보2 p요소 offset() 선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환 position() 선택한 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대적인 위치를 반환 offsetParent() 기준으로 사용되는 부모요소 확인 위치가 설정된 요소가 없다면, html 요소를 기준으로 확인 요소의 위치 정보 div 요소 ul 요소 li 요소 li 요소 p 요소 (기준) span 요소 li 요소 scrollLeft() 선택한 요소 집합의 첫번째 요소의 수평 스크롤 바의 현재 위치를 얻거나, 해당 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정 scrollTop() 선택한 요소 집합의 첫번째 요소..

css() 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정 스타일설정 모든 단락의 CSS 스타일 변경 스타일 설정 이 단락에 여러 CSS 스타일 적용 글자 크기 변경 배경색 변경 이 단락에 여러 CSS 스타일 적용 attr(), removeAttr() 선택한 요소 집합의 첫번째 요소의 지정된 속성값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정 속성값 설정 속성값 제거 이 단어에 title 속성 설정 아래 버튼을 누른 후 단어 위로 마우스 이동해보기 prop(), removeProp() 선택한 요소 집합의 첫번째 요소의 지정된 프로퍼티값(checked, 등등)을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은..

first(), last() first()는 선택한 요소 중에서 첫번째 요소를 선택 last()는 선택한 요소 중에서 마지막 요소를 선택 first() last() 첫 번째 두 번쨰 세 번째 네 번째 eq() 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택 선택한 요소 집합의 맨 처음 요소를 인덱스 0으로 놓고, 앞에서부터 검색 음의 정수도 인수로 전달받을 수 있는데, 이 경우 맨 마지막 요소가 -1 eq(1) eq(-1) filter() 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택 이 메소드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소 등을 전달받을 수 있음 또한, 요소 집합의 각 요소를 검사할 수 있는 함수를 전달할 수도..

first(), last() first()는 선택한 요소 중에서 첫번째 요소를 선택 last()는 선택한 요소 중에서 마지막 요소를 선택 first() last() 첫 번째 두 번쨰 세 번째 네 번째 eq() 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택 선택한 요소 집합의 맨 처음 요소를 인덱스 0으로 놓고, 앞에서부터 검색 음의 정수도 인수로 전달받을 수 있는데, 이 경우 맨 마지막 요소가 -1 eq(1) eq(-1) filter() 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택 이 메소드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소 등을 전달받을 수 있음 또한, 요소 집합의 각 요소를 검사할 수 있는 함수를 전달할 수도..

트리 탐색 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM트리를 검색해 나아가는 과정 조상 요소 탐색 형제 요소 탐색 자손 요소 탐색 조상 요소의 탐색 parent() 선택한 요소의 부모 요소를 선택 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수도 있음 p요소의 부모 요소 div요소 div요소 ul요소 li요소 li요소 p 요소(기준) span 요소 li요소 parents() 선택한 요소의 조상 요소를 모두 선택 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 조상 요소만을 선택할 수도 있음 p요소의 조상 요소 parentsUntil() 선택한 요소의 조상 요소중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택 선택..

clone() 선택한 요소를 복사하여 새로운 요소를 생성 아이템 복사 첫 번째 두 번째 세 번째 replaceAll() 선택한 요소를 지정된 요소로 대체 이 메소드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받을 수 있음 아이템 대체 첫 번째 두 번째 세 번째 replaceWith() 선택한 요소를 지정된 요소로 대체 이 메소드는 인수로 HTML 코드 형식의 문자열이나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받을 수 있음 또한, 선택한 요소를 대체할 수 있는 컨텐츠를 반환하는 함수를 인수로 전달받을 수도 있음 지정된 요소로 대체되어 제거된 기존 요소를 반환 아이템 대체 첫 번째 두 번째 세 번째 remove() 선택한 요소를 DOM 트리에서 삭제 이때 삭제되는 ..

append() 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가 1 번째 2 번째 3 번째 아이템 추가 prepend() 선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가 1 번째 2 번째 3 번째 아이템 추가 appendTo() 선택한 요소를 '해당 요소의 마지막'에 삽입 그 동작은 .append() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대 1 번째 2 번째 3 번째 1 번째 아이템 추가 2 번째 아이템 추가 3 번째 아이템 추가 prependTo() 선택한 요소를 '해당 요소의 처음'에 삽입 그 동작은 .prepend() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대 1 번째 2 번째 3 번째 콘텐츠 추가 기존 요소의 내..