Web前端第四季(jQuery):四:301-jQuery基本过滤器(奇数和偶数)+302-实现隔行换色+401-祖先选择器和子代选择器

企业开发 2022-03-23 13:48:03 阅读次数: 0

目录

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

1.我自己代码的GitHub网址

2.SIKI学院:我参考此视频实操

3.w3school官网:当做字典使用

4.菜鸟教程：当做字典使用

5.Web前端第一季(HTML):我自己写的笔记博客

6.Web前端第二季(CSS):我自己写的笔记博客

7.Web前端第三季(JavaScript):我自己写的笔记博客

三.注意

操作:1:成功:301-jQuery基本过滤器（奇数和偶数）

1.运行结果:成功:

操作:2:成功:302-实现隔行换色

1.运行结果:成功:

操作:3:成功:401-祖先选择器和孩子选择器

1.运行结果:成功:

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

1.我自己代码的GitHub网址

​​​​​GitHub - xzy506670541/WebTest: SIKI学院的Web前端

2.SIKI学院:我参考此视频实操

登录 - SiKi学院 - 生命不息，学习不止！siki老师的Unity3D专业视频学习平台，上千门实时更新课程，供学员在线观看，为国内开发者提供最新、最全、最快的视频学习教程http://www.sikiedu.com/my/course/212

  1. 我参考此视频实操

3.w3school官网:当做字典使用

w3school 在线教程

4.菜鸟教程：当做字典使用

菜鸟教程 - 学的不仅是技术，更是梦想！

5.Web前端第一季(HTML):我自己写的笔记博客

Web前端第一季(HTML):一:101-为什么学习Web前端知识？+102-什么是HTML？+103-安装工具和学习方法+04-创建第一个网页文件_Smart_zy的博客-CSDN博客目录一.目的1.二.参考1.SIKI学院1.Nodepad++官网1.w3school官网三.注意四.操作:成功1.HTML是什么？1.为什么学习HTML？1.本课程的适用对象?1.web前端工程师和后端的关系1.使用什么开发工具？1.学习方法？1.操作 :第一个网页：一.目的1.二.参考1.SIKI学院登录 - SiKi学院 - 生命不息，学习不止！我参考此视频实操1.Nodepad++官网https:https://blog.csdn.net/qq_40544338/article/details/120907015

6.Web前端第二季(CSS):我自己写的笔记博客

Web前端第二季(CSS):一:101-什么是CSS+102-下载安装HBuilder+103-什么是div和span标签+104-块元素和行内元素的区别+105-CSS基本语法_Smart_zy的博客-CSDN博客目录一.目的1.想：学习前端知识2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。二.参考1.我自己代码的GitHub网址1.SIKI学院:我参考此视频实操1.w3school官网:当做字典使用1.菜鸟教程：当做字典使用三.注意四.操作:1:成功:101-什么是CSS？1.成功：了解了什么是CSS四.操作:2:102-下载安装HBuilder1.下载：发现官网没有了HBuilder(已经是上一个版本了)，全部是HBuilderX1.创建项目.https://blog.csdn.net/qq_40544338/article/details/120968455

7.Web前端第三季(JavaScript):我自己写的笔记博客

Web前端第三季(JavaScript):一:第1章:JavaScript基本知识:101-什么是JavaScript语言+102-书写第一个JavaScript代码+103-书写js代码的三种方式_Smart_zy的博客-CSDN博客目录一.目的1.想：学习前端知识2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。二.参考1.我自己代码的GitHub网址1.SIKI学院:我参考此视频实操1.w3school官网:当做字典使用1.菜鸟教程：当做字典使用三.注意四.操作:1:成功:101-什么是JavaScript语言1.介绍JS四.操作:2:成功:102-书写第一个JavaScript代码1.新建项目：1.运行结果：成功：跳出警告窗口四.操作:3:成功:103-书写j.https://blog.csdn.net/qq_40544338/article/details/121351279

三.注意

操作:1:成功:301-jQuery基本过滤器（奇数和偶数）

1.运行结果:成功:

 表格各行换色
作用：方便区分行与行之间的区别

不用特意找到父子级别，jQuery直接可以识别；例如：索引1是索引0的子集，但是也变色了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>

		<script type="text/javascript">
			$(function() {
				//将偶数行变色
				$("div:even").css("background-color", "red");
				//将奇数行变色				
				$("div:odd").css("background-color", "green");
			});
		</script>
	</head>
	<body>
		<div>
			索引 0 Selects odd elements, zero-indexed. See also :even.
			<div>索引 1 Selects odd elements, zero-indexed. See also :even.</div>
		</div>
		<div>索引 2 Selects odd elements, zero-indexed. See also :even.</div>
		<div>索引 3 Selects odd elements, zero-indexed. See also :even.</div>
		<div>索引 4 Selects odd elements, zero-indexed. See also :even.</div>
		<div>索引 5 Selects odd elements, zero-indexed. See also :even.</div>
	</body>
</html>

