mouseover, mouseout, css 사용예시
<table border="1">
<col width="50"><col width="200"><col width="150">
<tr>
<th>번호</th><th>이름</th><th>나이</th>
</tr>
<tr class="cls">
<th>1</th><td>홍길동</td><td>24</td>
</tr>
<tr class="cls">
<th>2</th><td>성춘향</td><td>19</td>
</tr>
<tr class="cls">
<th>3</th><td>일지매</td><td>35</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tr.cls").mouseover(function () {
// Java Script
// document.getElementsByClassName("cls").style.backgroundColor;
$(this).css('background', '#00ff00');
});
$("tr.cls").mouseout(function () {
$(this).css('background', '#fff');
});
$("td").click(function() {
let val = $(this).text();
alert(val);
});
});
</script>
설명
위 예제는 테이블에 마우스를 가져다 놓으면 배경색이 바뀌고, 마우스를 테이블 밖으로 빼면 배경색이 원복이 된다. 클릭 시에 클릭한 부분의 데이터가 alert에 출력이 된다.
mouseover() : 마우스가 포커스 안으로 들어왔을 때 이벤트가 발생되는 함수이다.
mouseout() : 마우스가 포커스 밖으로 나갔을 때 이벤트가 발생되는 함수이다.
css() : CSS 속성 값을 가져오거나 추가한다.
형식
setter
css(property, value)
css(property, value).css(property, value)
css({property : value, property : value})
getter
$(접근할 태그명,id명,class명 등등).css(property)
attr, addClass, removeClass사용예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.back{
color: #ffff00;
}
</style>
</head>
<body>
<p>p tag</p>
<button type="button" id="btn">버튼</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$("#btn").click(function () {
$('p').css('background' , '#0000ff').css('color', 'white');
$('p').text('여기가 p태그');
// getter
let color = $('p').css('background');
let text = $("p").text;
alert(color);
$('p').attr("id", "pid");
let id = $('p').attr("id");
$('p').attr("class", "back");
// $('p').addClass("back"); //위와 동일
// $('p').attr("class", "");
$("p").removeClass("back"); //위와 동일
});
</script>
</body>
</html>설명
위 예제는 버튼 클릭시 p tag의 배경색과 글자색, 문자열이 변경 그리고 id명과 class명 추가, 삭제를 담은 예시이다.
(id값을 태그명으로 추가하는건 좋은예시가 되지못한다. 중복우려..)
attr() : 속성자체를 가져오거나 추가한다.
형식
$(추가할 요소명).attr(추가할 속성,값)
$(추가할 요소명).attr(추가할 속성,값).attr(추가할 속성,값)
$(추가할 요소명).attr({추가할 속성:값, 추가할 속성:값})
addClass() : 클래스를 추가해주는 함수이다. attr로 대체 가능하다.
removeClass() : 클래스를 삭제해주는 함수이다. attr로 대체 가능하다.
'IT > JavaScript' 카테고리의 다른 글
| [jQuery] 속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기 / 사용자 지정 태그 사용예시 (0) | 2021.06.11 |
|---|---|
| [jQuery] 이미지를 클릭 시 이미지 변경 예시 / hover함수 사용예시 (1) | 2021.06.11 |
| [jQuery] jQuery에서 요소 추가하기/append() (0) | 2021.06.11 |
| [jQuery] button tag 접근 예시/input radio, checkbox 접근 예시 (0) | 2021.06.11 |
| [jQuery]jQuery와 JavaScript 차이점/ jQuery 형식/ jQuery 태그 접근방법/html()와 text()차이점 (0) | 2021.06.10 |