1. click
<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
$('#btn1').click(function(){
$('p').css('background-color','yellow');
});
});
</script>
</head>
<body>
<button id="btn1">click</button>
<p>내용</p>
</body>
</html>2. mouseover
<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
$('#btn1').mouseover(function(){
$('p').css('background-color','yellow');
});
$('#btn1').mouseout(function(){
$('p').css('background-color','purple');
});
//hover 메서드를 이용해서 mouseover,mouseout 이벤트 동시 연결
$('#btn2').hover(function(){
$('p').css('background-color','pink');
},function(){
$('p').css('background-color','skyblue');
});
});
</script>
</head>
<body>
<button id="btn1">mouseover/out</button>
<button id="btn2">hover</button>
<p>내용</p>
</body>
</html>3. hover
<title>jQuery</title>
<style type="text/css">
.reverse{
background-image:url('../files/winter.jpg');
color:white;
}
</style>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
//이벤트 연결
$('h1').hover(function(){
//this : 이벤트가 발생한 태그
$(this).addClass('reverse');
},function(){ //mouseout 이벤트 연결
$(this).removeClass('reverse');
});
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>4. key
<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
$('textarea').keyup(function(){
//입력한 글자 수를 구함
//val() : value에 저장된 값 반환
let inputLength = $(this).val().length;
let remain = 30 - inputLength;
//문서 객체에 입력
$('h1').text(remain);
//문서 객체에 색상을 변경
if(remain >= 0){
$('h1').css('color','black');
}else{
$('h1').css('color','red');
}
});
});
</script>
</head>
<body>
<div>
<p>지금 내 생각을</p>
<h1>30</h1>
<textarea rows="5" cols="70" maxlength="30"></textarea>
</div>
</body>
</html>5. on
1)
<title>jQuery</title>
<style type="text/css">
.reverse{
background-color:black;
color:white;
}
</style>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
//하나의 이벤트 연결
// 이벤트 종류,이벤트 핸들러
$('h1').on('click',function(){
$(this).html(function(index,html){
return html + '*';
});
});
//복수의 이벤트 연결
$('h1').on({mouseover:function(){
$(this).addClass('reverse'); //클래스 추가
},
mouseout:function(){
$(this).removeClass('reverse'); //클래스 삭제
}
});
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>2)
<title>jQuery</title>
<style type="text/css">
div{
margin:5px;
padding:5px;
border-width:3px;
border-style:solid;
border-color:black;
border-radius:10px;
}
</style>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
//이벤트 연결
// 이벤트 타입,이벤트 핸들러
$('div').on('click',function(){
//이벤트가 발생한 태그의 하위 태그 중 h1 태그
let header = $('h1',this).text();
//이벤트가 발생한 태그의 하위 태그 중 p 태그
let paragraph = $('p',this).text();
alert(header + '\n' + paragraph);
});
});
</script>
</head>
<body>
<div>
<h1>Header1</h1>
<p>Paragraph1</p>
</div>
<div>
<h1>Header2</h1>
<p>Paragraph2</p>
</div>
<div>
<h1>Header3</h1>
<p>Paragraph3</p>
</div>
</body>
</html>3)
<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
//현재 존재하는 태그뿐만 아니라 동적으로 만들어진 태그에도 이벤트 연결
//이벤트 타입,이벤트가 발생하는 태그,이벤트 핸들러
$(document).on('click','h1',function(){
let length = $('h1').length;;
let targetHTML = $(this).html();
$('#wrap').append('<h1>' + length + '-' + targetHTML + '</h1>');
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>Header</h1>
</div>
</body>
</html>6. trigger
<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
/*
trigger() : 이벤트 강제 발생
*/
//이벤트 연결
$('h1').on('click',function(){
$(this).html(function(index,html){
return html + '*';
});
});
//1초마다 함수를 실행
setInterval(function(){
$('h1').trigger('click');
},1000);
});
</script>
</head>
<body>
<h1>Start:</h1>
</body>
</html>