본문 바로가기

공부/자바스크립트 jQuery36

jQuery) 이벤트 연결 bind() - 클릭할때마다 글에 '+'가 붙는 에제 jQuery를 사용해 이벤트를 연결하는 가장 기본적인 방법은 bind() 메서드를 사용하는 것이다. Header0 Header1 Header2 ㅠㅠ 나도 소스코드만 따악 예쁘게 넣고 싶은데 그게 내 맘처럼 안되서 아쉽다. 역시 내 곁에는 표 뿐인가.. 2012. 3. 11.
jQuery) 지속적 이미지 순서 변경 (문서 객체의 이동) 기존에 존재하는 문서 객체를 선택하고 문서 객체 삽입 메서드를 사용하면, 문서 객체를 쉽게 다른 곳으로 이동시킬 수 있다. setInterval() 함수를 사용했기 때문에 2초마다 문서 객체의 순서를 변경할 수 있다. 코드를 실행하면 첫 번째 이미지가 계속 body 태그의 뒷부분으로 옮겨지므로 이미지 순서가 계속 변경된다. //헤드에 넣어준다. $(document).ready(function () { //$('img').first().appendTo('body'); //.image의 크기를 조정합니다. $('img').css('width', 250); //함수를 2초마다 실행합니다. setInterval(function () { //첫 번째 이미지를 마지막으로 보냅니다. $('img').first().a.. 2012. 3. 10.
jQuery) 필터 선택자를 사용한 테이블 줄무늬 이름 혈액형 지역 강민수 AB형 충청북도 구지연 B형 충청남도 김미화 O형 경상도 김선화 O형 서울특별시 남기주 O형 제주도 윤하린 O형 전라도 2012. 3. 9.
jQuery) 속성 선택자 선택자 형태 설명 요소[속성] 특정 속성을 가지고 있는 문서 객체를 선택합니다. 요소[속성=값] 속성 안의 값이 특정 값과 같은 문서 객체를 선택합니다. 요소[속성~=값] 속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택합니다. 요소[속성^=값] 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택합니다. 요소[속성$=값] 속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택합니다. 요소[속성*=값] 속성 안의 값이 특정 값을 포함하는 문서 객체를 선택합니다. 2012. 3. 9.
실무에 꼭 쓸 jQuery 플러그인 모음 출처 : http://cafe.naver.com/jquerymobile/17 liteAccordion - a horizontal accordion plugin for jQuery: 아코디언 효과 / 메인화면에 주요 상품이나 이벤트를 여러개 보여 줄때 유용하다. Google Wave-like: 댓글 다는 모양 깔끔하고 움직임을 추가 하였다. Google Powered Site Search with jQuery: 구글 검색기를 재구성하였다. 멋지다. Slideshow Basic : 기본적인 좌우 슬라이드쇼 깔끔하고 단순해서 좋다. s3Slider jQuery plugin: 메인 플래시 대신 꾸미기에 적당하다. 다양한 차트 구현 플러그인 : 다양하게 차트를 다이나믹하게 구현 2012. 2. 1.
jQuery) 폼에 포커스 주기, 필드사용/사용안함 사용자의 편의를 위해 폼에 포커스를 줄때 필드가 username이라는 아이디를 가졌다면 아래와같이 써서 이 필드에 focus를 줄 수 있다. $(document).ready(function(){ $('#username').focus(); }); 이렇게 해도 가능하지만 좀 더 여러군데에서 쓰려면 $(document).ready(function(){ $('#signup :text')[0].focus(); }); signup이라는 아이디를 가진 폼의 첫 번째 텍스트 필드에 커서가 위치하기를 원한다면 이렇게 할 수 있다. 선택자 $('#signup :text')는 signup 폼의 텍스트 필드만 선택한다. 이건 나중에 결제가 필요한 홈페이지를 만들경우 제일 유용할 것 같다. 요즘 인터넷들이 빨라서 이런경우가 드.. 2012. 1. 30.