본문 바로가기
반응형

전체 글137

[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.
[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}].. 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.. 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'].. 2020. 2. 5.
[jquery] jquery 배열 관련 메서드 제이쿼리 배열 관련 매서드 종류 종류 사용법 설명 each() / $.each() $("요소 선택").each(function) #.each($("요소 선택").function) 배열에 저장된 문서 객체만큼 메서드가 반복 실행됩니다. 배열에 저장된 객체의 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구합니다. $.map() $.map(Aarry.function) 배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장됩니다. 새로 저장된 배열 객체를 반환합니다. $.grep() $grep(Aarry.function) 배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되.. 2020. 2. 4.
반응형

티스토리툴바