(http://api.jquery.com/category/events/)를 참고 하자
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="img/icon.png">
<title>J-QUERY</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
</style>
</head>
<body>
<input type="text" value="some text"/>
<p>문자가 쓰여진<b>강조된</b> 영역</p>
<span id="txt"></span>
<span id="html"></span>
<fieldset>
<legend>숫자입력</legend>
range(0~100):
<input type="range" min="0" max="100" value="30" step="1"/>
당신이 선택한 값 : <span id="msg"></span>
<br/>
<button id="inc">증가</button>
<button id="dec">감소</button>
</fieldset>
</body>
<script>
//attr() 은 속성을 가져오거나 수정할때 사용
var attr = $('input[type="text"]').attr('type');
console.log(attr);
//val() 은 value 속성을 가져오거나 수정할때 사용
var val = $('input[type="text"]').val();
console.log(val);
// html() == innerHTML : html 태그를 인정
console.log('html : ',$('p').html());
// text() == innerTEXT : html 태그를 인정하지 않음
console.log('text : ',$('p').text());
// 적용 시에 html() 은 태그의 효과가 적용된다.
// text() 태그자체도 문자열로 본다.
$('#html').html('<h1>HTML 과 TEXT 의 차이</h1>');
$('#txt').text('<h1>HTML 과 TEXT 의 차이</h1>');
var val;
/*
$('input[type="range"]').on('mouseup',function(){
val = $(this).val();
console.log(val);
$('#msg').html(val);
});
*/
// jquery 요소를 변수에 담을 수 있다.
var $range = $('input[type="range"]');
// 1. 마우스를 누르면 마우스 무브 이벤트 발동
// 2. 마우스를 움직이면 현재 값을 출력
$range.mousedown(function(){
$(this).on('mousemove',function(){
val = $(this).val();
$('#msg').html(val);
});
});
// 마우스를 떼면 더이상 사용하지 않는 이벤트는 off 한다.
$range.mouseup(function(){
$range.off('mousemove');
});
// 증가, 감소 버튼을 누르면 값이 변화 하도록
$('#inc').on('click',function(){
val++;
$range.val(val);
$('#msg').html(val);
});
$('#dec').on('click',function(){
val--;
$range.val(val);
$('#msg').html(val);
});
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="img/icon.png">
<title>J-QUERY</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
</style>
</head>
<body>
<p id="ex1" style="color:blue; font-size: 32px;">
스타일이 적용된 텍스트
</p>
<p id="ex2">스타일이 적용 안된 텍스트</p>
<div>
font size : <span id="size"></span><br/>
font color : <span id="color"></span><br/>
<button>css 적용</button>
</div>
</body>
<script>
//css() 를 통해 특정 css 속성을 가져오거나 변경 할 수 있다.
var color = $('#ex1').css('color');
var size = $('#ex1').css('font-size');
console.log(color);
console.log(size);
$('#size').html(size);
$('#color').html(color);
$('button').click(function(){
/* 한번에 한 속성만 변경 가능 하다.
$('#ex2').css('color',color);
$('#ex2').css('font-size',size);
*/
$('#ex2').css({'color':color,'font-size':size});
});
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="img/icon.png">
<title>J-QUERY</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
.ex{
background-color:cadetblue;
text-align:center;
width:200px;
height:200px;
margin: 5px;
}
</style>
</head>
<body>
<button onclick="add()">스타일 추가</button>
<button onclick="remove()">스타일 삭제</button>
<button onclick="toggle(this)">toggle</button>
<div>DIV</div>
</body>
<script>
function toggle(elem){
$('div').toggleClass('ex');
// 특정 클래스가 존재 하는지 알려 준다.
var sw = $('div').hasClass('ex');
console.log(sw);
if(sw==true){
$(elem).html('OFF');
}else{
$(elem).html('ON');
}
}
function add(){
//클래스를 특정 태그에 추가 해 준다.
$('div').addClass('ex');
}
function remove(){
$('div').removeClass('ex');
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="img/icon.png">
<title>J-QUERY</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: green;
display: none;
}
</style>
</head>
<body>
<button id="viz">fade in</button>
<button id="inviz">fade out</button>
<button id="toggle">ON</button>
<div></div>
</body>
<script>
$('#viz').click(function(){
//fadeIn 은 display 를 먼저 바꾸고
// 나중에 opacity 를 조절한다.
//(속도:millisecond 또는 slow|fast,콜백)
$('div').fadeIn("slow", visionChk);
});
$('#inviz').click(function(){
$('div').fadeOut("fast",visionChk);
});
$('#toggle').on('click',function(){
$('div').fadeToggle(1000,visionChk);
});
var vision;
function visionChk(){
vision = $('div').css('display');
console.log('animation 끝');
console.log('display : '+vision);
if(vision=='block'){
$('#toggle').html('OFF');
}else{
$('#toggle').html('ON');
}
}
</script>
</html>