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로 대체 가능하다.

+ Recent posts