:: 글답변 :: 이 름 패스워드 이메일 홈페이지 옵 션 html  분 류 선택하세요 Html CSS Script JQuery ASP PHP GNU .NET MySQL MsSQL DNS SEO ENG IONIC REACT 제 목 > > > <style type="text/css"> > .yellow { background-color:Yellow; border:1px solid red; } > .redColor { color:Red; } > .hover { cursor:hand; background-color:Yellow; } > #my2 { background-color:Yellow; } > </style> > <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> > <script type="text/javascript"> > $(document).ready(function () { > $('#btnClick').bind("click", function () { alert('클릭됨'); }); > $('#btnClick').bind("mouseover", function () { > document.getElementById('btnClick').style.backgroundColor = 'red'; > }); > $('#btnClick').bind("mouseout", function () { > $('#btnClick').get(0).style.backgroundColor = ''; > }); > > $('#btnClick2') > .bind('mouseover', function () { $('#btnClick2').addClass('yellow'); }) > .bind('mouseout', function () { $(this).removeClass('yellow'); }); > > //[1] 닷넷코리아 레이어 클릭시 CSS 클래스 해제 > $('#dnk').bind('click', function () { > //[a] 해제 > $('#mainMenu .redColor').removeClass('redColor'); // 3개의 요소의 CSS 클래스 해제 > //[b] #dnk만 다시 적용 > $(this).addClass('redColor'); // 현재 나만 다시 적용 > }); > //[2] mainMenu의 모든 항목에 대해서 click 이벤트 적용 > $('#mainMenu .redColor').bind("click", function () { > //[!] this.id로 분기 > if (this.id == "va") { > alert("비주얼 아카데미 클릭"); > } > else if (this.id == "ll") { > alert($(this).text()); // #ll 안에 들어있는 텍스트 > } > }); > > // 특정 요소에 클릭 이벤트를 적용 : bind()보다 간편 > $('#mainMenu .redColor3').click(function () { > if (this.id == "dnk") { > location.href = "http://www.dotnetkorea.com"; > } > else if (this.id == "va") { > window.open("http://www.VisualAcademy.com/", "", ""); > } > }); > > // hover 로 마우스 오버와 아웃을 동시처리, 스타일 시트 정의해놓아야 함 > > $('table tr:gt(0)').hover( > function () { $(this).addClass('hover'); }, > function () { $(this).removeClass('hover'); } > ); > > // [!] bind(), click() 메서드와 달리 one() 메서드는 딱 한번만 실행되고, 이벤트가 해제됨. > $("#my .hover").one("click", function () { alert('한번만 클릭'); }); > > //검색된 요소의 크기 구하기 > $('#btnSize').dblclick(function () { > var msg = $('#my2').width() + ", " + $('#my2').height(); > window.alert(msg); > }); > > $('#btnSize2').mouseover(function () { > alert("outerHeight : " + $("#my").outerHeight()); // outerHeight() : 마진을 제외한 영역의 크기 > alert("outerHeight(true) : " + $("#my").outerHeight(true)); // outerHeight(true) : 마진을 포함한 영역의 크기 > }); > > }); > </script> > <div id="btnClick">클릭하세요!!!</div> > <div id="btnClick2">마우스를 올려보세요~</div> > <div id="mainMenu"> > <div id="dnk" class="redColor">닷넷코리아</div> > <div id="va" class="redColor">비주얼아카데미</div> > <div id="ll" class="redColor">라이선스랜드</div> > </div> > <div id="mainMenu"> > <div id="dnk" class="redColor3">닷넷코리아</div> > <div id="va" class="redColor3">비주얼아카데미</div> > <div id="ll" class="redColor3">라이선스랜드</div> > </div> > <table border="1"> > <tr> > <td>제목</td> > </tr> > <tr> > <td>ASP.NET</td> > </tr> > <tr> > <td>ASP.NET</td> > </tr> > </table> > > <div id="my"><input type="button" id="btn" value="버튼" class="hover" /></div> > > <div id="my2"> > <p>jQuery</p> > <p>Ajax</p> > </div> > <input type="button" id="btnSize" value="더블 클릭시 크기 구하기" /> > <input type="button" id="btnSize2" value="마우스 오버시 크기 구하기" /> > 링크 #1 링크 #2 파일첨부   왼쪽의 글자를 입력하세요.