개발감성

one( ) - 한번만 실행되는 이벤트 등록 on()대신 one()을 사용하면 단 한번만 실행되는 이벤트를 등록할 수 있다. 버튼을 클릭하면 알림창이 뜨고 그 뒤로는 버튼을 눌러도 아무 효과가 나타나지 않는다. preventDefault( ) - 기본 이벤트 효과를 해제 a태그는 보통 링크를 걸기 위해 자주 사용되는 태그다. 이처럼 몇몇 태그는 기본적인 효과를 가지고 있는데 이러한 효과를 해제하고 다른 이벤트로 대체할 수 있다. a태그를 클릭했을 때 알림창을 뜨게 하고 콘솔에 cancelable을 이용해 해당 이벤트객체에 기본행동이 존재하는지 확인한다. 없다면 false가 뜬다. 만약 기본행동이 있다면 preventDefault메소드를 이용해 기본행동을 지워줄 수가 있다. 원래라면 a태그를 클릭하면 해당..

각 태그에 이벤트를 등록하고 해제해본다. 이벤트 등록 - on( ) 이벤트는 on()메소드를 이용해 등록한다. 모든 이벤트는 on을 통해 등록되고 어떤 태그에 어떤 이벤트를 등록할지 적어준다. btn아이디를 가진 버튼 태그에 click이벤트를 걸어주고 이벤트 내용을 function안에 적어준다. 버튼을 클릭했을 때 일반 이벤트 알림창이 나타난다. 두 번째처럼 단축형태로 이벤트 등록이 가능하다. on대신 이벤트 형식을 사용하는 방식인데 결국 on메소드를 통해 실행된다. 버튼을 클릭하면 두 알림창 모두 나타난다. 이벤트 다중등록 두 가지 이상의 이벤트를 한번에 걸어주는 것도 가능하다. div태그에 마우스가 들어오는 mouseenter와 마우스가 나가는 mouseleave이벤트 두개를 걸어주었다. div태그를..

DOM이란, HTML의 DOM 트리구조 DOM (Document Object Model) 말 그대로 문서 객체 모델인 DOM은 문서를 나타내기 위해 객체로 모델링한 것이다. html문서를 작성하다보면 , 등등의 태그를 볼 수 있는데, 이러한 태그들을 노드라 하고 해 developefeel.tistory.com 이벤트의 흐름을 알기 위해서 웹 문서의 DOM형식에 대해 먼저 알면 좋다. 웹 문서의 DOM트리구조에 따라 제일 상위의 document영억이 맨 바깥에 위치하고 그 아래로 body영역이 위치하며 안쪽으로 div영역들이 구성된 것을 확인 할 수 있다. eventPhase( ) - 이벤트의 진행 단계 이벤트는 총 세 단계로 이뤄지 있으며 eventPhase는 그 단계를 알려준다. eventPhase =..

태그를 정의할 때 태그에 여러 속성을 줄 수 있는데 jQuery로 이 속성을 가져와서 다루는 방법을 알아본다. attr( ) - 단일 속성 가져오기 콘솔창에 content클래스의 div태그안의 img태그의 src속성과 a태그의 href속성을 각각 가져온다. img태그의 이미지소스와 a태그의 링크소스가 각각 콘솔에 찍힌다. data( ) - 'data-' 로 시작하는 모든 속성값 가져오기 data는 태그의 속성 중 data-로 시작하는 모든 속성을 가져온다. 그 속성들 중 특정 속성인 data-name을 가져오려면 data-뒤의 이름을 지정해준다. attr로는 data-를 같이 붙여줘서 가져와야한다. data-name속성은 data('name') 아니면 attr(data-name)으로 가져올 수 있다. d..

간단한 css가 적용된 li태그 다섯개가 있을 때 각 li태그에 클래스를 적용, 제거해본다. 클래스 추가 - addClass( ) menu 클래스를 가진 li태그를 클릭했을 때 클릭된 li 태그에 addClass를 통해 select클래스를 추가해준다. 알기 쉽도록 select클래스가 있는 li태그에 css를 적용시켜뒀다. 1,2번째 li 태그를 클릭하여 select클래스를 추가한다. select클래스의 css가 적용된 것을 확인한다. 한번에 여러개의 클래스도 추가가 가능하다. 1,3,5번째 li태그에 두 개의 클래스가 적용된 것을 확인할 수 있다. 클래스 제거 - removeClass( ) 클릭한 li태그가 select클래스를 가지고 있지 않다면 추가를 하고 select클래스를 가지고 있다면 select..

