본문 바로가기
반응형

IT102

[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.
[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") .. 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("범위 제한 요소 선택.. 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 리스트.. 2020. 2. 1.
반응형