본문 바로가기
[jQuery] 좌표 개념, 위치(좌표) 다루기, 크기 다루기 ※ 위치 개념 지역 좌표 : 부모 노드 기준 좌표 전역 좌표 : 최상위 노드인 document의 left, top 위치가 0으로 시작 ※ 위치다루기 지역 좌표 구하기 $대상.position().left / $대상.position().top ex) $("child").position().top; 지역 좌표 설정 $대상.css("left 또는 top 값") ex) $("child").css({ left : 값, top : 값 }); ex) $("child").css("left", 값); 부모 좌표 구하기 자바스크립트에서 부모 좌표 노드는 약간 다른데 DOM에서는 position의 속성값이 absolute와 relative의 설정이 있다. 그렇기 때문에 부모노드는 바로 위의 상위 노드가 아니라 position.. 더보기
[JQuery] 이벤트 다루기 ※이벤트의 종류 마우스 이벤트 : 마우스를 사용했을 때 발생하는 이벤트 키보드 이벤트 : 키보드를 눌렀을 때 발생하는 이벤트 태그요소 고유 이벤트 : 엘리먼트마다 발생하는 고유 이벤트 ex) 태그요소의 이미지가 모두 로드되면 load 이벤트를 발생시켜 이미지 다운이 완료됐음을 알리거나 태그요소의 경우 입력한 정보가 바뀌면 change 이벤트를 발생시켜 입력정보 변경을 알림 사용자 정보 이벤트 : 개발자가 직접 만들어 사용하는 이벤트 ※일반 이벤트 등록 $대상.on("이벤트이름", 이벤트리스너) ex) $("#btn").on("click", function(){ alert("버튼클릭"); }); ※ 단축 이벤트 등록 $대상.단축이벤트(이벤트리스너) ex) $("#btn").click(function(){ .. 더보기
[jQuery] .on() 으로 이벤트 설정하기 .on()은 하나 혹은 하나 이상의 이벤트를 설정가능하다. ex1 $( "#dataTable tbody tr" ).on( "click", function() { console.log( $( this ).text() ); }); ex2 $( "#dataTable tbody" ).on( "click", "tr", function() { console.log( $( this ).text() ); }); 위의 두 예제는 tr에 클릭이벤트를 주는 방법이다. 물론 저 tr에 #id, .class 등등의 선택자로도 이벤트를 적용하는것도 가능하다. 그리고 하나의 노드에 여러 이벤트 설정 가능 $(".foo").on({ "change" : function(){...}, "blur" : function(){...} });.. 더보기
[jQuery] 노드 생성/ 추가 / 삭제 / 이동 1.노드생성 var 신규노드 = $("신규 DOM"); ex) var $newNode = $("New Node"); DOM을 $()함수에 매개변수로 넣음으로써 jQuery객체로 return 받는다. 노드를 생성한다는게 DOM을 제이쿼리로 감싼다는 의미 2.노드추가 / 노드이동 노드를 추가할 때는 새로운 노드를 생성하면 된다. (아래의 예제는 노드 추가기준으로 만든 예제이다) 그리고 노드를 이동하려면 현재 있는 DOM에서 노드를 생성하여 똑같이 사용하면 된다. 만약 $("New Node").prependTo("ul") 이런식으로 추가 노드를 새로 만들어 사용하면 새로운 노드가 생성되어 에 맨 앞에 생성 된다. 하지만 $("#기존노드 아이디").prependTo("ul") 등과 같이 기존노드에 대한 노드에 .. 더보기
[jQuery] 부모 노드 찾기, 형제 노드 찾기 부모노드란 어떤 노드의 바로 한단계 위의 노드이고 그 이상의 노드들은 조상 노드라고 한다. 형제노드는 어떤 노드와 같은 단계의 노드를 형제 노드라고 한다. 1.부모 노드 찾기 $대상.parent() 2.조상 노드 찾기 $대상.parents("선택자") $대상.parents() 3.이전 형제 노드 찾기 $대상.prev() 바로 이전의 형제 노드를 찾아준다. $대상.prevAll("선택자") $대상.prevAll("") 이전의 모든 형제 노드를 찾아준다. 4.이후 형제 노드 찾기 $대상.next() 바로 다음의 형제 노드를 찾아준다. $대상.nextAll("선택자") $대상.nextAll() 다음의 모든 형제 노드를 찾아준다. 더보기
[jQuery] 자식 노드 찾기 자식노드 찾기는 전에 포스팅한 [jQuery] 찾은 노드 다루기 응용이므로 따로 설명하지 않겠다. 자식노드는 바로 한단계 하위 노드이며 그 이상의 하위노드는 자식노드라 하지않고 자손노드라 한다. 그런 노드들은 find()를 이용해 찾을 수 있다. 1.모든 자식노드 찾기 $대상.children() 2.특정 자식노드만 찾기 $대상.children("선택자") 3.첫번째 자식노드 찾기 $대상.children().first() $대상.children().eq(0) $대상.children(":first") $대상.children(":eq(0)") 4.마지막 번째 자식 노드 찾기 $대상.children().last() $대상.children(":last") $대상.children().eq($대상.children.l.. 더보기
[jQuery] 찾은 노드 다루기 1.찾은 노드개수 구하기 $대상.length; ex) var nodeLength = $("div).length; 해당 html의 div 노드의 총 개수를 구함 2.찾은 노드중 n번째 노드 접근하기 $대상.eq(index); ex) var $div_3 = $("div").eq(3); 해당 html의 div 노드중 세번째 노드의 jQuery객체를 리턴 3.자바스크립트 DOM 객체 접근 $대상.get(index) ex) var $div_3 = $("div").get(3); $div_3.style.color = "#f00"; 해당 html의 div노드중 세번째의 노드의 DOM객체를 리턴하여 세번째 div의 색을 빨간색으로 바꿨다. 2번(jQuery객체 접근), 3번(DOM객체 접근) 리턴값 비교 위에서 보는것처.. 더보기
[jQuery] 노드 찾기 ※ 노드찾기 1.아이디로 찾기 $("#아이디") 2.클래스 이름으로 찾기 $(".클래스 이름") 3.태그 이름으로 찾기 $("태그 이름") 4.속성옵션으로 찾기 $("속성옵션") 속성옵션 설명 $("[id]") 아이디가 적용된 모든 노드 $("[id=test]") 아이디가 test인 노드 ex) id = "test" 로 속성을 준 모든 노드를 찾는다. $("[id*="test]") 아이디에 test가 포함된 모든 노드 $("[id$="test]") 아이디가 test로 끝나는 모든 노드 $("[id^="test]") 아이디가 test로 시작하는 모든 노드 더보기
[jQuery] $()란? 우리는 보통 jQuery를 쓸때 $("div).css("boder", "4px solid"); 와 같은 형태로 쓴다. 항상 앞에 $("CSS 선택자")의 형식으로 쓴다. 여기서 $()란 무엇을 나타내는 것일까? 바로 $()는 함수를 나타낸다. $ 함수 그 자체인 것이다. 실제로 jQuery라이브러리 내부를 살펴보면 window.jQuery = window.$ = jQuery; 라는 부분이 있다. 정리해보면 $는 jQuery 함수와 동일하며 일종의 단축이름이다. 그래서 $("div).css("boder", "4px solid");을 jQuery("div).css("boder", "4px solid"); 로 바꿔써도 똑같이 작동한다. 그리고 $() 가 함수라는것은 아래의 예시를 보면 알 수 있다. $("di.. 더보기
[JavaScript&Query] $(document).ready 와 window.onload의 차이 $(document).ready() 와 window.onload는 모두 웹페이지가 로드되면서 발생한다. ready()는 DOMContentLoaded 이벤트를 포함한 메서드로써 이 이벤트는 웹페이지를 읽은 후 태그와 1:1 매핑되는 DOM 객체를 생성한 후 발생한다. 이벤트가 발생한 시점에서는 이미지나 플래시 같은 무거운 콘텐츠는 아직 로드되지 않는다. 하지만 window 객체에서 발생하는 load이벤트는 이미지나 플래시 같이 무거운 콘텐츠가 모두 로드되고 난 후 발생하는 이벤트이다. 정리해보면 DOMContentLoaded 이벤트가 먼저 발생하고 이후 이미지 등의 콘텐츠가 모두 로드되고 load 이벤트가 발생한다. 이러한 특징을 잘 기억했다가 적절하게 사용하자 (일반적으로 실무에서는 특별한 경우가 아니.. 더보기
[JavaScript&jQuery] 자바스크립트와 jQuery의 관계 ※ 자바스크립트와 jQuery와의 관계 jQuery는 오직 자바스크립트 DOM 작업을 좀더 쉽게 도와주는 라이브러리 (자바스크립트 문법이나 라이브러리를 대체할 수 있는 새로운 프로그래밍 언어가 아니다!) $("#menu li").css("color", "#foo"); 라는 제이쿼리가 있다고 하자. 이 jQuery는 id가 menu인 녀석의 하위에 있는 li의 색을 빨간색(#foo)로 바꾸라는 문법이다. 이 jQuery 문법안의 내부는 아래와 같다. var menu = document.getElementById("menu"); var liList = menu.getElementByTagName("li"); for(var i = 0; i 더보기
[JavaScript&Query] DOM에 대해 알아보자 ※ DOM 이란? Document Object Model의 약자로 문서를 객체로 표현하기 위한 표준으로 HTML, XML등의 문서로 표현할때 사용 하는 API 문서의 구조적 형태를 제공하므로 자바스크립트와 같은 스크립트 언어를 사용하여 문서 내용과 시각적 표현을 수정할 수 있다. ※ W3C DOM vs 브라우저 DOM DOM은 정의 부분과 구현부분으로 나누어진다. W3C DOM - 정의부분, 문서를 조작할 때 지켜야 할 약속(규칙, 규약)이 명시되어 있는 문서일 뿐 실제 동작 구현하는 소스는 없다. 이 명세서를 만드는 곳은 웹 관련 표준을 정의하는 협회인 W3C이다. IDL로 구성이 되어 있으며 IDL이란 Interface Definition Language의 약자로써 인터페이스 정의 언어 이다. 브라우.. 더보기

티스토리툴바