본문 바로가기

HTML36

jQuery removeClass, addClass - 활용하기 $('img').hover(function(){ $(this).addClass('csty'); --> 현재 이벤트 중인 img에 style 주기 }, function(){ $(this).removeCalss('csty'); --> 현재 이벤트 중인 img에 style 제거하기 }) $('.guess_box').on('click', function(){ $('p').remove(); --> p태그 지우기 $('', {'id' : 'sale'}).appendTo(this); --> id sale인 p태그 생성 ran = (Math.floor)(Math.random()*6+5); --> 랜덤값 생성 $('p').text("할인율 : " + ran + "%"); --> p태그에 랜덤값 입력하기 $(this).u.. 2020. 1. 18.
jQuery delegate() - 버튼 만들기 $(document).delegate('.btn', 'click', function(){ $('', {'type' : 'button', 'class' : 'btn', 'text': '새로운버튼'}).appendTo('#result'); }) --> 버튼 클릭 시 '새로운버튼' result div에 추가하기 $('#stop').on('click', function(){ $(document).undelegate('click'); }) --> id: stop 버튼 클릭 시 버튼 생성 이벤트 종료시켜 새로운 버튼 추가 막기 2020. 1. 18.
jQuery delegate() - span태그 추가/삭제하기 delegate - $(document).delegate(선택자, 이벤트명, 핸들러 ); - 1.7 버전 에서는 모든 이벤트 등록 메소드를 통합하는 메소드가 새로 도입 : on(이벤트명, [선택자], 핸들러) off( 이벤트명, [선택자], 핸들러) - 선택자 가 있으면 delegate와 같고 없으면 bind와 같다 ex) --> 다 같은 의미이다. $('div').delegate('.btn', 'click', function(){}) $('div').on('click', '.btn', function(){}) $(document).on('click', '.btn', function(){}) $(function(){ count=0; $('div').on('click', '.add', function(){.. 2020. 1. 17.
jQuery dblclick() - 더블클릭으로 이미지 숨기기 $(function(){ $('img').on('dblclick', function(){ --> img 더블클릭 시 이벤트 발생 $(this).hide(); --> 더블 클릭한 이미지 숨기기 if($('img:visible').length == 0){ $('button').css('display', block); } }) }) 2020. 1. 16.
jQuery stopPropagation()사용하기 $('button').click(function(){ --> 버튼 클릭 시 버튼의 크기 증가 $('button').css('width', '+=10px').css('height', '+=3px').event.stopPropagation(); }) $('#sp2').click(function(){ --> span(id="sp2")클릭 시 span 태그의 배경색 녹색으로 변경 $('#sp2').css('background', 'green'); event.stopPropagation(); }) $('div').click(function(){ --> div 클릭 시 div 테두리 생성 $('div').css('border', 'solid 10px lightgreen'); event.stopPropagation(.. 2020. 1. 15.
jQuery keyup() - 글자 수 초과되는거 막기 $('textarea').keyup(function(){ len = $(this).val().length; --> 현재 작성한 글자의 길이를 가져옴 $('span').text(100-len); --> 100에서 현재 글자 수의 값을 뺀 결과를 span태그에 띄움 if(len>100){ --> 작성한 글자가 100자가 초과되면 alert창을 띄우고 더 이상 작성인 안되게 함 alert('입력가능한 글자가 초과되었습니다.'); $(this).prop('readonly', true); } }) 2020. 1. 14.

티스토리툴바