강좌/jQuery 썸네일형 리스트형 제이쿼리(jQuery) - toggle(), toggleClass(), hover(), one() 메서드. 1. toggle메소드 사용하기 버튼을 클릭할 때마다 레이어 보이기/숨기기 Hello! 2. toggle메소드 사용하기(css 클래스에 대한 토글링) 버튼을 클릭할 때마다 레이어 보이기/숨기기 Hello! 3. hover()메소드 title JAVA ASP.NET 4. one() 메소드로 한 번만 출력(특정 이벤트를 딱 한번만 실행하기 위해서) 더보기 제이쿼리(jQuery) - filter()와 slice() 메서드. //filter메소드의 예제 //slice메소드 2번째와 3번째 버튼에만 빨간 글씨 적용 더보기 제이쿼리(jQuery) - addClass()와 removeClass() 마우스 오버시 addClass() 아웃시 removeClass() 예제 마우스를 올려보세요~ 예제 : this로 나를 제외한 나머지 선택 네이년 야후 다음 다른 예제 모든 항목에 대해서 click 이벤트 적용 네이년 야후 다음 더보기 제이쿼리(jQuery) - Selector (선택기 / 선택자) 전반적인 내용 더보기 제이쿼리(jQuery) - 선택기(Selector)로 자식요소 선택 selector를 이용해서 스타일을 바꿔보자. 우선 아래예제를 보자 위의 예제를 브라우저로 보면 아래와 같은 결과가 나온다. jQuery로 코딩된 부분을 설명하자면 li태그 에 있는 u태그의 배경색을 노란색으로 바꾸는 예제이다.JAVA항목에 태그로 감싸져 있고 jQuery에서 Q가 감싸져 있다 그래서 이들의 바탕색은 노란색이다. 다른 예를 보자 위의 예제는 myfavorites라는 id속성에 스타일을 적용하는것이다. 가 코딩이 되어 있다. jquery에서 이 아이디 안에 있는 li에다가 스타일을 적용하는것이다. 적용될 스타일은 float:left;list-style:none;margin:10px;을 주었다. 결과는 아래와 같다. id, class속성만 이해하면 어렵지 않는것 같다. 그럼 조금 더 나아가서.. 더보기 제이쿼리(jQuery) - Hello world!! 찍어보자. 1. $() 팩토리 함수(메서드, 생성자) * $() 로 CSS의 선택기(selector)와 모든 DOM요소 접근 - $("선택기").XXX메서드(); * 자바스크립트 익명 메서드(람다식) 호출 - $(document).ready(function() {....}); 2. 기본사용방법 3. 간단한 예제를 보자. 더보기 jquery 란? (정의) - 가장 많이 사용되며 잘 만들어진 오픈소스 자바스크립트 라이브러리 - 웹 개발자에게 유행이 아니라 필수 - CSS에서 사용되는 선택기/선택자(selector)개념으로 DOM의 멤버에 접근 가능 - 플러그인 개념을 도입해서 기본 기능에서 쉽게 확장 기능으로 업그레이드 가능 - 웹에서 자주 사용하는 기능의 간편화 - 메서드 체인 방식에 따른 효율적인 코딩 가능 - 크로스 브라우저 지원 - 사용하기 편한 Ajax프로그래밍 가능 - 공식 사이트 : jQuery 소스 및 문서 제공 http://jquery.com - jQuery UI사이트 : 화려한 UI관련 플러그인 제공 http://jqueryui.com 더보기 이전 1 2 3 다음
