작성일 : 11-11-29 19:50
|
[JQuery] (JQuery Source) .bind() .click() , .dblclick() , width(), height() , one() and mouseover
|
 |
|
글쓴이 :
조형래
 조회 : 4,333
|
<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="마우스 오버시 크기 구하기" />
|
|
950
