jQuery库的引入及其操作对象样式

最新推荐文章于 2024-02-27 12:00:00 发布

大雄先生

最新推荐文章于 2024-02-27 12:00:00 发布

阅读量449

点赞数 2

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/x1785551/article/details/122285354

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.change{
				color: red;
				background-color: blue;
				font-size: 26px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<table border="1">
			
			<tr>
				<td>a</td>
				<td>a</td>
				<td>a</td>
				<td>a</td>
			</tr>
			<tr>
				<td>v</td>
				<td>v</td>
				<td>v</td>
				<td>v</td>
			</tr>
			<tr>
				<td>b</td>
				<td>b</td>
				<td>b</td>
				<td>b</td>
			</tr>
			<tr>
				<td>n</td>
				<td>m</td>
				<td>m</td>
				<td>m</td>
			</tr>
		</table>
		<p id="p1">ceshishuju</p>
		<p class="red">ceshishuju</p>
		<p id="p3">ceshishuju</p>
	</body>
	<!-- 引入jquery库文件 -->
	<script src="js/jquery-1.12.4.js"></script>
	<script type="text/javascript">
		//文档加载
		$(document).ready(function(){
			//定义了DOM对象
			var trs=document.getElementsByTagName("tr");
			
			
			//隔行变色     $()工厂函数      tr:even选择器  css()改变样式方法
			$("tr:even").css("backgroundColor","yellow");
			//$(trs).css("backgroundColor","yellow");
			// 使用基本jQuery选择器操作数据
			//$("p").css("color","blue");
			$("#p1").css("color","green");
			$(".red").css("color","red");
			
			//通过类样式修改p3
			$("#p3").addClass("change");
			//移除类样式
			$("#p3").removeClass("change");
		});
		//简写
		// $(function(){
		// 	alert("我编写的第一个jQuery程序!^^");
		// })
		
		//通过类样式修改p3
		
	</script>
</html>

效果图