-
jQuery - 이벤트웹프로그래밍/jQuery 2018. 7. 27. 13:09
.bind()
<script>
$(document).ready(function () {
// 이벤트를 연결합니다. h1태그에 'click' 이벤트를 함수로 연결
$('h1').bind('click', function () {
$(this).html(function (index, html) {
return html + '+';
});
});
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
mouseenter / mouseleave
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
// 이벤트를 연결합니다.
$('h1').bind('click', function () {
$(this).html(function (index, html) {
return html + '+';
});
});
// 이벤트를 연결합니다.
$('h1').bind({
mouseenter: function () { $(this).addClass('reverse'); },
mouseleave: function () { $(this).removeClass('reverse'); }
});
});
</script>
.hover() / .toggle()
<script>
$(document).ready(function () {
// 이벤트를 연결합니다.
$('h1').hover(function () {
$(this).addClass('reverse');
}, function () {
$(this).removeClass('reverse');
});
// 이벤트를 연결합니다.
$('h1').toggle(function () {
// 문자열의 앞에 별을 추가합니다.
$(this).html(function (index, html) {
return '★' + html;
});
}, function () {
// 문자열의 뒤에 별을 추가합니다.
$(this).html(function (index, html) {
return html + '★';
});
}, function () {
// 문자열의 별을 제거합니다.
$(this).html(function (index, html) {
return html.substring(1, html.length - 1);
});
});
});
</script>
.unbind()
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
// 이벤트를 연결합니다.
$('h1').click(function () {
// 출력합니다.
$(this).html('CLICK');
alert('이벤트가 발생했습니다.');
// 이벤트를 제거합니다.
$(this).unbind();
});
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
.trigger() 자동 이벤트
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
// 이벤트를 연결합니다.
$('h1').click(function () {
$(this).html(function (index, html) {
return html + '★';
});
});
// 1초마다 함수를 실행합니다.
setInterval(function () {
//h1 마지막 태그를 1초에 한번씩 자동클릭
$('h1').last().trigger('click');
}, 1000);
});
</script>
</head>
<body>
<h1>Start: </h1>
<h1>Start: </h1>
</body>
.click()
<head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
// 이벤트를 연결합니다.
$('h1').click(function () {
$(this).html(function (index, html) {
return html + '★';
});
});
// 1초마다 함수를 실행합니다.
setInterval(function () {
$('h1').last().click();
}, 1000);
});
</script>
</head>
<body>
<h1>Start: </h1>
<h1>Start: </h1>
</body>
.preventDefault() / stopPropagation() 이벤트 전파방지 = return false
<head>
<style>
* {
margin:5px; padding:5px;
border:3px solid Black;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('a').click(function (event) {
$(this).css('background-color', 'Blue');
event.stopPropagation();
event.preventDefault();
//return false;
});
$('h1').click(function () {
$(this).css('background-color', 'Red');
});
});
</script>
</head>
<body>
<h1>
<a href="http://hanb.co.kr">Hanb Media</a>
</h1>
</body>
.live() / .die()
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('h1').live('click', function () {
var length = $('h1').length;
var targetHTML = $(this).html();
$('#wrap').append('<h1>' + length + ' - ' + targetHTML + '</h1>');
});
// 5초 이후에는 모든 이벤트가 제거됩니다.
setTimeout(function () {
$('h1').die();
}, 5000);
});
</script>
</head>
<body>
<div id="wrap">
<h1>Header</h1>
</div>
</body>
.on() / .off()
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('div').on('click', function () {
$(this).clone().appendTo('body');
});
});
</script>
</head>
<body>
<div>
<h1>$(selector).on()</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
.mouseover()
<head>
<style>
.outer { width:200px; height:200px; background:Orange; padding:50px; margin:10px;}
.inner { width:100%; height:100%; background:Pink; }
</style>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('.outer').mouseover(function () {
$('body').append('<h1>MOUSEOVER</h1>');
}).mouseenter(function () {
$('body').append('<h1>MOUSENTER</h1>');
});
});
</script>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
.keyup() 키보드 입력 카운팅, ''자 입력
<head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function (event) {
$('textarea').keyup(function () {
// 남은 글자 수를 구합니다.
var inputLength = $(this).val().length;
var remain = 150 - inputLength;
// 문서 객체에 입력합니다.
$('h1').html(remain);
// 문서 객체의 색상을 변경합니다.
if (remain >= 0) {
$('h1').css('color', 'Black');
} else {
$('h1').css('color', 'Red');
}
});
});
</script>
</head>
<body>
<div>
<p>지금 내 생각을</p>
<h1>150</h1>
<textarea cols="70" rows="5"></textarea>
</div>
</body>
.scroll() window=브라우저창 전체
<script>
// 무한 스크롤 부분
$(document).ready(function () {
// 스크롤 이벤트 발생 시
$(window).scroll(function () {
// 필요한 변수를 구합니다.
var scrollHeight = $(window).scrollTop() + $(window).height();
var documentHeight = $(document).height();
// 스크롤의 높이와 문서의 높이가 같을 때
if (scrollHeight == documentHeight) {
for (var i = 0; i < 10; i++) {
$('<h1>Infinity Scroll</h1>').appendTo('body');
}
}
});
});
// 테스트를 위해 내부에 공간을 채워둡니다.
$(document).ready(function () {
for (var i = 0; i < 20; i++) {
$('<h1>Infinity Scroll</h1>').appendTo('body');
}
});
</script>
.submit() - form태그
<head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('#my_form').submit(function (event) {
// 입력 양식의 value를 가져옵니다.
var name = $('#name').val();
var password = $('#password').val();
// 출력합니다.
alert(name + ' : ' + password);
// 기본 이벤트를 제거합니다.
event.preventDefault();
});
});
</script>
</head>
<body>
<body>
<form id="my_form">
<table>
<tr>
<td>이름: </td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>비밀번호: </td>
<td><input type="password" name="password" id="password"/></td>
</tr>
</table>
<input type="submit" value="제출"/>
</form>
</body>
.change() - 체크박스
<head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('#all_check').change(function () {
if (this.checked) {
$('#check_item').children().attr('checked', true);
} else {
$('#check_item').children().attr('checked', false);
}
});
});
</script>
</head>
<body>
<body>
<input type="checkbox" id="all_check"/>
<label>All</label>
<div id="check_item">
<input type="checkbox"/>
<label>A Option</label>
<input type="checkbox"/>
<label>B Option</label>
<input type="checkbox"/>
<label>C Option</label>
</div>
</body>
'웹프로그래밍 > jQuery' 카테고리의 다른 글
jQuery - DOM API (0) 2018.07.27