操作:2:成功:302-实现隔行换色

1.运行结果:成功:

表格各行换色
作用：方便区分行与行之间的区别

  • // $("#myTable tr:even").css("background-color", "aliceblue");
  •                 // #myTable：祖先选择器：，只对myTable表格起作用
  •                 //tbody:只对tbody起作用
  •                 // tr:even：偶数行
  •                 // tr.odd：基数行
  •     <!-- thead表头标签 ：让此内容在表的开头--> 
  • <!-- tbody表身体标签 -->
  • <!-- tfoot表尾标签：内容在表的结尾 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		</style>

		<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>

		<script type="text/javascript">
			$(function() {
				// $("#myTable tr:even").css("background-color", "aliceblue");
				// #myTable：祖先选择器：，只对myTable表格起作用
				//tbody:只对tbody起作用
				// tr:even：偶数行
				// tr.odd：基数行
				$("#myTable tbody tr:even").css("background-color", "aliceblue");
				$("#myTable tr:odd").css("background-color", "beige");
			});
		</script>
	</head>
	<body>
		<table id="myTable" border="1" cellspacing="" cellpadding="">
			<!-- thead表头标签 ：让此内容在表的开头-->
			<thead>
				<tr>
					<th>收费单位</th>
					<th>付款方式</th>
					<th>结算方式</th>
					<th>状态</th>
				</tr>
			</thead>

			<!-- tbody表身体标签 -->
			<tbody>
				<tr>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
				<tr>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
				<tr>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
				<tr>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
			</tbody>

			<!-- tfoot表尾标签：内容在表的结尾 -->
			<tfoot>
				<tr>
					<td>总结</td>
					<td>总结</td>
					<td>总结</td>
					<td>总结</td>
				</tr>
			</tfoot>


		</table>
		<table id="" border="1" cellspacing="" cellpadding="">
			<tr>
				<th>收费单位</th>
				<th>付款方式</th>
				<th>结算方式</th>
				<th>状态</th>
			</tr>
			<tr>
				<td>XX有限公司</td>
				<td>手机</td>
				<td>支付宝</td>
				<td>已付款</td>
			</tr>
			<tr>
				<td>XX有限公司</td>
				<td>手机</td>
				<td>支付宝</td>
				<td>已付款</td>
			</tr>
		</table>
	</body>
</html>

操作:3:成功:401-祖先选择器和孩子选择器

1.运行结果:成功:

  1. 后代选择器：不管是儿子、孙子等等都可以，只要是后代就可以
  2. 儿子：必须是父子关系，不包括孙子等关系
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		</style>

		<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>

		<script type="text/javascript">
			$(function() {
				// $("#myTable tr:even").css("background-color", "aliceblue");
				// #myTable：祖先选择器：，只对myTable表格起作用
				//tbody:只对tbody起作用
				// tr:even：偶数行
				// tr.odd：基数行
				// $("#myTable tbody tr:even").css("background-color", "aliceblue");
				// $("#myTable tr:odd").css("background-color", "beige");
				// $(祖先 后代)
				// $("table td").css("background-color", "beige");
				$("#myTable td").css("background-color", "beige");

				//后代选择器：不管是儿子、孙子等等都可以，只要是后代就可以
				$("div span").css("background-color", "red");

				//儿子：必须是父子关系，不包括孙子等关系
				$("div>div").css("background-color", "green");

			});
		</script>
	</head>
	<body>
		<div id="">
			<p>
				asdad
				<span id="">
					all
				</span>
			<div>
				asdqwebsmndbhfkh爱斯达克比那时
			</div>
			</p>

		</div>

		<table id="myTable" border="1" cellspacing="" cellpadding="">
			<!-- thead表头标签 ：让此内容在表的开头-->
			<thead>
				<tr>
					<th>收费单位</th>
					<th>付款方式</th>
					<th>结算方式</th>
					<th>状态</th>
				</tr>
			</thead>

			<!-- tbody表身体标签 -->
			<tbody>
				<tr>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
				<tr>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
				<tr>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
				<tr>
					<td>XX有限公司</td>
					<td>手机</td>
					<td>支付宝</td>
					<td>已付款</td>
				</tr>
			</tbody>

			<!-- tfoot表尾标签：内容在表的结尾 -->
			<tfoot>
				<tr>
					<td>总结</td>
					<td>总结</td>
					<td>总结</td>
					<td>总结</td>
				</tr>
			</tfoot>


		</table>
		<table id="" border="1" cellspacing="" cellpadding="">
			<tr>
				<th>收费单位</th>
				<th>付款方式</th>
				<th>结算方式</th>
				<th>状态</th>
			</tr>
			<tr>
				<td>XX有限公司</td>
				<td>手机</td>
				<td>支付宝</td>
				<td>已付款</td>
			</tr>
			<tr>
				<td>XX有限公司</td>
				<td>手机</td>
				<td>支付宝</td>
				<td>已付款</td>
			</tr>
		</table>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_40544338/article/details/121679772
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022