jquery 樣式操做

時間 2019-12-11

標籤 jquery 樣式欄目 JQuery 简体版

原文原文鏈接

<!DOCTYPE html>javascript

<html>css

<head>
	<meta charset="UTF-8">
	<title>jquery 樣式操做 </title>
	<style type="text/css">
		.addBg {
			background: #FF0000;
			color: #0000CC;
		}
		
		.bigger {
			font-size: 20px;
		}
	</style>
	<script type="text/javascript" src="comm/js/jquery-2.1.1.js"></script>
	<script type="text/javascript">
		$(function() {
			//addClass是添加一個樣式    removeClass是移除一個樣式
			$('thead tr').addClass('addBg').addClass('bigger').removeClass('addBg')
			//hasClass判斷是否有一個樣式
		    //alert($('thead tr').hasClass('bigger'));
		    //鼠標移動表格變色
			$('tbody tr').mouseover(changeColor).mouseout(changeColor)
		});
		function  changeColor(){
			$(this).toggleClass('addBg');
		}
	</script>
</head>

<body>
	<table id="tus" width="700" align="center" border="1"></table>
	<table id="users" width="700" align="center" border="1">
		<thead>
			<tr>
				<td title="id">ID</td>
				<td title="name">NAME</td>
				<td title="password">PASSWORD</td>
			</tr>

		</thead>
		<tbody>
			<tr id="abc">
				<td>1</td>
				<td>jim</td>
				<td>abc</td>
			</tr>
			<tr>
				<td>2</td>
				<td>tom</td>
				<td>dfg</td>
			</tr>
			<tr>
				<td>3</td>
				<td>green</td>
				<td>ert</td>
			</tr>

		</tbody>
	</table>

</body>

</html> html