1. bind
<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function(){
/*
형식) $(이벤트발생 대상자 선택자).bind(등록할_이벤트종류명, 함수명|익명함수)
비활성화시키는 방법->1) 함수끝에 return false을 주는 경우
2) 함수를 작성하면서 event객체를 매개변수로 전달받아서 event.preventDefault()를 호출해도 된다.
*/
$('a').bind('click',function(event){
var href=$(this).attr('href')
$('img').attr('src',href)
event.preventDefault();
//return false
})
})
</script>
<body>
<ul>
<li><a href="../picCats/Persian.jpg">Persian</a></li>
<li><a href="../picCats/RussianBlue.jpg">RussianBlue</a></li>
<li><a href="../picCats/BritishShorthairs.jpg">BritishShorthairs</a></li>
</ul>
<img>
</body>
<script>
$(function(){
/*
이벤트 연결방식 2가지
형식) 등록할 이벤트명:function() {} -> 익명함수형태로 코딩
1.bind를 사용하는 경우 ->현재 발생시킬 이벤트 뿐만아니라 다른 이벤트도 연결이 가능
2.bind를 사용하지 않는 경우 -> click -> 발생시킨 이벤트만 처리
*/
$('img').bind({
mouseout:function(){
$('img').attr('src','../picCats/Persian.jpg')
},
mouseover:function(){
$('img').attr('src','../picCats/RussianBlue.jpg')
},
click:function(){
alert('bind함수를 이용한 연결테스트입니다.')
}
})
})
</script>
<body>
<img src="../picCats/Persian.jpg" width="200" height="200">
</body>
2. toggleClass
<style type="text/css">
p {margin:4px;font-size:16px;font-weight:bolder;cursor:pointer}
.blue {color:blue;}
</style>
<script>
$(function(){
//jQuery에서의 이벤트 연결방법->$(선택자).이벤트종류명(function(){...})
$('p').click(function(){
//형식) $(선택자).toggleClass(클래스 선택자)
// addClass()와 removeClass()를 번갈아가며 반복하는 기능
$(this).toggleClass('blue');
})
})
</script>
3. remove, empty
<script>
$(function(){
$('#button1').click(function(){
$('#div1').remove() //전체(구조와 내용까지)삭제
})
$('#button2').click(function(){
$('#div1').empty() //->특정태그의 자식태그를 포함한다면 자식태그들도 삭제
})
$('#button3').click(function(){
$('.test').empty() //특정 태그의 내용만 삭제
})
})
</script>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow">
<p class="test" style="height:50px;width:50px;border:1px solid red;background-color:yellow">div first</p>
<p>div second</p>
</div><br>
<button id="button1">Remove div</button>
<button id="button2">Empty div</button>
<button id="button3">Empty p</button>
</body>
4. event 객체
<script>
$(function(){
//event 객체 : 이벤트를 발생시킨 객체에 대한 정보를 가지고 있는 객체(클릭한 좌표값,마우스버튼 누른경우)
//$('img').bind('dblclick',function(event){
$('img').one('dblclick',function(event){ //bind<->unbind 사용을 one으로 대신함
//이미지 더블클릭
//var $target=$(event.target) //이벤트를 발생시킨 대상자에 대한 정보를 가지고 있는 속성
var $target=$(this)
$target.width($target.width()*2)
//형식) $(이벤트발생대상자 선택자).unbind('해제시킬_이벤트종류명')
//형식) $(이벤트발생대상자 선택자).unbind() -> 모든 이벤트 연결이 다 끊어진다.
//$target.unbind('dblclick')
//$target.unbind()
})
})
</script>
<body>
<img src="../picCats/Persian.jpg">
</body>
5. hover
<style>
.reverse {background:black;color:white}
</style>
<script>
$(function(){
//형식) $('선택자').hover(mouseover|function(){},mouseout|function(){})
//hover : mouseover와 mouseout을 번갈아 가면서 호출해주는 함수
$('h1').hover(function(){
$(this).addClass('reverse')
},function(){
$(this).removeClass('reverse')
})
})
</script>
<body>
<h1>hover test-0</h1>
<h1>hover test-1</h1>
<h1>hover test-2</h1>
</body>
6. keyup
<script>
$(function(){
//keyUp : 사용자가 글자를 입력했을때 발생하는 이벤트
$('input').keyup(function(){
var value=$(this).val()
report(value)
})
//버튼을 눌렀을때 input의 내용을 지우고 커서 입력
$('button').click(function(){
$('input').val('')
$('input').focus() //커서입력
$('#console').empty() //내용 삭제
})
//사용자 정의 함수-->div태그에 입력받은 값을 추가시켜주는 함수 작성
function report(msg){
$('#console').text(msg)
}
})
</script>
<body>
<button>reset</button><p>
<input type="text" value="val 함수 연습중" size="100">
<div id="console"></div>
</body>
7. change
<script>
$(function(){
$('#sel').change(function(event) {
$('#img').attr('src',$(event.target).val())
})
})
</script>
<body>
<form name="frm">
<table>
<tr>
<td>
<select id="sel">
<option value="../picCats/ragdoll.jpg">Ragdoll</option>
<option value="../picCats/MaineCoon.jpg">MaineCoon</option>
<option value="../picCats/Persian.jpg">Persian</option>
</select>
</td>
<td><img id="img"></td>
</tr>
</table>
</form>
</body>