더보기
- 요소 선택 (JS는 getElementById, class,,등 많음/ Jquery는 아래 모습 하나로 통일가능)
$('선택자')
$('#btn')
- 이벤트 등록
1.
$('선택자').이벤트명(function(){
});
2.
$('선택자').on('이벤트명', function(){
});
더보기
- body태그 안에 있는 요소 배치가 완료 후, 이벤트 등록
- 자바스크립트 : load이벤트는 1번만 써야한다. 2개있어도 1개만 실행됨
- JQuery는 ready나 function은 갯수 상관없이 모두 적용됨
- 자바스크립트
window.addEventListener('load',function(){
});
- JQuery1
$(document).ready(function(){
});
- JQuery2
$(function(){
});
더보기
/*
- 이벤트 호출
$('선택자').이벤트명();
- 콘솔창에 $('#btn').click(); 을 치면, 버튼을 누른 것처럼 알림창이 나옴
*/
<title>jquery 기본예제</title>
<script src="../JS/jquery.min.js"></script>
<script>
/* 이벤트는 이벤트 등록할 시점에 해당 요소들에게만 등록을 하고,
이후에 생성된 요소들에는 자동으로 이벤트가 등록되지 않음*/
//function보고 내용을 예약해둔 다음에
//body태그로내려가서 등록된거 읽기마치면 예약해둔 내용위치로 와서 다시 읽음
$(function(){
$('#btn').click(function(){
alert('버튼');
});
$('.box').mouseenter(function(){
console.log('들어감');
});
$('.box').mouseleave(function(){
console.log('나옴');
});
$('.box').hover(function(){
console.log('호버');
});
$('.box').mouseover(function(){
console.log('오버');
});
$('.box').mouseout(function(){
console.log('아웃');
});
});
</script>
</head>
<body>
<button id="btn">버튼</button>
<div class="box" style="background: yellow; width: 400px; height: 300px; float: left;"></div>
</body>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_keyboard event(키보드 이벤트) (1) | 2021.06.22 |
|---|---|
| JQ_js파일 배치(위치) (1) | 2021.06.22 |
| JS_click(알림창)예제 (0) | 2021.06.22 |
| JS_window객체 (0) | 2021.06.22 |
| JS_screen객체 (0) | 2021.06.21 |