반응형 제이쿼리9 CSS3 + jQuery로 버튼효과 HTML5 1 cilck CSS3 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 .more_btn { overflow: hidden; display: block; position: relative; width: 160px; margin-top: 45px; border: 1px solid skyblue; font-size: 13px; font-weight: 700; line-height: 54px; text-align: center; color: #222; -webkit-transition: color .4s; transition: color .4s; font-.. 2019. 9. 25. jQuery 효율적으로 사용하기 한 번 탐색한 DOM을 다시 탐색하게 하지 않기 bad code 1 2 3 4 5 6 7 8 9 10 11 $('button').on('click', function() { // DOM 한번 탐색 $('.modal').modal(); // DOM 다시 한번 탐색 $('.modal').addClass('active'); // DOM 또 다시 한번 탐색 $('modal').css(...); }); good code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $('button').on('click', function() { // DOM 한번만 탐색 (체이닝) $('.modal') .modal() .addClass('active') .css(...); }); $('button').. 2019. 9. 25. on이벤트에 파라미터 전달 1 2 click click 1 2 3 4 5 6 7 8 9 10 11 12 13 var btn1 = $('.btn1'); var btn2 = $('.btn2'); var two = 2; var three = 3; btn1.on('click', { number : 1}, test); btn2.on('click', { number : 2}, test); function test( $e ){ alert( $e.data.number ); } on이벤트에 { name: } 이라는 파라미터를 만들고 data.number로 호출하면 버튼을 클릭했을때 각각 1,2가 출력된다. 2019. 9. 25. 이전 1 2 다음 반응형
