본문 바로가기

javascript/jQuery

(13)
jQuery eq(index)에서 eq의 뜻이 뭘까? jQuery의 eq(index)를 사용할 일이 생겨서 사용은 하고 있는데... e는 아무래도 element인것 같은데~ q는 수량의 stackoverflow.com/questions/15059207/what-does-eq-in-the-jquery-eq-method-stand-for 여기 사이트를 보고 알게되었다. eq(index)의 equ는 element queue 구나~! queue는 열, 대기열 차례 그런 뜻.... eq의 사용법과 뜻과 예제가 있는 아래의 사이트를 참고하세요~ www.w3schools.com/jquery/traversing_eq.asp jQuery eq() Method jQuery eq() Method ❮ jQuery Traversing Methods Example Select th..
[jQuery] 메뉴 요약 정보 표시하기 메뉴에 마우스 오버시, 간략한 정보를 표시하는 툴팁tooltip같은 것을 적용해보도록 하겠습니다. ,h3>jQuery $(document).ready(function(){ // hide span element $('.w').hide(); $('.m').hide(); $('.s').hide(); // show class name 'w' $('#w').hover(function(event){ $('.w').show(); $('.m').hide(); $('.s').hide(); $('#w').addClass('hover'); }, function(){ $('#w').removeClass('hover'); }); //show class name'm' $('#m').hover(function(event){ $('..
[jQuery] 메뉴 항목에 Hover 효과 추가하기 HTML 파일에는 "강아지"라는 리스트로, 순서가 없는 엘리먼트를 작성합니다. 강아지의 종류로 웰시코기, 말라뮤트, 시바 3가지 항목을 추가했습니다. HTML 코드는 아래 codepen을 확인해주세요. 순서없는 리스트가 메뉴모양을 갖추도록 간단하고 심플하게 스타일을 적용했습니다. 스타일시트에 타입 선택자를 작성해서 세 엘리먼트에 자동 적용되도록 합니다. 아래와 같이 CSS를 작성합니다. css div{width:200px; box-sizing:border-box;} ul{list-style:none; box-sizing:border-box; margin:0; padding:0; background:#eeeeee; } ul > li {width:100%; padding:0.8em; box-sizing:bo..
[jQuery] ul 메뉴를 브랜드크럼 메뉴( breadcrumb ) 스타일로 표현하기. 브랜드크럼 메뉴 breadcrumb 현재의 위치를 홈 > 서비스 > 서비스 상세 같이 표시하는 것을 브랜드크럼이라고 부릅니다. 빵조각이라는 뜻으로 '헨젤과 그레텔'이야기에서 빵조각으로 돌아갈 길을 표시한다는 의미에서 유래되었습니다. CSS .listStyle{padding:20px; display:inline;} .listStyle::before {padding-right:15px; content:">"; font-size:0.75em; color:#266FEF; } .ulListStyle {list-style: none; display:inline; margin:0; padding:0;} jQuery $(document).ready(function(){ $('ul').addClass('ulListSty..
[jQuery] scroll to top 스크롤 탑 버튼 만들기 $(document).ready(function(){ // hide #toTop first $("#toTop").hide(); // fade in #toTop $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); // scroll body to 0px on click $('#toTop a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); See the Pen scroll to top butto..