Web Front End Season 4 (jQuery): Four: 301 - jQuery Basic Filters (Odd and Even) + 302 - Implement Interlaced Color Change + 401 - Ancestor Selector and Child Selector

content

First, the purpose

1. Think: learn front-end knowledge

2. Thinking: Take notes, next time you don't need to watch the video, just look at the notes to quickly recall.

2. Reference

1. GitHub URL of my own code

2. SIKI Academy: I refer to this video for practice

3.w3school official website: use it as a dictionary

4. Rookie Tutorial: Use as a Dictionary

5. Web Front End Season 1 (HTML): My own note-taking blog

6. Web Front End Season 2 (CSS): My own note blog

7. Web Front End Season 3 (JavaScript): My own note-taking blog

3. Attention

Action: 1: Success: 301 - jQuery Basic Filter (Odd and Even)

1. Running result: success:

Action: 2: Success: 302 - Interlace Color Change

1. Running result: success:

Action: 3: Success: 401 - Ancestor Selector and Child Selector

1. Running result: success:

---

First, the purpose

1. Think: learn front-end knowledge

2. Thinking: Take notes, next time you don't need to watch the video, just look at the notes to quickly recall.

2. Reference

1. GitHub URL of my own code

​​​​​GitHub - xzy506670541/WebTest: Web Frontend for SIKI Academy

2. SIKI Academy: I refer to this video for practice

Login - SiKi Academy - Life is endless, learning is endless! Teacher siki's Unity3D professional video learning platform, thousands of real-time update courses for students to watch online, provide the latest, most complete and fastest video learning courses for domestic developers http://www.sikiedu.com/my/course /212

1. I refer to this video for practice

3.w3school official website: use it as a dictionary

w3school online tutorials

4. Rookie Tutorial: Use as a Dictionary

Rookie Tutorial - Learning is not only technology, but also a dream!

5. Web Front End Season 1 (HTML): My own note-taking blog

Web Front End Season 1 (HTML): 1:101 - Why Learn Web Front End? +102 - What is HTML? +103-Installation tools and learning methods+04-Create the first web page file Action: Success 1. What is HTML? 1. Why learn HTML? 1. Applicable objects of this course? 1. Relationship between web front-end engineers and back-end 1. What development tools are used? 1. How to study? 1. Operation: The first webpage: 1. Purpose 1. 2. Reference 1. SIKI Academy Login - SiKi Academy - Life is endless, learning is endless! I refer to this video practice 1. Nodepad++ official website https: https://blog.csdn.net/qq_40544338/article/details/120907015

6. Web Front End Season 2 (CSS): My own note blog

Web Front End Season 2 (CSS): 1:101-What is CSS+102-Download and install HBuilder+103-What are div and span tags+104-The difference between block elements and inline elements+105-CSS basic syntax _Smart_zy Blog-CSDN Blog Directory 1. Purpose 1. Think: learn front-end knowledge 2. Think: take notes, you don't need to watch the video next time, just look at the notes to quickly recall. 2. Reference 1. GitHub URL of my own code 1. SIKI Academy: I refer to this video for practice 1. w3school official website: use it as a dictionary 1. Rookie tutorial: use it as a dictionary 3. Note 4. Operation: 1: Success: 101 - What is CSS? 1. Success: Understand what CSS is 4. Operation: 2:102-Download and install HBuilder1. Download: found that the official website does not have HBuilder (already the previous version), all are HBuilderX1. Create a project. https://blog. csdn.net/qq_40544338/article/details/120968455

7. Web Front End Season 3 (JavaScript): My own note-taking blog

Web Front End Season 3 (JavaScript): 1: Chapter 1: JavaScript Basics: 101-What is the JavaScript language +102-Write the first JavaScript code +103-Three ways to write js code_Smart_zy's Blog-CSDN Blog directory 1. Purpose 1. Think: learn front-end knowledge 2. Think: take notes, next time you don't need to watch the video, just look at the notes to quickly recall. 2. Reference 1. GitHub URL of my own code 1. SIKI Academy: I refer to this video for practice 1. W3school official website: use it as a dictionary 1. Rookie tutorial: use it as a dictionary 3. Note 4. Operation: 1: Success: 101 - What is the JavaScript language 1. Introduction to JS 4. Operation: 2: Success: 102-Write the first JavaScript code 1. New project: 1. Running result: Success: Jump out of the warning window 4. Operation: 3: Success: 103- Writing j. https://blog.csdn.net/qq_40544338/article/details/121351279

3. Attention

Action: 1: Success: 301 - jQuery Basic Filter (Odd and Even)

1. Running result: success:

 Change the color of each row of the table
Function: It is convenient to distinguish the difference between rows

No need to find the parent-child level, jQuery can recognize it directly; for example: index 1 is a subset of index 0, but it also changes color

<!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>

Action: 2: Success: 302 - Interlace Color Change

1. Running result: success:

Change the color of each row of the table
Function: It is convenient to distinguish the difference between rows

• // $("#myTable tr:even").css("background-color", "aliceblue");
•                 // #myTable: ancestor selector:, only works on myTable table
•                 //tbody: only works on tbody
•                 // tr:even: even lines
•                 // tr.odd: radix row

•     <!-- thead header tag: make this content at the beginning of the table --> 
• <!-- tbody table body tag -->
• <!-- tfoot footer tag: the content is at the end of the table -->

<!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>

Action: 3: Success: 401 - Ancestor Selector and Child Selector

1. Running result: success:

1. Descendant selector: whether it is a son, grandson, etc., as long as it is a descendant
2. Son: must be a father-son relationship, excluding grandson and other relationships

<!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>