Skills/Web 썸네일형 리스트형 JQuery Basic 12강 - each() 이번에는 each() 메소드를 사용해보도록 하겠습니다. └ 접기자바에는 for, while 반복문이 있습니다. 자바스크립 또 한 for 문이있습니다. 그러나 jQuery에는 새로운것이있습니다. 바로 each() 입니다. each() 메소드의 parmeter 즉 인자 값으로 callback 메소드를 줄일 수 있습니다. 시작하겠습니다. 준비된 소스를 보시죠. 에 사용할 내용을 입력하겠습니다. 태그에 4개의 내용을 입력하였습니다. 그리고 each를 사용해보겠습니다. i 라는 변수에 초기값을 0으로 설정합니다.document에 ready로 태그에 each(forEach)로 작동시킵니다.함수 forEach를 tis의 attr로 속성값 class 를 fromjQuery + i 로 부여합니다.i 변수에 +1 을 더합.. 더보기 jQuery Basic 11강 - slideUp() & slideDown() 이번에는 slideUp(), slideDown()을 사용해보겠습니다.바로 슬라이드 기능을 가진 메소드입니다. 소스를 보시죠. Click It Lorem ipsum dolor sit amet, consectetur adipiscing elit. 위와 같은 상태에서 시작하겠습니다.그리고 스크립트를 짜넣어보겠습니다. document(화면)를 클릭하면 태그에 toggle(first, second)을 실행시킨다.first 함수의 slideDown()메소드를 slow하게 실행시킨다. second함수의 slideUp()메소드를 slow하게 실행시킨다. 결과. 더보기 jQuery Basic 10강 - fadeIn() & fadeOut() & fadeTo() 이번에는 toggle()과 fadeIn() & fadeOut()와 fadeTo()를 사용해 보도록 하겠습니다. 먼저 준비된 소스를 보시죠. Click It Welcome to small95 blog ~ 현재 태그안에 위와 같이 입력하였습니다.그리고 이제 스크립트 소스를 짜보겠습니다. 맨 위 부터 태그를 .ready 실행할 때 태그에 toggle(first, second)를 적용해라.함수 first()는 태그에 fadeOut를 slow하게 적용해라.위와 같습니다. 자 확인 해보겠습니다. 위와 같이 Welcome small95 blog ~ 라는 문구가 자동으로 사라졌다 보일것 입니다. 이제 fadeTo()를 사용해보겠습니다. 결과. 더보기 Query Basic 9강 - animate(1) 소스를 보시죠. Click it Click it Click it Click it $().animate()를 사용해줍니다.첫 번째 파라메터로는 변경될 내용을 적어주시고두 번째 파라메터로는 속도를 적어주시면 됩니다.속도는 "fast", "slow" 가 있고, 숫자를 입력해주셔도 됩니다. animate()를 사용할실때에는 CSS에 position 이 Relative 또는 Absolute가 있어야 합니다. 결과. 더보기 Query Basic 8강 - Toggle() Toggle() 을 사용해보도록 하겠습니다.참고로 toggle() 객체는 jQuery 1.9 버전에서 정상동작을 하지 않더군요.. 소스를 보시죠. 위 구성에서 시작하겠습니다. 우선 부분에 내용을 넣어줍니다. 그 다음 태그를 클릭 이벤트를 만들어줍니다. 마지막으로 태그로 효과를 넣어줍니다. 결과를 확인해보겠습니다. 클릭 시 위와 같이 주황색으로 바끼고 또 다시 클릭시 검은색으로 바낍니다. 더보기 JQuery Basic 7강 - show() & hide() 이번에는 Click 시 show/hide 가되는 동작을 구현해 보도록하겠습니다. 먼저 소스를 보시죠. Allips RintIanTta Silverlight Windows Phone Web Development 기존 소스에 하나씩 추가해보겠습니다. 먼저 버튼을 하나 만들겠습니다. 그리고 버튼 클릭 시에 대한 이벤트를 만들어주겠습니다. 결과. 더보기 jQuery Basic 6강 - Event 지난 시간에 addClass()와 removeClass()를 배웠으니, 이제는 Event를 구성하겠습니다. 먼저 소스를 보시죠. 태그안에 내용을 넣었습니다. 그리고 먼저 태그에 Hover()를 사용하였습니다. hover() 안에 두가지 함수를 넣어주시면, In hover, out hover로 나뉜닙니다.그리고 나서 두가지 함수를 추가한다음 color 옵션을 넣었습니다. 확인해보겠습니다. 지난번에 사용한 addClass와 removeClass()와 연관되어 사용됩니다. Allips RintIanTta Silverlight Windows Phone Web Development 결과. addClass()나 removeClass() 외에도 toggleClass()라는 것도 있으니 사용해보시기 바랍니다. 더보기 jQuery Basic 5강 - addClass() & removeClass() age.html 먼저 소스를 보겠습니다. 그리고 태그안에 내용을 넣어주세요. 그 다음 위와 같이 태그를 주겠습니다. 그리고 오늘의 주제인 addClass()를 봅시다.원래 위 태그 내를 보시면 class 속성을 하나도 주지 않았기 때문에 스타일이 먹히지 않습니다. 그래서 저희가 jQuery를 사용해 태그에 클래스를 지정해주겠습니다. 자 이제 결과를 확인해 보겠습니다. addClass() 를 사용해 보았습니다. 이번에는 removeClass()를 사용해보겠습니다.addClass()로 지정한 것을 removeClass()로 제거하는 것 입니다. 결과. addClass()와 removeClass()를 사용해보았습니다. 더보기 jQuery Basic 4강 - 변수 & 연속사용 을 다음과 같이 변수에도 넣어줄 수 있습니다. 변수에 넣어주면 다음과 같이 두개의 옵션을 적용할 수 있습니다.참고로 그냥 .css({color:"Red", background-color:"Orange"}) 이런식으로도 사용할 수 있습니다. 결과. 참고로 이렇게 사용할 수도 있답니다. 더보기 jQuery Basic 3강 - Selector 이번에는 jQuery에서 CSS 를 해보도록 하겠습니다. [HTMLPage.html]에 아래와 같이 추가합니다. 그 다음 태그에 CSS를 줘보겠습니다. 결과를 확인하면.. 위와 같은 결과가 나옵니다. 자, 이제 style 태그를 지우고 jQuery를 사용해보도록 하겠습니다. 태그에 color을 Red로 하겠다. 이네요.결과를 확인해 보면 위 css로 적용한 결과와 동일할 것 입니다. 이번에는 여러개의 태그에 적용해보겠습니다. 여러개의 태그에 각 옵션을 주기위해서 id 와 class를 사용하였습니다. 확인. 더보기 이전 1 2 3 4 다음
