jQuery2015. 4. 16. 02:23

아까까지 제이쿼리를 공부하다가 처음 보는 형태를 접하여 많은시간 당황하였었다; Context 매개변수 인데1var $a = $('a', this);cs이렇게 쓰더라... 어? 저기엔 선택자가 들어가야 하는거 아닌가? a 요소 를 선택한거 아닌가? 근데 왜 this 가 들어가지?? 도데체 이게 뭔지 몰라 한참을 고민했었다... this 는 선택한 바로 그 요소 일텐데..? 근데 저렇게 하면 모든 a 요소를 전부 찾아내는거 아냐? 근데 this 는 뭐냐...도데체... 검색을 해도 이해가 솔직히 안됐는데... 본 블로그 운영자는 머리 수준이 평균 미만이다 ㅠㅠ 그래서 위에 뭘 썻는지 다시 차근차근 뜯어보았다.12345$("a").css("color","red");$("li").click(function(){..

jQuery2015. 4. 15. 23:57

mouseenter 자바스크립트 이벤트는 Explorer전용 이벤트입니다. 이 이벤트의 일반적인 사용성 때문에 jQuery 에서는 브라우져를 고려하지 않고 작동이 되도록 구성하였습니다. 이 이벤트는 요소에 마우스 포인터가 진입하면 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다. 예제mouseover와 mouseenter의 차이점을 보여줍니다. 와 닿으시나요? 왼쪽이 mouseover, 오른쪽이 mouseenter인데요. mouseover는 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생하지만 mouseenter는 오로지 자기 자신에게 마우스 포인터가 와야만 발생합니다. 차근히 해보시길 권장드립니다. 출처 : http://findfun.tistory.com/290

jQuery2015. 4. 15. 01:50

.index() 메서드는 일치하는 요소들중 선택한 요소가 몇번째 순번을 가지고 있는지 알 수 있는메서드 이다. 제이쿼리 선택자 중에 eq 라는 게 있는데1$("div:eq(0)").xxxcs 이런식으로 선택하게 될경우 div중 첫번째 div를 의미한다. 그럼 바로 index 메서드의 예제를 해보자.(스크립트 코드를 보려면 Result 를 JavaScript 로 바꾸면 된다) li 를 찍었을 경우 해당 되는 li 의 순번을 p 라는 요소에 나타나게 만들어 보았다. 1. 클릭한 요소(li)의 index 를 변수에 담아 2. p 라는 요소의 text 로 찍은 예제이다. javascript 의 배열을 배웠다면 배열 안의 값을 0 번 째 부터 읽어오는걸 알 수 있을 것이다. 그것과 eq 의 () 안에 들어가는 순..

jQuery2015. 4. 15. 00:31

.size() 메서드는 선택한 요소의 갯수를 알아온다. 예제를 한번 보자 분홍색의 div 요소를 3개를 만들고 그것의 갯수를 p 에 찍어봤다. 이와 비슷한것으로 length 라는게 있는데 같은 동작을 하여 같은 값을 얻게 되지만 약간의 차이가 있다..size() 는 .length 를 매서드 콜 하기 때문에 아주 미세하게 느리다고 한다. 아래의 코드를 보고 어떤 결과값이 나오는지 예측해 보도록 하자.12345678910$(function(){ for(var i = 0; i

jQuery2015. 4. 14. 21:44

data 메서드는 어떠한 요소에 object 값으로 무언갈 넣어줄 수 있다. 임의의 값을 넣어준다 라는게 맞나.... 어느 블로그에서 이와 같은 설명을 읽었다. 설명 : 해당 엘리먼트에 Javascript Type의 value를 로 저장할 수 있으며, 값으로 저장되어 있는 데이터를 읽습니다. 출처 : http://www.nextree.co.kr/p10155/ /* key 로 사용되는건 무조건 string 타입이여야 한다고 한다. value 가 되는건 무엇이든 가능하다. */ 예제를 보자.1234$(function(){ $("body").data("monster","goblin"); console.log($("body").data("monster"));}) cs 위와 같이 보디 객체에 임의의 데이터로 mo..

jQuery2015. 4. 14. 18:12

scrollTop 메서드는 선택한 요소의 y축 좌표를 알아내는 데에 쓰이거나, 혹은 값을 미리 지정하여 스크롤이 그만큼 내려가 있게 할 수 있느 메서드이다. 아래 예제를 한번 살펴보자. 이 예제는 window 객체를 선택했다. 윈도우 객체가 스크롤 이 된다면... 우측 상단의 p 요소에 스크롤이 된 만큼의 값이 찍히게 되어있다. /* 스크롤이 되지 않을만큼의 높이값이 충분하지 않으면 0이다. scrollTop 은 스크롤 바의 위치를 따른다. */ 그리고 스크롤 바를 원하는 좌표에 미리 셋팅하여 줄 수도 있다. 아래 예제를 보자. 이렇게 scrollTop 에 300 만큼의 값을 넣어 준 만큼 미리 스크롤이 이동하였다는걸 알 수 있다.

jQuery2015. 3. 26. 22:07

jQuery로 애니메이션을 구현할 때 흔히 만나게 되는 문제가 하나 있다. 바로 애니메이션 큐(queue) 이다. 예를들어, 네비게이션 메뉴에 마우스가 오면 애니메이션이 동작하게 코딩이 된 경우, 마우스를 여러번 움직였을 때, 이전 애니메이션이 멈추기 전까지 마지막 애니메이션이 동작하지 않는 현상이 바로 애니메이션 큐로 인해 발생하는 문제다. 이러한 문제가 일어나는 이유는 이벤트가 일어날 때마다 큐를 만들기 때문에 이들이 순차적으로 진행되면서 '원하지 않는' 효과가 나타나는 것이다. 사실 말로는 표현이 어려운데 아래 예제를 보면 바로 알 수 있다. 위의 예제를 보면 두 가지 케이스가 나온다. 위의 경우 마우스를 여러번 위아래로 움직이면 움직인 횟수만큼 바 애니메이션이 반복되는 것을 볼 수 있다. 반면 아..