* 제이쿼리 실습 중 에러발생-> 크롬에서 f12 로 확인하자!
(일부 키보드에서는 fn+f12)
change 이벤트
요소의 value에 변화가 생기면 change이벤트가 실행된다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('#select1').change(function(event){
$('img').attr('src',$(event.target).val())
})
})
</script>
</head>
<body>
<select id="select1">
<option value="apple.jpg">apple</option>
<option value="banana.jpg">banana</option>
</select>
<img>
</body>
</html>
-> select 요소의 value값에 변화가 생기면 img태그에 src속성을 추가한다
여기서 $(event.target).val() 는 해당 이벤트 발생 대상의 value값이다
wrap 함수
형식) $('selector').wrap('wrappingElement')
selctor를 자식으로 wrappingElement가 추가된다
wrappingElement는 Selector, htmlString, Element, jQuery 가 될 수 있다
<script>
$(function(){
$('.div2').wrap('<h2>추가</h2>')
</script><div class="div1">
<div class="div2">hello</div>
</div>
<!--wrap함수 실행 후-->
<div class="div1">
<h2>추가
<div class="div2">hello</div>
</h2>
</div>
focus 이벤트
커서가 포커스 되었을때 발생되는 이벤트
blur 이벤트
다른 곳으로 커서가 이동하면 발생되는 이벤트
submit 이벤트
전송버튼을 눌렀을때 발생하는 이벤트
show함수
형식) .show()
보이게 설정
hide함수
형식) .hide()
안보이게 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('#div1').show()
$('#div2').hide()
})
</script>
</head>
<body>
<div id="div1">A</div>
<div id="div2">B</div>
</body>
</html>'jQuery' 카테고리의 다른 글
| [jQuery_mobile] data-role( page, header, content, footer ) (0) | 2021.03.18 |
|---|---|
| [jQuery] 애니메이션 효과와 관련된 jQuery함수- slide, fade (0) | 2021.03.10 |
| [jQuery]romove, empty, one, unbind, hover 함수/ keyup이벤트 (0) | 2021.03.09 |
| [jQuery]bind함수, 태그에 이벤트 연결하기 (0) | 2021.03.08 |
| [jQuery]$.extend, $.each (0) | 2021.03.08 |