JongDDA의 한걸음 한걸음씩

그룹 이벤트 등록 메소드 그룹 이벤트 등록 메소드를 사용하면 한 번에 2개 이상의 이벤트를 등록할 수 있다. 즉 선택한 요소에 메소드를 한 번만 적용하여 두 이벤트 이상을 등록할 수 있는 것이다. on() 메소드를 사용한 그룹 이벤트 등록! - 한번에 이벤트 여러 개를 등록하되, 서로 다른 이벤트 핸들러 등록하기 - 한번에 이벤트 여러 개를 등록하되, 똑같은 이벤트 핸들러 등록하기 객체를 사용한 이벤트 다수 등록 -> 키가 이벤트, 밸류가 핸들러 $("#sample").on({ click: function(){ console.log("!") }, // 클릭시 ! 하나 출력 dblclick: function(){ console.log("!!")}, // 더블클릭시 !! 두개 출력 mouseenter: fu..

객체 조작 메소드 객체를 생성, 복제, 삭제, 변경할 수 있는 객체 조작 메소드에 대해 알아보겠다. 객체 조작 메소드는 속성 조작 메소드와 수치 조작 메소드 그리고 객체 편집 메소드로 구분할 수 있다. 속성 조작 메소드 요소의 속성을 바꿀 때 사용하는 메소드를 통틀어 속성 조작 메소드라 한다. html() html() 메소드는 선택한 요소에 포함되는 하위 요소를 불러오거나 하위 요소를 새 요소로 바꿀 때 사용한다. text() text() 메소드는 선택한 요소 내에 텍스트를 불러오거나 텍스트를 바꿀 때 사용한다. css() css() 메소드는 선택한 요소에 지정한 스타일 속성값을 읽거나 변경할 때, 또는 새로운 스타일을 적용할 때 사용한다. attr() / removeAttr() attr() 메소드는 요..

toggleClass 메소드는 가져온 요소에서 () 안에 지정한 클래스명이 없으면 추가하고, 있으면 삭제한다는 의미의 메소드이다. 아래 예제를 통해 살펴보자 1. 한식 불고기 비빔밥 김치찌개 2. 일식 초밥 돈부리 판모밀 h3 태그를 클릭(이벤트)할시 함수(이벤트 핸들러)가 실행된다. 위의 함수(이벤트 핸들러)는 toggleClass("hidden")이기 때문에 클릭시 "hidden" 클래스가 없으면 만들고 있으면 지워버린다. 따라서 h3태그 클릭할때마다 ul 태그를 보여주거나 숨겨버린다.

제이쿼리 선택자 선택자에 대해서는 이미 어느 정도 개념을 알고 있다. HTML은 문서 객체로 구성되어 있고, 모든 문서 객체는 기능과 속성을 가지고 있다. 이런 문서 객체의 속성과 스타일을 추가 또는 수정하기 위해서는 특정 문서 객체를 선택해올 수 있어야 한다. 선택자를 사용하면 지정한 문서 객체를 선택해 올 수 있다. 제이쿼리 선택자에는 직접 선택자와, 이미 선택한 요소를 기준으로 근접한 요소의 관계를 따져 선택하는 인접 관계 선택자, 그리고 선태괸 요소 중 더 세밀하게 선택할 수 있는 탐색 선택자가 있다. 제이쿼리 선택자를 사용하는 방법 웹문서가 로드(load)되는 흐름을 고려하여 선택자를 사용해야 한다. 실행문에 있는 '$'는 제이쿼리 문서 객체 선택자의 메소드를 나타낸다. 하지만 여기에 익명 함수..