제이쿼리 썸네일형 리스트형 jQuery 자식 요소 반환 (:not 예제) 제이쿼리 자식요소 반환 parent()와 children()의 이용하면 자식요소와 부모요소의 손쉬운 선택이 가능한데요. 이때 자식요소 내에서 특정한 선택자만 반환하여 제외시키는 것을 알아볼까합니다. 바로 .children(':not(반환요소)') 를 사용해 주시면 되는데요. 바로 예제 보여드리겠습니다. 클릭 1 2 3 4 5 위처럼 작성을 하시면 click을 클릭했을때 test 클래스 자식요소에 on클래스를 추가하는데 click 클래스만 제외시키라는 명령이 됩니다. 이때 .children(':not(.click)') 가 아닌 .children()를 썼다면 클릭까지 모든 텍스트가 빨간색으로 출력되게 됩니다. jQuery 메서드 이벤트 정리 제이쿼리 메서드 이벤트 정리 ※ append(), prepend(), appendTo(), prependTo(), after(), before(), insertAfter(), insertBefore() $(A).append(B) //A 뒤에 B 추가 $(A).prepend(B) //A 앞에 B 추가 $(A).appendTo(B) //A를 B 뒤에 추가 $(A).prependTo(B) //A를 B 앞에 추가 $(A).after(B) //A 뒤에 B 추가 $(A).before(B) //A 앞에 B 추가 $(A).insertAfter(B) //B 영역 다음에 A 추가 $(A).insertBefore(B) //B 영역 앞에 A 추가 테스트 $(function(){ $('입니다').insertAfter('.tex.. 제이쿼리 슬라이드 (bxSlider) 제이쿼리 슬라이더 플러그인 bxSlider 사이트를 만들다 보면 기본적으로 많이 사용하는 이미지를 슬라이드 시키는 슬라이더나 메뉴, 레이어 팝업 등은 사용하는 플러그인들이 픽스가 되는데요~!! 오늘 부터 제가 자주 사용하는 플러그인들을 하나씩 소개해 드릴까 합니다. 먼저 소개해드릴 제이쿼리 플러그인은 슬라이더인데요~ bxSlider는 옵션도 깔끔하고 반응형으로도 확장이 가능해서 자주 사용하고 있습니다. bxSlider는 Steven Wanderski라는 분이 2014년에 제작한 제이쿼리 슬라이더로 http://bxslider.com 에서 자세한 설치방법과 markup을 확인하실 수 있습니다. (영어 울렁증 주의요망.. 또르르) 그럼 지금부터 사이트 가서 보기도 귀찮다~~ 싶으신분들을 위해서 하단에 플러그.. 제이쿼리 슬라이드 배너 (ulslide) 제이쿼리를 이용한 간단한 슬라이드 배너를 소개해 드리겠습니다. 슬라이더를 검색하다가 간단한 슬라이더가 있어서 가져왔어요~ 버튼을 누르면 화면이 이동하고 마우스를 올려놓지 않으면 자동으로 롤링됩니다. 그럼 소스 나갑니다. 아래는 결과물 화면 캡쳐한 모습이에요. 제이쿼리 달력 달기 (datepicker) 제이쿼리 달력 플러그인 중에 많이 쓰이는 달력, datepicker를 소개해 드릴까 합니다. 먼저 http://jqueryui.com/download 에서 "datepicker"를 검색합니다. 플러그인을 다운받은 후 링크만 시켜주면 되는데요. JQuery Core 파일은 반드시 그 위에 external 시키시고, 안에 태그를 선택할 수 있는 selector를 지정합니다. 그럼 default로 사용 가능하죠. datepicker에 옵션을 추가해 줄 수 있는데 그 방법은 두가지가 있습니다. constructor를 만들고 option을 넣는 법. constructor를 만들때 argument로 {} 안에 option을 넣는 법 *옵션 1.animation animation의 종류에는 "show"."slideD.. 제이쿼리 레이어 팝업 (bpopup) 레이어팝업이란? DIV 태그를 이용한 방법으로 사용자가 팝업 수행을 요청하면 DIV 영역을 제외한 부분의 명암이 어두워지면서 팝업이 띄워지는 형태를 말합니다. 대표적으로 아마존닷컴 같은 쇼핑사이트에서 이미지를 표시할 때 많이 사용됩니다. 그럼 샘플 소스를 통해 레이어팝업 예제를 수행해 보겠습니다. X 레이어 팝업이 완성 되었습니다. 팝업에 대한 크기는 content div에서 조정이 가능합니다 결과물 : 이전 1 다음
