jQuery 라이브러리 사용
$(선택자) , 메서드(매개변수,매개변수) 형태로 사용한다
<script>
$(document).ready(function () {
$('h1').css('color','red');
}) ;
</script>
</head>
<body>
<h1>Header-0</h1>
속성 추출 하는방법
<script>
$(document).ready(function () {
let src = $('script').attr('src');
alert(src);
}) ;
</script>
attr() => 문서객체의 속성 조작
속성 조작
$('img').attr('width,100');
$('img').attr('src',"#");
이런식으로 조작을 할수 있다
클래스 조작
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
}
#box.hover {
background-color: blue;
border-radius: 50px;
}
</style>
<script>
$(document).ready(function () {
$('#box').hover(function (){
$('#box').addClass('hover');
}, function() {
$('#box').removeClass('hover');
} );
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
$('#box').addClass('hover'); => 이줄로 인해 hover 이라는 클래스가 box 에 추가된다
$('#box').removeClass('hover');=> 이건 hover 이라는 클래스르 지운다
마우스를 올리면 모양가 색이 바뀐다
이벤트 사용
$(선택자).method(function (event) { } );
$('h1').click(function () {
alert('클릭');
});
h1을 클릭하면 클릭이라는 경고창이 뜬다
이벤트 연결과 제거
on() 연결
0ff() 제거
<script>
$(document).ready(function () {
$('#box').css({
width : 100,
height : 100,
background : 'orange'
}).on('click', function () {
$(this).css('background','red');
}).on('mouseenter',function () {
$(this).css('background','blue');
}).on('mouseleave',function () {
$(this).css('background','orange');
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
마우스를 클릭할
이벤트 제거
<script>
$(document).ready (function () {
//이벤트 연결
$('a').click(function (event) {
alert('click');
//기본 이벤트를 제거합니다.
event.preventDefault();
});
});
</script>
</head>
<body>
</body>
</html>
하이퍼 링크가 실행안된다.
애니메이션 효과
<script>
$(document).ready (function () {
$('#box').css({
width : 100,
height: 100,
background: 'red',
position: 'absolute',
left:10,
top:10
}).animate({
width: 300,
opacity: 0.5
}, 500).animate({
opacity: 1,
left: 100,
top: 200,
},500);
});
</script>
</head>
<body>
<div id="box"></div>
</body>
애니메이터를 이용하면 이렇게 위치하고 크기등을 연속적으로 변경할수 있다
$(선택자).animate(속성 객체,시간,콜백함수); 이 3가지 변수를 모두다 사용할수 있다 위의 거에서는
속성 객체와 시간만 사용하였다
반응형
'html,css,js 공부' 카테고리의 다른 글
| (2024 02 29)html,css,js 10일차 (0) | 2024.03.01 |
|---|---|
| (2024 02 28) html,css,js 9일차 (0) | 2024.02.28 |
| (2024 02 26) html,css,js 7일차 (0) | 2024.02.26 |
| 카카오 로그인 창 (0) | 2024.02.26 |
| (2024 02 23) js 6일차 (0) | 2024.02.24 |