본문 바로가기

공부/jQuery

스크롤 높이에 반응해 클래스 추가 삭제하기 스크롤이 일정 부분 움직였을 때 원하는 곳에 클래스를 추가 삭제하는 방법을 알아보겠습니다. $(function(){ var fixScroll = 0; $(window).scroll(function(event){ var scroll = $(this).scrollTop(); if (scroll > 600){ //스크롤 높이 설정 $("header").addClass("fix"); } else { $("header").removeClass("fix"); } fixScroll = scroll; }); }); 위 코드를 사용하면 스크롤 높이를 600 이동했을 때 header에 fix 클래스를 추가하고 스크롤이 제일 상단 탑으로 돌아갔을 때 fix 클래스를 삭제할 수 있습니다.
움직이는 햄버거 메뉴 버튼 만들기 모바일 메뉴에서 빼놓을 수 없는 햄버거 버튼에 마우스를 올리거나 클릭 시 X자 형태의 닫힘 형태로 transform 시켜서 닫힘 버튼을 만들 수 있습니다. 가장 좋은 방법은 샘플 소스를 읽어가는 방법이겠죠? 하단에 html, css, jquery 소스를 예시로 적고 간략한 설명을 주석으로 달아보겠습니다. ​ ​ 예시) html 작성 //메뉴 클래스에 빈 span을 3개 그려넣습니다. 예시) css 작성 /*기본 css*/ .menu, .menu span { display : inline-block; transition : all 0.4s; box-sizing : border-box;} .menu { position : relative; width : 44px; height : 44px;} .menu sp..
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..
제이쿼리 반응형 슬라이드 (swiper) 제이쿼리 슬라이드 SWIPER는 IE10 이상을 지원하는 반응형 슬라이드 입니다. ​ ​ 사용방법 https://github.com/nolimits4web/swiper/releases 위 깃허브에 접속해서 최신버전 반응형 슬라이드 swiper 를 다운받습니다. ​ 파일을 다운로드하여 압축을 풀고 html에 연결합니다. css 파일과 js 파일은 pakage 폴더 안에있으니까 거기서 찾으시면 됩니다. Slide 1 slide 2 slide 3 slide 4 슬라이드 안에 내용은 swiper-slide로 감싸고 그 상위는 swiper-wrapper로 감싸고 제일 위에 swiper-container 로 감싸주세요. new Swiper('.swiper-container'); 마지막에 자바스크립트에서 swiper..
제이쿼리 슬라이드 (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에서 조정이 가능합니다 결과물 :
jQuery 자식요소 내 요소 선택 자식요소를 찾는 메소드로는 find()와 children()이 있습니다. 처음에 두가지 요소에 무슨 차이가 있는지 몰라서 그냥 두개를 하나씩 넣어서 되는걸 사용했던 1인입니다. 그런데 이제 알고보니 children() 메소드가 한단계 아래의 요소중에서 찾는다면 find()는 모든 자식 요소 내에서 찾는점이 다르다고 합니다. (와..뭐..막..알듯말듯..계속 걍 번갈아 넣어볼 것 같은 느낌적인 느낌..) 1 2 이렇게 스크립트를 쓰게되면 btn을 클릭했을때 btn 내부에 p를 찾아서 on 클래스를 추가해주라는 내용이 됩니다. 만약에 btn 클래스가 여러개 있고, 내가 클릭한 btn의 자식요소에만 영향을 주고싶다면 아래와 같이 써주세요. 1 2 1 2 $('.btn').click(function() { $(..
jQuery 선택자 (selector) 1. 선택자 (Selector) 1. 기본 선택자 선택자 기능 태그 HTML 태그로 선택 .class 클래스 속성을 가지는 태그 선택 #id id속성을 가지고 있는 태그 선택 * 모든 태그 선택 2. 속성 선택자 선택자 사용법 기능 $("요소 선택[속성]") $("li[tktle]") 요소 중 속성이 포함된 요소만 선택 $("요소 선택[속성=값]") $("li[title='list']") 요소 중 속성이 값인 요소만 선택 $("요소 선택[속성^=텍스트]") $("a[href^='http://']") 요소 중 속성이 텍스트로 시작하는 요소만 선택 $("요소 선택[속성$=텍스트]") $("a[href$='.com']") 요소 중 속성이 텍스트로 끝나는 요소만 선택 $("요소 선택[속성*=텍스트]") $("a..
jQuery 기본 구조 (작성법) 제이쿼리 입문/시작하기 자바스크립트의 라이브러리 중 하나인 JQUERY(제이쿼리) 입문을 해보려고 합니다. 제이쿼리는 자바스크립트를 간결하게 라이브러리화 시켰다고 보시면 되구요~!! 어마어마한 양의 플러그인이 존재하며. 제이쿼리를 이용해서 제가 작업한 스타일시트 등을 컨트롤하면서 화면을 다양하고 다이나믹하게 만들 수 있어서 퍼블리셔들은 꼭 알아야할 부분이라고 생각합니다. 먼저 안에 위 내용을 삽입해서 jquery를 추가시켜 줍니다. (보통은 작업 시작할때 제이쿼리 파일을 다운받아서 웹에 올리고 그 주소를 링크시켜 주는게 좋습니다) 그리고 아래 기본구조 및 입력 방식을 토대로 제이쿼리에 쿼리함수를 입력해 주면됩닌다. 제이쿼리 기본구조 및 작성기초 위와 같이 .click(); 안에 function(){}을 ..

티스토리툴바