그룹 이벤트 등록 및 삭제하기앞에서는 단독 이벤트만 등록하는 방법을 배웠다. 이번에는 단독이 아닌 그룹으로 여러개의 이벤트를 등록하는 메서드를 알아볼 것이다. -그룹 이벤트 등록 메서드한번에 2개 이상의 이벤트를 등록할 수 있다. 즉, 선택한 요소에 이벤트 등록 메서드를 한 번만 적용하여 마우스 포인터를 올렸을 때 와 포커스가 생성되었을 때처럼 두 종류의 이벤트가 발생하도록 만들 수 있다. 종류1.on() -->이벤트 대상 요소에 2개 이상의 이벤트를 등록한다. 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용.2.bind() -->이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.3.delegate() --> 선택한 요소의 하위 요소에 이벤트를 등록한다.이벤트를 등록한 이후에도..
키보드 이벤트 -keydown() / keyup() /keypress() 메서드keydown()과 keypress() 이벤트 메서드는 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시키거나 해당 이벤트를 강제로 발생시킵니다.차이점 : keydown()은 모든 키(한글 제외) 에 대해 이벤트를 발생시키지만 keypress()는 기능크(F1~F12,Alt,Ctrl,Shift,백스페이스,캡스락,탭,한영)에 대해 이벤트를 발생시키지 X또한 키베도 이벤트 핸들러에서 생성된 이벤트 객체의 속성을 이용하면 고유 키의 코드값을 구할 수 있다. 이를 사용해 단축키 기능도 만들 수 있다. -이벤트가 발생한 요소 추적하기사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해오는 방법입니다.이벤트가 발생한 요소를 선택해..
-이벤트 객체와 종류사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다. 기본형 : $(“이벤트 대상 선택”).mousemove(function(매개변수){ 매개변수(이벤트 객체).속성;}); -scroll() 이벤트 메서드대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생 시키거나 강제로 scroll이벤트를 발생시키는 데 사용한다. 기본형:1.scroll이벤트 등록 $(“이벤트 대상 선택”).scroll(function() {자바스큽코드;}); $(“이벤트 대상 선택”).on(“scroll”,function(){ 자바스큽코드;}); 2.scroll이벤트 강제 발생 $(“이벤트 대..
-mouseover() /mouseout()/hover()이벤트 메서드mouseover ->선택한 요소에 마우스 포인터를 올릴 때 마다 이벤트 발생 OR 선택한 요소에 mouseover에벤트 강제 발생mouseout -> 선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트를 발생 OR 선택한 요소에 mouseout이벤트 강제 발생hover ->선택한 요소에 마우스 포인터가 올라갈때와 선택한 요소에서 벗어날 때 각각 이벤트 발생( 이때, 각각 다른 이벤트 핸들러를 실행 시킴) 기본형 : 1.mouseover 이벤트 등록$(“이벤트 대상 선택”).mouseover(function() {자바스큽코드; });$(“이벤트 대상 선택”).on(“mouseover”,function() {자바스큽코드;});2.mou..
이벤트 등록 메서드방문자가 취하는 모든 행위를 말한다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말한다.이벤트 등록 메서드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와 2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메서드가 있다. 기본형 :버튼ex) $(“#bnt”).click(function() { 자바스크립 코드;}); 이러한 단독 이벤트 등록 메서드는 로딩 이벤트,마으스 이벤트, 포커스이벤트, 키보드 이벤트,기타 이벤트로 나눌 수 있다. "이벤트 등록 방식"이벤트를 등록하는 방법에는 단독 이벤트 등록 방식과 그룹 이벤트 등록 방식 두 종류가 있다.즉,한 가지 동작에 대한 이벤트 등록 방식에는 단독 이벤트 등록 메서드나 그룹 이벤트 등록 메서드를 사용하고, 두가..
수치 조작 메서드요소의 속성을 조작할 때 사용하는 메서드입니다. -요소의 높이/너비 메서드height()와 width() 메서드는 여백 및 선 두께를 제외한 순수 요소의 높잇값과 너빗값을 계산합니다.innerHeight()와 innerWidth()메서드는 여백을 포함한 요소의 높잇값과 너빗값을 계산합니다outerHeight()와 outerWidth()메서드는 여백 및 선을 포함한 요소의 높잇값과 너빗값을 계산합니다. 기본형:1.$(요소 선택).height(); /$(요소 선택).Width(); $(요소 선택).height(값); /$(요소 선택).Width(값); 2.$(요소 선택).innerHeight(); /$(요소 선택).innerWidth(); $(요소 선택).innerHeight(값); /$(요..
객체 조작 -객체 조작 메서드이제부터는 객체를 생성,복제,삭제,속성 변환하는 객체 조작 메서드에 대해 살펴보겠습니다.객체 조작 메서드는 크게 속성 조작 메서드와 수치 조작 메서드 객체 편집 메서드로 나눌 수 있습니다. -html() / text() 메서드html메서드는 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용. text()메서드는 선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나 선택한 하위 요소를 전부 제거하고 새 텍스트를 생성할 때 사용. 기본형: 1.$(“요소 선택”).html();2.$(“요소 선택”).html(“새요소”);3.$(“요소 선택”).text();4.$(“요소 선택”).text(“새 텍스트”);1->선택한 요소의 하위..
탐색 선택자탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 워하는 요소를 한번 더 탐색해 정확성을 높여준다.대표적으로, 배열의 인덱스를 사용해 선택하는 ‘위치 탐색 선택자’와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 ‘속성 탬색 선택자’가 있다. -위치 탐색 선택자기본 선택자로 선택한 요소는 배열에 담깁니다. 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있다. $.map() / $.grep() 메서드1.$.map()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행한다. 그리고 메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환한다. 2.$.grep()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실항하며 인덱스 오름차순으로 배열의 데이터를..