반응형 jQuery17 제이쿼리로 슬라이드 만들기 제이쿼리로 간단한 슬라이드를 만들었습니다. PREV NEXT * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } span { margin: 0 20px; font-size: 20px; } #slider { position: relative; width: 640px; height: 480px; overflow: hidden; } #slider li { display: none; position: absolute; left: 0; top: 0; } #slider img { display: block; } #slider li:first-child { display: block; } $('#next').click(function(){ s.. 2019. 9. 26. is()로 요소 검사하기 selector, element 에 대해 일치하는 요소를 검사하고 그 중 하나 이상이 일치하면 true를 반환합니다. list item 1 - one strong tag list item 2 - two strong tags list item 3 list item 4 list item 5 $("li").click(function() { var $li = $(this); var isWithTwo = $li.is(function() { return $('strong', this).length===2; }); if (isWithTwo) $li.css("background-color", "green"); else $li.css("background-color", "red"); }); // 두번째 li를 초록색으로.. 2019. 9. 26. 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 3 다음 반응형
