remove함수
형식) .remove([selector])
특정 선택자를 가진 요소 제거, 선택자가 없으면 모든 요소를 제거한다
empty함수
형식) .empty()
해당 요소의 text와 요소의 자식태그, 자손태그가 있다면 모두 제거한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
$('#container').remove()
})
$('#btn2').click(function(){
$('.div').empty()
})
})
</script>
</head>
<body>
<div id="container">
hello
<div class="div">jquery
<p>empty</p>
</div>
</div>
<br>
<button id ="btn1">remove</button>
<button id ="btn2">empty</button>
</body>
</html>
-> remove 버튼을 클릭하면(click이벤트 발생) container id를 가진 div태그 전체가 제거된다
-> empty 버튼을 클릭하면(click이벤트 발생) class 선택자가 div인 요소의 text인 jquery와
그 안의 자식태그인 p태그가 제거된다
* event 객체 : 이벤트 종류, 이벤트 발생 대상 등의 정보를 담고 있는 객체
ex) event.target : event가 발생한 대상 요소, event.type : 발생한 이벤트의 종류
one함수
형식) .one(이벤트 종류명,function(){...})
해당 이벤트가 발생되었을때 한번만 함수를 실행한다
unbind함수
형식) .unbind([이벤트 종류명])
해당 이벤트를 해제시킨다
만약 괄호가 비어있다면 연결된 모든 이벤트의 연결을 해제한다
<script>
$(function(){
$('img').one('dblclick',function(event){
var $target=$(event.target)//var $target=$(this)
alert($target.width()+","+$target.height())
$target.height($target.height()*5);
//$target.unbind('dbclick');
})
})
</script>
-> 이미지를 더블클릭하면 해당 이미지의 넓이와 높이가 출력되고 높이의 다섯배로 크기가 변한다
이때 one함수를 사용했기에 한번만 실행되고 만약 bind함수를 사용하여 계속 실행이 되었더라면
unbind함수를 사용하여 더블클릭 이벤트를 연결해제 시켜야 한번만 실행되게 된다
hover 함수
형식) .hover(function(){...},function(){...})
mouseover와 mouseout이 번갈아 가며 호출된다
mouseover일 경우 첫번째 함수가, mouseout일 경우 두번째 함수가 실행된다
<script>
$(function(){
$('div').hover(function(){
$(this).addClass('red');
},function(){
$(this).removeClass('red');
})
})
</script>
-> div 태그에 마우스를 갖다대면 red 클래스 선택자가 추가되고
마우스를 떼면 red 클래스 선택자가 제거된다
keyup 이벤트
글자를 입력했을때 발생하는 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('input').keyup(function(){
var value = $(this).val()
print(value)
})
function print(msg){
$('#div1').text(msg)
}
})
</script>
</head>
<body>
<input type="text">
<div id="div1"></div>
</body>
</html>
-> input 텍스트안에 글자를 입력했을때 그 값을 val()함수로 받아서 value에 들어간다
print함수는 id가 div1인 곳에 파라미터값을 적어준다
'jQuery' 카테고리의 다른 글
| [jQuery] 애니메이션 효과와 관련된 jQuery함수- slide, fade (0) | 2021.03.10 |
|---|---|
| [jQuery]wrap, show, hide 함수 / change, focus, blur, submit 이벤트 (0) | 2021.03.09 |
| [jQuery]bind함수, 태그에 이벤트 연결하기 (0) | 2021.03.08 |
| [jQuery]$.extend, $.each (0) | 2021.03.08 |
| [jQuery]addClass, removeClass, toggleClass, filter, is, append, prepend, after, before 함수 (0) | 2021.03.08 |