본문 바로가기
반응형

IT/jQuery18

[jquery] 이벤트 객체 - 포커스 이벤트 포커스 이벤트 focus() / blur() / focusin() / focusout() 이벤트 메서드 focus() 대상 요소로 포커스가 이동하면 이벤트를 발생. blur() 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생. focusin() 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생. focusout() 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트 발생. focus / blur / focusin / focusout 기본형 1. focus() / blur() / focusin() / focusout() 이벤트 등록 $("이벤트 대상 선택").focus(function(){자바스크립트 코드;}); $("이벤트 대상 선택").on("focus.. 2020. 3. 31.
[jquery] 이벤트 객체와 종류 - scroll 이벤트 이벤트 객체 & 이벤트 종류 기본형 $("이벤트 대상 선택").mousemove(function(매개변수){ 매개변수(이벤트 객체).속성; }); 이벤트 객체의 속성 종류 구분 종류 설명 마우스 이벤트 clientX 마우스 포인터의 X좌푯값 반환 (스크롤 이동거리 무시) clientY 마우스 포인터의 Y좌푯값 반환 (스크롤 이동거리 무시) pageX 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌표값을 반환 pageY 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌표값을 반환 screenX 화면 모니터를 기준으로 마우스 포인터의 X 좌표값을 반환 screenY 화면 모니터를 기준으로 마우스 포인터의 Y 좌표값을 반환 layerX position을 적용한 요소를 기준으로 마우스 포.. 2020. 3. 29.
[jquery] jquery 이벤트 등록 메서드3 (mouse) mouseover() / mouseout() / hover() mouseover() 는 선택한 요소에 마우스 포인터를 올릴 때 마다 이벤트를 발생시킵니다. mouseout() 는 선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트를 발생시킵니다. hover() 는 선택한 요소에 마우스 포인터가 올라갈 때와 선택요소에서 벗어날 때 각각 이벤트를 발생시킵니다. mouseover - 기본형 1. mouseover 이벤트 등록 $("이벤트 대상 선택").mouseover(function() {자바스크립트 코드;}); $("이벤트 대상 선택").on("mouseover",function(){자바스크립트 코드;}); 2. mouseover 이벤트 강제 발생 $("이벤트 대상 선택").mouseover(); mou.. 2020. 3. 15.
[jquery] jquery 이벤트 등록 메서드2 로딩 이벤트 메서드 -> 사용자 브라우저 로딩이 완료되면 이벤트 핸들러를 실행합니다. ready() -> 사용자가 사이트를 방문할 때 요청한 html 문서객체의 로딩이 끝나면 이벤트를 발생시킵니다. lead() -> 외부에 연동된 소스(iframe, img, video)의 로딩이 끝나면 이벤트를 발생시킵니다. 로딩 이벤트 기본형 $(document).ready(function() {자바스크립트 코드;}); $(document).on("ready" , function() {자바스크립트 코드;}); $(document).load(function() {자바스크립트 코드;}); $(document).on("load" , function() {자바스크립트 코드;}); 이미지1의 높이값이 ready:0 / load.. 2020. 3. 5.
[jquery] jquery 이벤트 등록 메서드 이벤트 등록 메서드란 -> 이벤트가 발생했을 때 실행되는 코드를 말합니다. 이벤트 등록 메서드의 종류 구분 종류 설명 로딩 이벤트 load() 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료 된 후 이벤트가 발생 ready() 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생 error() 이벤트 대산 요소에서 오류가 발생하면 이벤트가 발생 마우스 이벤트 click() 선택한 요소를 클릭했을 때 이벤트 발생 dbclick() 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트 발생 mouseout() 선택 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생(하위요소의 영향) mousehover() 선택 요소의 영역에 마우스 포인터 올렸을 때 이벤트 발생 hover() 선택한 .. 2020. 2. 12.
[jquery] jquery 객체편집 메서드2 replaceAll( ) / replaceWith( ) 메서드 replaceAll( ) 메서드와 replaceWith( ) 메서드는 선택한 요소를 새 요소로 바꿀 때 사용합니다. $("새 요소").reaplceAll("요소 선택"); $("요쇼 선택").replaceWith("새 요소"); $(function(){ $("h2").replaceWith("replace method") $("내용 -> change").replaceAll("div"); }); 박스 제목1 내용1 내용2 박스 제목2 내용3 내용4 -> 태그에 repaceWith( ) 함수로 태그와 내용을 바꾸고 -> 태그에는 replaceAll( ) 함수로 태그와 내용을 변경합니다. unwrap( ) / wrap( ) / wrapAll( ) /.. 2020. 2. 11.
[jquery] jquery 객체 편집 메서드 종류 사용법 설명 before() $("요소 선택").before("새 요소"); 선택 요소 이전 위치에 새 요소 추가. after() $("요소 선택").after("새 요소"); 선택 요소 다음 위치에 새 요소 추가. append() $("요소 선택").append("새 요소"); 선택 요소 마지막 위치에 새 요소 추가. appendTo() $("새 요소").appendTo("요소 선택"); 선택 요소 마지막 위치에 새 요소 추가. prepend() $("요소 선택").prepend("새 요소"); 선택 요소 맨 앞에 새 요소 추가. prependTo() $("새 요소").prependTo("요소 선택"); 선택 요소 맨 앞 위치에 새 요소 추가. insertBefore() $("새 요소").inse.. 2020. 2. 10.
[jquery] jquery 수치 조작 메서드 수치 조작 메서드 종류 사용법 설명 height() $("요소 선택").height(); $("요소 선택")height(100); 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환. width() $("요소 선택").width(); $("요소 선택").width(100); 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환. innerHeight() $("요소 선택").innerHeight(); $("요소 선택").innerHeight(300); 안쪽 여백을 포함한 높잇값을 반환하거나 변환. innerWidth() $("요소 선택").innerWidth(); $("요소 선택").innerWidth(100); 안쪽 여백을 포함한 너빗값을 반환하거나 변환, outerHeight() $("요소 선택").oute.. 2020. 2. 9.
[jquery] jquery 속성 조작 메서드 종류 사용법 설명 html() html("새 요소") $("요소 선택").html(); $("요소 선택").html("새 요소"); 선택한 요소의 하위 요소를 가져옵니다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성합니다. text() text("새 텍스트") $("요소 선택").text(); $("요소 선택").text("새 텍스트"); 선택한 요소가 감싸는 모든 텍스트를 가져옵니다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성합니다. attr("속성명") attr("속성명"."새 값") $("요소 선택").attr("속성명"); $("요소 선택").attr("속성명","새 값"); 선택한 요소의 지정한 속성(attribute)값을 가져.. 2020. 2. 8.
반응형

티스토리툴바