외부 css가 적용된 div와 li태그의 속성값을 변경해본다. js 로 스타일 속성 변경 js는 한번에 하나씩의 속성값만이 변경가능하다. 테두리와 여백값이 변경되었다. jQuery로 스타일 속성 변경 jQuery에서는 여러 속성값을 묶어서 한번에 변경가능하다. 글자크기와 테두리, 여백이 변경이 되었다. 버튼이 클릭되었을 때 fontSize에 1을 더하도록 해본다. 클릭 시마다 글씨의 크기가 증가되고 콘솔창에 fontsize값이 int값으로 나오도록 한다. 버튼을 열번 클릭하여 li태그 중 select클래스를 가진 li태그의 글자크기를 +10해주었다.

위와 같은 스타일이 적용된 div태그가 있다. js의 속성표기법 js에서는 속성을 표기할 때 카멜표기법을 사용한다. 카멜 표기법은 낙타의 등 처럼 두 단어가 이어져 있을 때 두 번째 이상의 단어부터는 첫 글자를 대문자로 표기한다. 원래의 26px 대신 12px이 적용됬다. jQuery의 속성표기법 jQuery에서는 카멜표기와 css표기 둘다 먹힌다. 각각의 표기 모두 글자크기를 변경한다. jQuery의 속성값 단위 생략 js에서는 속성값에 필히 단위를 적어줘야한다. 단위가 없으면 변경값이 적용되지 않는다. jQuery에서는 단위가 생략된다면 기본 단위가 디폴트로 적용된다. 글자크기로 8픽셀이 적용됬다.

div태그에 내부 스타일로 파란색을, 외부 스타일로 테두리, 여백, 글자 크기 등을 주었다. js의 내부 스타일 접근 - .style.속성 js에서 style을 주면 해당 속성값을 가져올 수 있는데 div에 직접 주었던 인라인 속성인 색상만 가져올 수 있다. color색상만 나타날 뿐 나머지 속성은 빈칸으로 나온다. js의 외부 스타일 접근 - getComputedStyle js에서는 외부 스타일에 접근하기 위해선 해당 메소드를 통해 접근한다. style로 나오지 않던 border속성에 접근 가능하다. getComputerStyle은 외부 스타일 뿐 아니라 내부에도 물론 접근가능하다. jQuery의 스타일 접근 - css jQuery는 내부, 외부 따질 것 없이 css로 모두 접근 가능하다. 모든 속성값..

버튼태그와 6개의 li태그가 있다. html( ) 과 text( )의 차이점 버튼을 클릭했을 시 menu아이디를 가진 ul태그에 각 메소드를 적용했을 시 리턴값을 콘솔에 나타내도록 한다. html 메소드의 경우 ul태그안에 존재하는 내용을 태그까지 합하여 출력한다. 여기서 리턴값은 DOM형태가 아닌 문자열임을 유의한다. text 메소드의 경우 ul태그안에 존재하는 내용 중 텍스트노드의 내용만을 출력한다. html( )을 이용해 노드 내용 변경하기 li태그를 클릭할 시 클릭된 해당 li태그를 item에 지정한다. 지정된 li태그에 html을 적용해 특정 링크가 걸린 a태그로 변경하고 인덱스 값을 이용해 메뉴의 내용을 적어준다. 메뉴4를 클릭하자 링크가 걸린 태그로 변경된다. 하지만 this가 li태그를 가..

6개의 li태그 중 하나 혹은 여러개의 노드를 삭제해본다. 클릭한 노드 삭제하기 menu 아이디를 가진 ul태그 아래의 li태그를 클릭했을 때 해당 노드를 삭제한다. 메뉴3을 클릭하면 해당 노드가 삭제된다. 모든 노드 삭제하기 - remove( ) 삭제 버튼을 누르면 ul태그의 모든 자식태그를 삭제한다. ul태그 안의 모든 li태그가 삭제된다. children으로 자식노드에 접근하는 대신 li태그를 직접 지정하여 삭제한다. li태그 수만큼 메소드를 호출하여 일일히 삭제해준다. 짝수 인덱스 노드 모두 삭제하기 - even li태그에 :even선택자를 주어 짝수 인덱스의 노드를 모두 삭제한다. 0,2,4인덱스 노드가 삭제된다. 홀수 인덱스 노드 모두 삭제하기 - odd li태그에 :odd선택자를 주어 홀수 ..