티스토리

on sunday

검색하기

블로그 홈

on sunday

carina16.tistory.com/m

매일매일 일상 생활을 기록하는 공간입니다.

구독자: 16

방명록 방문하기

반응형

주요 글 목록

[jquery] 이벤트 객체 - 포커스 이벤트 포커스 이벤트 focus() / blur() / focusin() / focusout() 이벤트 메서드 focus() 대상 요소로 포커스가 이동하면 이벤트를 발생. blur() 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생. focusin() 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생. focusout() 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트 발생. focus / blur / focusin / focusout 기본형 1. focus() / blur() / focusin() / focusout() 이벤트 등록 $("이벤트 대상 선택").focus(function(){자바스크립트 코드;}); $("이벤트 대상 선택").on("focus.. 공감수 2 댓글수 7 2020. 3. 31.
[jquery] 이벤트 객체와 종류 - scroll 이벤트 이벤트 객체 & 이벤트 종류 기본형 $("이벤트 대상 선택").mousemove(function(매개변수){ 매개변수(이벤트 객체).속성; }); 이벤트 객체의 속성 종류 구분 종류 설명 마우스 이벤트 clientX 마우스 포인터의 X좌푯값 반환 (스크롤 이동거리 무시) clientY 마우스 포인터의 Y좌푯값 반환 (스크롤 이동거리 무시) pageX 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌표값을 반환 pageY 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌표값을 반환 screenX 화면 모니터를 기준으로 마우스 포인터의 X 좌표값을 반환 screenY 화면 모니터를 기준으로 마우스 포인터의 Y 좌표값을 반환 layerX position을 적용한 요소를 기준으로 마우스 포.. 공감수 2 댓글수 0 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.. 공감수 1 댓글수 1 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.. 공감수 0 댓글수 0 2020. 3. 5.
[jquery] jquery 이벤트 등록 메서드 이벤트 등록 메서드란 -> 이벤트가 발생했을 때 실행되는 코드를 말합니다. 이벤트 등록 메서드의 종류 구분 종류 설명 로딩 이벤트 load() 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료 된 후 이벤트가 발생 ready() 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생 error() 이벤트 대산 요소에서 오류가 발생하면 이벤트가 발생 마우스 이벤트 click() 선택한 요소를 클릭했을 때 이벤트 발생 dbclick() 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트 발생 mouseout() 선택 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생(하위요소의 영향) mousehover() 선택 요소의 영역에 마우스 포인터 올렸을 때 이벤트 발생 hover() 선택한 .. 공감수 1 댓글수 0 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( ) /.. 공감수 0 댓글수 0 2020. 2. 11.
[jquery] jquery 객체 편집 메서드 종류 사용법 설명 before() $("요소 선택").before("새 요소"); 선택 요소 이전 위치에 새 요소 추가. after() $("요소 선택").after("새 요소"); 선택 요소 다음 위치에 새 요소 추가. append() $("요소 선택").append("새 요소"); 선택 요소 마지막 위치에 새 요소 추가. appendTo() $("새 요소").appendTo("요소 선택"); 선택 요소 마지막 위치에 새 요소 추가. prepend() $("요소 선택").prepend("새 요소"); 선택 요소 맨 앞에 새 요소 추가. prependTo() $("새 요소").prependTo("요소 선택"); 선택 요소 맨 앞 위치에 새 요소 추가. insertBefore() $("새 요소").inse.. 공감수 0 댓글수 0 2020. 2. 10.
[jquery] jquery 수치 조작 메서드 수치 조작 메서드 종류 사용법 설명 height() $("요소 선택").height(); $("요소 선택")height(100); 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환. width() $("요소 선택").width(); $("요소 선택").width(100); 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환. innerHeight() $("요소 선택").innerHeight(); $("요소 선택").innerHeight(300); 안쪽 여백을 포함한 높잇값을 반환하거나 변환. innerWidth() $("요소 선택").innerWidth(); $("요소 선택").innerWidth(100); 안쪽 여백을 포함한 너빗값을 반환하거나 변환, outerHeight() $("요소 선택").oute.. 공감수 0 댓글수 0 2020. 2. 9.
[jquery] jquery 속성 조작 메서드 종류 사용법 설명 html() html("새 요소") $("요소 선택").html(); $("요소 선택").html("새 요소"); 선택한 요소의 하위 요소를 가져옵니다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성합니다. text() text("새 텍스트") $("요소 선택").text(); $("요소 선택").text("새 텍스트"); 선택한 요소가 감싸는 모든 텍스트를 가져옵니다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성합니다. attr("속성명") attr("속성명"."새 값") $("요소 선택").attr("속성명"); $("요소 선택").attr("속성명","새 값"); 선택한 요소의 지정한 속성(attribute)값을 가져.. 공감수 0 댓글수 0 2020. 2. 8.
[jquery] jquery 메서드 선택자와 함께 알아두면 유용한 메서드 메서드 종류 종류 사용법 설명 is(".요소 상태") $(".txt1").is("visible") 선택한 요소가 보이면 true를 반복합니다. $.noConflict() var 변수 = $.noConflict(); 변수("요소 선택") $.noConflict() 함수를 이용하면 현재 제이쿼리에서 사용중인 $메서드 사용을 중단하고 새로 지정한 변수명 메서드를 사용합니다. get() $("요소 선택").get(0). style.color="#f00" 선택자에 get(0)을 적용하면 자바스크립트 DOM 방식의 스타일을 사용할 수 있습니다. is() 메서드 $("요소 선택").is("[checked | selected | visible | hidden | animated}].. 공감수 0 댓글수 0 2020. 2. 7.
[jquery] jquery 콘텐츠 탐색 선택자 콘텐츠 선택자는 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자 입니다. 콘텐츠 탐색 선택자의 종류 종류 사용법 설명 $("요소 선택:contains(텍스트)") $("li:contains('내용2')") li 중 '내용2'라는 텍스트를 포함하는 요소만 선택. $("요소 선택").contents() $("p").contents() 선택 요소중 가장 가까운 하위요소 선택. $("요소 선택:has(요소명)") $("요소 선택").has(요소명) $("li:has('span')") $("li").has('span') li 요소 중 span을 포함하는 요소만 선택. $("요소 선택:not(:제외요소)") $("요소 선택").not(:제외요소) $("li:not(:first)") $("li") l.. 공감수 0 댓글수 0 2020. 2. 6.
[jquery] jquery 속성 탐색 선택자 속성 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자입니다. 속성 선택자의 종류 종류 사용법 설명 $("요소 선택[속성]") $("li[title]") li 중 title속성이 포함된 요소만 선택. $("요소 선택[속성=값]") $("li[title='리스트']") li 중 title 속성값이 '리스트'인 요소만 선택. $("요소 선택[속성^=텍스트]") $("a[href^='http://']") href 속성값이 'http://'로 시작하는 요소만 선택. $("요소 선택[속성$=텍스트]") $("a[href$='.com']") href 속성값이 '.com'으로 끝나는 요소만 선택. $("요소 선택[href*=텍스트]") $("a[href*='on_sunday'].. 공감수 1 댓글수 0 2020. 2. 5.
[jquery] jquery 배열 관련 메서드 제이쿼리 배열 관련 매서드 종류 종류 사용법 설명 each() / $.each() $("요소 선택").each(function) #.each($("요소 선택").function) 배열에 저장된 문서 객체만큼 메서드가 반복 실행됩니다. 배열에 저장된 객체의 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구합니다. $.map() $.map(Aarry.function) 배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장됩니다. 새로 저장된 배열 객체를 반환합니다. $.grep() $grep(Aarry.function) 배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되.. 공감수 0 댓글수 0 2020. 2. 4.
[jquery] jquery 탐색 선택자 (위치 탐색 선택자) 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색해서 좀 더 정확하게 선택할 수 있습니다. 위치 탐색 선택자 종류 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:first") $("li").first() 전체 li 요소 중 첫 번째 요소만 선택합니다. $("요소 선택:last") $("요소 선택").last() $("li:last") $("li").last() 전체 li 요소 중 마지막 요소만 선택합니다. $("요소 선택:odd") $("li:odd") li 요소 중 짝수 요소만 선택합니다. $("요소 선택:even") $("li:even") li 요소 중 홀수 요소만 선택합니다. $("요소 선택:first-of-type") .. 공감수 0 댓글수 0 2020. 2. 3.
[jquery] jquery 선택자 (형제 선택자) 전체 형(이전) / 동생(다음) 선택자 기본형 $("요소 선택").prevAll() $("요소 선택").nextAll() 형제 관계 선택자 내용1 내용2 내용3 내용4 $(".txt").prevAll() -> .txt 기준으로 이전에 오는 형제 요소 전부 (h1,p-내용1) $(".txt").nextAll() -> .txt 기준으로 다음에 오는 형제 요소 전부 (p-내용3, p-내용4) 전체 형제 요소 선택자 선택한 요소의 모든 형제 요소를 선택합니다. $("요소 선택").siblings(); 형제 관계 선택자 내용1 내용2 내용3 내용4 .txt인 요소를 기준으로 전체 형제요소에 css가 적용 되었습니다. 범위 제한 전체 형/동생 요소 선택자 $("요소 선택").prevUntil("범위 제한 요소 선택.. 공감수 0 댓글수 0 2020. 2. 2.
[jquery] jquery 선택자 (인접선택자, 부모요소 선택자, 하위요소 선택자) 인접 관계 선택자 인접 관계 선택자는 선택한 요소와 가까이에 있는 요소를 선택할 때 사용합니다. 제목1 제목2 내용1 내용2 내용3 wrap은 h1,h2,p의 상위 요소 h1,h2,p는 warp의 하위 요소 inner_wrap은 h1,h2,p의 부모(parent) 요소 h1,h2,p는 inner_wrap의 자식(children) 요소 h1은 h2의 형(prev)요소 p는 h2의 동생(next)요소 h2의 동생 선택자인 next() 함수를 사용하여 의 동생요소인 내용1을 선택하여 글자색을 초록색으로 적용합니다. h2의 부모 선택자인 parent() 함수를 사용하여 의 부모 요소인 을 선택하여 1px 빨간색 실선 테두리를 적용합니다. 부모 선택자 부모 요소 선택자 리스트1 리스트 1-1 리스트 1-2 리스트.. 공감수 2 댓글수 0 2020. 2. 1.
[jquery] jquery 제이쿼리 선택자 제이쿼리 선택자 사용하기(기본형) 1. 선택한 요소에 지정한 스타일을 적용합니다. $("CSS 선택자").css("스타일 속성명","값"); $("CSS 선택자").css({"스타일 속성명":"값"}); 2. 선택한 요소에 지정한 속성을 적용합니다. $("CSS 선택자").attr("스타일 속성명","값"); 선택자를 이용하여 id="title"인 h1의 글씨색을 파란색으로 바꾸는 예시입니다. 안녕하세요~ on sunday입니다 ^^ 아래 표는 기본 선택자의 종류입니다. 구분 종류 사용법 설명 직접 선택자 전체 선택자 $(*) 모든 요소를 선택합니다. 아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소를 선택합니다 클래스 선택자 $(".클래스명") class 속성에 지정한 값을 가진 요.. 공감수 0 댓글수 0 2020. 1. 20.
jquery CDN 가져오는 방법 jquery를 작동하기 위해서 필요한 jquery cdn을 가져와야합니다. 로고 클릭하면 jquery 사이트로 이동합니다. 1. jquery.com 제이쿼리 사이트로 이동하면 첫번째 메뉴에 다운로드를 클릭해서 들어갑니다. 2. 스크롤을 제일 아래로 내리면 하단에 jQuery CDN 을 클릭합니다. 3. minified 를 클릭하면 팝업창이 뜹니다.버전별로 다양하게 있는데 상단이 제일 최근 버전입니다. 4. 팝업창에 쓰여있는 스크립트 부분을 복사해서 가져옵니다. 5. 안쪽에 스크립트 붙여넣기 합니다.사용할 스크립트중에 제일 위쪽에 있어야 아래에 다른스크립드가 참고하여 동작하기에 수월합니다. 공감수 0 댓글수 0 2019. 12. 20.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.