1.jQ的引入

「已注销」

已于 2022-04-04 15:57:27 修改

阅读量702

点赞数

分类专栏： jQuery 文章标签： jquery 开发语言 java

于 2022-04-03 23:23:41 首次发布

本文链接：https://blog.csdn.net/qq_67192586/article/details/123944394

版权

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用JavaScript和jQuery分别实现表格的隔行变色，并对比了四种JQuery页面加载方式。通过实例展示了如何在HTML中运用CSS类来控制行色，以及如何在JQuery中更简洁地操作DOM进行颜色切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例:用js和jQ实现表格隔行变色

js实现表格隔行变色

<style>
		.tdCls01{
			background-color:yellow;
		}
		.tdCls02{
			background-color:greenyellow;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var trs = document.getElementsByTagName('tr');
			for(var i =0;i<trs.length;i++){
				if(i%2==0){
					trs[i].className="tdCls01";
				}else{
					trs[i].className="tdCls02";
				}
			}
		}
	</script>
  </head>
  <body>
	<table border="1px" width="250px" height="250" cellpadding"0" cellspacing="0">
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>身高</th>
		</tr>
		<tr>
			<td>丽丽</td>
			<td>19</td>
			<td>160</td>
		</tr>
		<tr>
			<td>丽丽</td>
			<td>19</td>
			<td>160</td>
		</tr>
		<tr>
			<td>丽丽</td>
			<td>19</td>
			<td>160</td>
		</tr>
		<tr>
			<td>丽丽</td>
			<td>19</td>
			<td>160</td>
		</tr>
		<tr>
			<td>丽丽</td>
			<td>19</td>
			<td>160</td>
		</tr>
		<tr>
			<td>丽丽</td>
			<td>19</td>
			<td>160</td>
		</tr>
	</table>
  </body>
</html>

2.jQ实现页面加载的四种方式

// 利用JQ开始完成加载功能
		// 方式1
		$(alert('a'));
		
		// 方式2 推荐
		$(function(){
			alert('b');
		});
		
		// 方式3
		$(document).ready(function(){
			alert('c');
		});
		
		// 方式4
		jQuery(function(){
			alert('d');
		});

jQ实现表格隔行变色

<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		//页面加载
		$(function(){
			// 偶数行变色
			$("tr:even").addClass("tdCls01");
			//奇数行变色
			$("tr:odd").addClass("tdCls02");
			
		});
		
		/*
			$的作用
			1. 可以作为页面加载效果
				$(function(){
				
				});
			2.选择器
				$("tr:even")
				$("tr:odd")

            3.将js的dom对象转为jQ对象
            $(document.getElementById('id')).调用jQ的方法等操作

            4.将字符串(这个字符串是html代码)变为jQ的对象
            $('<div> <p></p></div>')
		*/
	</script>

js与jQ之间的转换

<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		//页面加载
		$(function(){
			// 1.js写法
			//var row01 = document.getElementById('row01');
			// 写法1:
			// row01.style.backgroundColor = "yellowgreen";
			// 写法2:
			//row01.className = "tdCls01";
			
			// 2.jQ写法
			// 写法1:
			//$("#row01").css("background-color","#ADFF2F");
			
			// 写法2:
			//$("#row01").addClass("tdCls01");
			
			// 3.js和jQ能混用吗?
			//$("#row01").style.backgroundColor="yellowgreen";
			
			
			// 4.切记:千万不要将js和jQ混合使用
			//console.log(document.getElementById('row01'));
			//console.log($("#row01"));
			
			// 5.js ---> jQ
			// $(document.getElementById('row01')).addClass("tdCls02");
			
			// 6.jQ ---> js
			var row01 = $("#row01");
			// row01[0].style.backgroundColor = "orange";
			row01.get(0).style.backgroundColor = "yellowgreen";
			
			// 7.隔行变色
			var trs = document.getElementsByTagName('tr');
			for(var i=0;i<trs.length;i++){
				if(i % 2==0){
					$(trs[i]).addClass("tdCls01");
				}else{
					$(trs[i]).addClass("tdCls02");
				}
			}
		});
		
	</script>