프론트엔드 정복하기

[ data( ) 함수로 데이터 저장 ] $(selector).data(key, value) /** html **/ content // javascript $('span').data('name', '성별') [ data( ) 함수로 데이터 읽기 ] $(selector).data(key) $(selector).data( ) ----> key를 생략할 경우, 해당 엘리먼트에 저장된 모든 data들이 JSON 형식으로 리턴 [ data( ) 함수로 데이터 삭제 ] $(selector).removeData(key) [ data-* 형식으로 데이터 저장 ] HTML5에서 HTML 엘리먼트에 data-* 형식을 이용해서 데이터를 저장할 수 있게 됐다. jQuery의 data()를 이용해 저장한 것과 동일한 효과를 ..

HTML /** 탭 Nav Bar **/ Pictures Music /** 탭 Contents **/ Pictures Music CSS #tab-content p { display: none; } #tab-content p.is-active { display: block; } Jquery $(document).ready(function() { // 탭을 클릭하면 $('#tabs li').on('click', function() { var tab = $(this).data('tab'); $('#tabs li').removeClass('is-active'); $(this).addClass('is-active'); $('#tab-content p').removeClass('is-active'); $('p[da..

우리는 보통 jQuery로 클릭 이벤트를 생성하기 위해서 다음의 코드를 작성한다.$(id).click(function() { ... });  --> element가 js를 처음 로드한 시점 이후에 생긴 경우 click 이벤트가 적용되지 않음.$(document).on('click', 'id', function)  위와 같이 작성하게 되면 element가 동적으로 추후에 생성됐다 할지라도 이벤트가 동작한다.  --> click 이벤트가 여러번 등록될 가능성 존재페이지가 새로고침되거나 한 번 더 실행 될 때마다 click 이벤트가 계속 등록이 되어서 나중에는 click 이벤트가 여러 번 실행되는 현상이 발생한다. 그것을 방지하기 위해서 e.stopImmediatePropagation() 메소드를 실행시켜줘야..

예시 $('.chart1').circleProgress({ size:200, //그래프 크기 startAngle: -Math.PI/2 , //시작지점 (기본값 Math.PI) value: 0.3, //그래프에 표시될 값 animation: false, //그래프가 그려지는 애니메이션 동작 여부 fill: {gradient: ['#ff1e41', '#ff9f8e']} }); $('.chart2').circleProgress({ startAngle: -Math.PI/2 , //시작지점 (기본값 Math.PI) value: 0.38, //그래프에 표시될 값 animation: true, //그래프가 그려지는 애니메이션 동작 여부 reverse:true, //그래프가 반대방향으로 그려질지 thickness:10..

https://stackoverflow.com/questions/7404952/jquery-combine-ready-and-resize