복습 ARCHIVE/java script
[jQuery] .click(), .filter(), .slice(),.toggle(), .hover(),.one()
SummerON
2021. 6. 7. 23:28
.click()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bind() 중 click 이벤트는 click()메서드로 사용</title>
<style type="text/css">
.redColor{ color:Red }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// 특정 요소에 클릭 이벤트를 적용 : bind()보다 간편
$('#mainMenu .redColor').click(function() {
if (this.id == "dnk") {
location.href = "http://www.dotnetkorea.com";
}
else if (this.id == "va") {
window.open("http://www.VisualAcademy.com/", "", "");
}
});
});
</script>
</head>
<body>
<div id="mainMenu">
<div id="dnk" class="redColor">닷넷코리아</div>
<div id="va" class="redColor">비주얼아카데미</div>
<div id="ll" class="redColor">라이선스랜드</div>
</div>
</body>
</html>
.filter()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기</title>
<style type="text/css">
.redBorder { border:solid 1px red; }
.five { border-width:5px; }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').addClass('redBorder') // 모든 이미지에 redBorder 클래스 적용
.filter('[title*=닷넷]').addClass('five') //'닷넷'title만 뽑아서 five 클래스 적용
.end() // 부모로 이동
.filter('[alt$=디드]').removeClass('redBorder'); // '디드'로 끝나는 스타일 제거
});
</script>
</head>
<body>
<img src="" title="닷넷" alt="닷넷" />
<img src="" title="자바" alt="자바" />
<img src="" title="임베디드" alt="임베디드" />
</body>
</html>
.slice()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>slice() 메서드로 지정된 개체만 가져오기</title>
<style type="text/css">
.red { color:Red; }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// size() 해당 결과값(집합)의 개수
alert("현재 웹 페이지에는 " + $('input').size() + "개의 input 태그가 있다.");
// 2번째와 3번째만 스타일 적용
$('input').slice(1,3).addClass('red'); // 1번째 인덱스에서 (3-1)번째 인덱스까지
});
</script>
</head>
<body>
<h1>2번째와 3번째 버튼에만 빨간 글씨 적용</h1>
<input type="button" value="버튼" /> <!-- 0번 -->
<input type="button" value="버튼" /> <!-- 1번 -->
<input type="button" value="버튼" /> <!-- 2번 -->
<input type="button" value="버튼" /> <!-- 3번 -->
</body>
</html>
.toggle() - 두가지 함수를 서로 번갈아가며 사용
1. 메서드로 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggle() 메서드로 토글링</title>
<style type="text/css">
.hidden { display:none; }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").toggle(
// .toggle(fn1, fn2); // fn1과 fn2를 서로 토글링한다...
function() { $('#myLayer').addClass("hidden"); },
function() { $('#myLayer').removeClass("hidden"); }
);
});
</script>
</head>
<body>
<h1>버튼을 클릭할 때마다 레이어 보이기/숨기기</h1>
<input id="btn" type="button" value="버튼" />
<div id="myLayer" style="background-color:Yellow;">
안녕
</div>
</body>
</html>
2. 메서드로 설정2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggle() 메서드로 토글링</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").toggle(fn1, fn2);
function fn1() {
$('#myLayer').addClass("hidden");
}
function fn2() {
$('#myLayer').removeClass("hidden");
}
});
</script>
</head>
<body>
<h1>버튼을 클릭할 때마다 레이어 보이기/숨기기</h1>
<input id="btn" type="button" value="버튼" />
<div id="myLayer" style="background-color: Yellow;">안녕</div>
</body>
</html>
3. toggleClass - addClass()+removeClass()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggleClass() 메서드로 CSS 클래스에 대한 토글링</title>
<style type="text/css">
.hidden { display:none; }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btn').click(function() {
//[!] hidden CSS Class에 대해서 addClass() <-> removeClass()
$('#myLayer').toggleClass('hidden');
})
});
</script>
</head>
<body>
<h1>버튼을 클릭할 때마다 레이어 보이기/숨기기</h1>
<input id="btn" type="button" value="버튼" />
<div id="myLayer" style="background-color:Yellow;">
안녕
</div>
</body>
</html>
.hover()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover()로 마우스오버와 아웃을 동시 처리</title>
<style type="text/css">
.hover { cursor:hand; background-color:Yellow; }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table tr:eq(1)').hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); }
);
});
</script>
</head>
<body>
<table border="1">
<tr><td>제목</td></tr> <!-- 0번 -->
<tr><td>ASP.NET</td></tr> <!-- 1번 -->
<tr><td>ASP.NET</td></tr> <!-- 2번 -->
</table>
</body>
</html>
.one() - 딱 한번만 실행 됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>one()메서드로 한번만 실행</title>
<style type="text/css">
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//[!] bind, click() 메서드와 달리 one() 메서드는 딱 한번만 실행되고, 이벤트가 해제됨
$("#btn").one("click", function() { alert('한번만클릭'); });
});
</script>
</head>
<body>
<div id="my">
<input type="button" id="btn" value="버튼" />
</div>
</body>
</html>
.CSS 직접 설정하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폰트 늘리기 및 줄이기</title>
<style type="text/css">
.button { background-color:Yellow; }
.region { color:Red; }
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.button').click(function() {
var $region = $('div.region');
var currentSize = $region.css('fontSize'); // "16px"
alert(currentSize);
var num = parseFloat(currentSize, 10); // "16px" => 16
alert(num);
var unit = currentSize.slice(-2); // "16px" => "px"
alert(unit);
if (this.id == 'goBig') {
num *= 1.5;
}else if (this.id == 'goSmall') {
num /= 1.5;
}
$region.css('fontSize', num + unit); // 24+"px" => "24px"
});
});
</script>
</head>
<body>
<div id="btn">
<div class="button" id="goBig">늘리기</div>
<div class="button" id="goSmall">줄이기</div>
</div>
<br>
<div class="region">
안녕하세요. 여기는 본문입니다.
</div>
</body>
</html>
browser
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>브라우저 버전</title>
<style type="text/css">
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// IE 8.0이지만, 6.0으로 나타남
// jQuery 유틸리티 함수
alert('현재 웹 브라우저 버전은 : ' + jQuery.browser.version + '입니다.');
});
</script>
</head>
<body>
</body>
</html>
.callBack - 매개변수로 함수를 전달 하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>콜백 : 매개변수로 함수를 전달</title>
<style type="text/css">
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p:eq(1)') //[1] 두번째 p 태그 영역
.css('backgroundColor', 'Yellow') //[2] 두번째 영역의 배경색 지정
.click(function() {
var $thisPara = $(this); //[3] 현재 영역을 변수에 설정
$thisPara.next()
.slideDown('slow', function() { //[4] 두번째의 다음 요소를 슬라이드 다운
$thisPara.slideUp('slow'); //[5] 현재 자신(두번째)를 슬라이드 업
});
});
});
</script>
</head>
<body>
<p>첫번째</p>
<p>두번째</p>
<p style="display:none;">세번째</p>
<p>네번째</p>
</body>
</html>