-이벤트 객체와 종류사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다. 기본형 : $(“이벤트 대상 선택”).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()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실항하며 인덱스 오름차순으로 배열의 데이터를..
-선택자선택자는 HTML요소를 선택하여 가져옵니다. 제이쿼리 선택자는 CSS선택자와 마찬가지로 선택한 디자인 속성을 적용할 때 사용할 수 있습니다. !이때! HTML에서 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 스타일(CSS)은 ‘정적이다’라고 표현합니다. 하지만 제이쿼리 선택자를 사용하면 ‘동적’으로 스타일을 적용할 수 있습니다. -선택자 사용하기선택자를 사용하기 위해서는 문서 객체를 불러와야 한다. 영역에 문서 객체를 먼저 불러온 다음 선택자를 사용할 수 있도록 작성해야한다. 기본형 | 1.선택한 요소에 지정한 스타일을 적용한다. ex) $(“CSS선택자”).css(“스타일 속성명”,“값”); 2.선택한 요소에 지정한 속성을 적용한다. ex) $(“CS..
-제이쿼리제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식이 자바스크립트를 이용해 만든 라이브러리 언어이다.라이브러리 -> 자바스크립트로 만들어진 다양한 함수들의 집합 제이쿼리의 이점1.호환성 문제 해결2.쉽고 편리한 애니메이션 효과 기능 구현 -제이쿼리 라이브러리 연동1.다운로드 방식->제이쿼리 라이브러리를 제공하는 사이트에서 제이쿼리 라이브러리 파일을 직접 내려받아 HTML에 불러오는 방식입니다. 2.네이트워크 전송 방식->온라인에서 제공하는 제이쿼리 라이브러리 파일을 네트워크를 통해 HTML에 불러오는 방식 다운로드 방식CDNJS 사이트에서 다운로합니다. 종류1.jquery.js -> 소스에 들여쓰기,줄바꿈 , 주석까지 정리된 비압축 파일이다. 제이쿼리 자체를 개발할 때 유용하다.2.jquer..