<style>
.reverse{
background-color: black;
color:white;
}
</style>
<script>
// on() : 발생된 이벤트를 dom객체에 연결
$(function() {
// 1. on(이벤트, function(event) {} )
$('h1').on('click', function(event) {
$(this).html(function(index, html) {
return html + '+';
})
})
// 2. 실습. reverse 클래스를 add or remove 하기
// mouseenter(addClass), mouseleave(removeClass)
$('h1').on('mouseenter', function(e) {
$(this).addClass('reverse');
})
$('h1').on('mouseleave', function(e) {
$(this).removeClass('reverse');
})
// $('h1').on({
// mouseenter: function(e) { $(this).addClass('reverse'); },
// mouseleave: function(e) {$(this).removeClass('reverse'); },
// })
// $('h1').hover(
// function(e) { $(this).addClass('reverse'); },
// function(e) {$(this).removeClass('reverse'); },
// )
})
</script>
</head>
<body>
<h1 class="reverse">header-1</h1>
<h1>header-2</h1>
<h1>header-3</h1>
</body>
낙서장.html
<script>
// mousedown, mouseup
$(function(){
let canvas = document.getElementById("canvas");
let context = canvas.getContext('2d');
$('canvas').on({
mousedown: function(e){
let position = $(this).offset(); // 현재 마우스의 x, y 좌표를 리턴
let x = e.pageX - position.left;
let y = e.pageY - position.top;
// 선 그리기
context.beginPath();
context.moveTo(x, y);
},
mouseup : function(e){
let position = $(this).offset();
let x = e.pageX - position.left;
let y = e.pageY - position.top;
context.lineTo(x, y);
context.stroke();
},
})
})
</script>
</head>
<body>
<canvas id="canvas" width="700px" height="400" style="border: 3px solid black
;"></canvas>
</body>
<script>
/*
keyboard event
keydown : 키보드를 눌렀을 때
keyup : 키보드를 땔 때
keypress : 키보드를 입력했을 떄
*/
$(function(){
$('textarea').keydown(function(){
// 남은 글자 확인
let len = $(this).val().length;
let rem = 20 - len;
console.log(`남은 글자 수 = ${rem}`);
$('h1').html(rem);
// 남은 글자수 > 0 black 아닐 경우 red
if(rem=0){
$('h1').css('display', 'block');
} else{
$('h1').css('display','none');
}
})
})
</script>
</head>
<body>
<div>
<p>야생화 : 하얗게 피어난 얼음 꽃 하나가</p>
<h1>20</h1>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
</body>
<script>
$(()=>{
$('#control a').click(function(){
let num = Number($(this).text()) - 1;
$(this)
.addClass('on')
.siblings()
.removeClass('on');
$('#pic>div')
.filter(':visible')
.stop(true)
.fadeOut(350)
.end()
.eq(num)
.stop(true)
.fadeIn(350);
});
$('#control a:first')
.addClass('on')
.add('#pic > div:first')
.show()
})
</script>
<style>
*{margin:0;
padding:0;}
li{
list-style: none;
}
a{
font-style: "D2coding";
font-size: 15px;
color:white;
text-decoration: none;
}
#visual{
width: 500px;
margin:0;
position:relative;
}
#pic{
height: 250px;
overflow: hidden;
position:relative;
box-shadow: 1px 5px 10px 2px #666;
}
#pic>div{
position: absolute;
left: 0;
top: 0;
display: none;
}
#control{
position: absolute;
width: 100%;
left:0;
bottom:30px;
text-align: center;
}
#control a{
display: inline-block;
width: 26px;
height: 26px;
background-color: #000;
color:black;
line-height: 26px;
font-style: 0.8em;
border-radius: 14px;
margin:0 2px;
}
#control a.on{
background-color: violet;
}
img{
width: 500px;
height: 350px;
}
</style>
</head>
<body>
<div id="visual">
<div id="pic">
<div><a href="#"><img src="./imgs/blackpink_01.jpg" alt="1"></a></div>
<div><a href="#"><img src="./imgs/blackpink_02.jpg" alt="2"></a></div>
<div><a href="#"><img src="./imgs/blackpink_03.jpg" alt="3"></a></div>
<div><a href="#"><img src="./imgs/blackpink_04.jpg" alt="4"></a></div>
</div>
<div id="control">
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
</div>
</div>
</body>
<style>
*{margin: 0;padding: 0;}
body{font-family: "D2Coding";font-size: 12px;color:#000;}
li{list-style: none;}
a{text-decoration: none; /* 언더라인 사라짐 */color: #000;}
h1{text-align: center;padding: 10px 0;}
#gnb{width: 600px;margin: 0 auto;}
#gnb:after{content: "";display: block;clear: both;}
#gnb .m{float: left;width: 120px;text-align: center;position: relative;}
#gnb .m > a{display: block;height: 40px;line-height: 40px;font-size: 1.4em;}
#gnb .m.om > a{border-bottom: 4px solid #725f3f;box-sizing: border-box;}
#gnb .m ul{position: absolute;left:0;top:40px;width: 100%;background: #000;display: none;}
#gnb .m ul li a {display: block;color: #fff;padding: 10px 0;border-bottom: 1px solid #333;}
#gnb .m ul li:last-child a{border: none;}
#gnb .m ul li a:hover,#gnb .m ul li a:active,#gnb .m ul li a:focus {background-color: #fff;color: #000;}
#visual{background: url('./imgs/blackpink_01.jpg') no-repeat center center;height: 300px;}
#visual a{display: block;width: 100px;height: 300px;margin: 0 auto;text-indent: -999999%;overflow: hidden;}
</style>
<script>
$(function(){
$('#gnb .m')
.on('mouseover', function(){
$('ul',this).show();
$(this).siblings('li').find('ul').hide();
$(this).addClass('on').siblings('li').removeClass('on');
}).on('mouseleave', function(){
$('#gnb ul').hide().add('#gnb .m').removeClass('on');
})
})
</script>
</head>
<body>
<h1><a href="#">BLACKPINK</a></h1>
<ul id="gnb">
<li class="m">
<a href="#">FILE</a>
<ul>
<li><a href="#">new</a></li>
<li><a href="#">open</a></li>
<li><a href="#">save</a></li>
<li><a href="#">save as</a></li>
</ul>
</li>
<li class="m">
<a href="#">EDIT</a>
<ul>
<li><a href="#">new</a></li>
<li><a href="#">open</a></li>
<li><a href="#">save</a></li>
<li><a href="#">save as</a></li>
</ul>
</li>
<li class="m"><a href="#">SOURCE</a>
<ul>
<li><a href="#">new</a></li>
<li><a href="#">open</a></li>
<li><a href="#">save</a></li>
<li><a href="#">save as</a></li>
</ul>
</li>
<li class="m"><a href="#">NAVIGATION</a>
<ul>
<li><a href="#">new</a></li>
<li><a href="#">open</a></li>
<li><a href="#">save</a></li>
<li><a href="#">save as</a></li>
</ul>
</li>
</ul>
<div id="visual"><a href="#">visual</a></div>
</body>
'일 > javascript' 카테고리의 다른 글
| js14_jQuery_ui (0) | 2023.06.19 |
|---|---|
| js13_effect (0) | 2023.06.01 |
| js11_Query (0) | 2023.06.01 |
| js10_exception (0) | 2023.06.01 |
| js09_builtin (0) | 2023.06.01 |