Web Front End Temporada 4 (jQuery): Cuatro: 301 - Filtros básicos de jQuery (pares e impares) + 302 - Implementar cambio de color entrelazado + 401 - Selector de antepasados y selector de niños

Enterprise 2022-03-23 17:52:16 views: null

contenido

Primero, el propósito

1. Piense: aprenda conocimientos de front-end

2. Pensamiento: tome notas, la próxima vez que no necesite ver el video, solo mire las notas para recordar rápidamente.

2. Referencia

1. URL de GitHub de mi propio código

2. Academia SIKI: me refiero a este video para practicar

Sitio web oficial de 3.w3school: úsalo como diccionario

4. Tutorial para novatos: uso como diccionario

5. Web Front End Season 1 (HTML): mi propio blog para tomar notas

6. Web Front End Season 2 (CSS): mi propio blog de notas

7. Web Front End Season 3 (JavaScript): mi propio blog para tomar notas

3. Atención

Acción: 1: Éxito: 301 - Filtro básico de jQuery (par e impar)

1. Resultado de ejecución: éxito:

Acción: 2: Éxito: 302 - Cambio de color entrelazado

1. Resultado de ejecución: éxito:

Acción: 3: Éxito: 401 - Selector de antepasados ​​y selector de niños

1. Resultado de ejecución: éxito:

Primero, el propósito

1. Piense: aprenda conocimientos de front-end

2. Pensamiento: tome notas, la próxima vez que no necesite ver el video, solo mire las notas para recordar rápidamente.

2. Referencia

1. URL de GitHub de mi propio código

​​​​​GitHub - xzy506670541/WebTest: interfaz web para SIKI Academy

2. Academia SIKI: me refiero a este video para practicar

Iniciar sesión - SiKi Academy - ¡La vida es interminable, el aprendizaje es infinito! La plataforma de aprendizaje de video profesional Unity3D de Teacher siki, miles de cursos de actualización en tiempo real para que los estudiantes los vean en línea, brindan los cursos de aprendizaje de video más recientes, completos y rápidos para desarrolladores nacionales http://www.sikiedu.com/my/course /212

  1. Me refiero a este video para la práctica

Sitio web oficial de 3.w3school: úsalo como diccionario

tutoriales en línea w3school

4. Tutorial para novatos: uso como diccionario

Tutorial para principiantes: ¡aprender no es solo tecnología, sino también un sueño!

5. Web Front End Season 1 (HTML): mi propio blog para tomar notas

Web Front End Season 1 (HTML): 1:101 - ¿Por qué aprender Web Front End? +102 - ¿Qué es HTML? +103-Herramientas de instalación y métodos de aprendizaje+04-Crear el primer archivo de página web Acción: Éxito 1. ¿Qué es HTML? 1. ¿Por qué aprender HTML? 1. Objetos aplicables de este curso 1. Relación entre los ingenieros web front-end y back-end 1. ¿Qué herramientas de desarrollo se utilizan? 1. ¿Cómo estudiar? 1. Operación: La primera página web: 1. Propósito 1. 2. Referencia 1. Inicio de sesión de SIKI Academy - SiKi Academy - ¡La vida es interminable, el aprendizaje es infinito! Me refiero a esta práctica de video 1. Sitio web oficial de Nodepad ++ https: https://blog.csdn.net/qq_40544338/article/details/120907015

6. Web Front End Season 2 (CSS): mi propio blog de notas

Web Front End Temporada 2 (CSS): 1:101-Qué es CSS+102-Descargar e instalar HBuilder+103-Qué son las etiquetas div y span+104-La diferencia entre elementos de bloque y elementos en línea+105-Sintaxis básica de CSS _Smart_zy Blog-CSDN Blog Directory 1. Propósito 1. Piense: aprenda conocimientos de front-end 2. Piense: tome notas, no necesita ver el video la próxima vez, solo mire las notas para recordar rápidamente. 2. Referencia 1. URL de GitHub de mi propio código 1. Academia SIKI: me refiero a este video para practicar 1. Sitio web oficial de W3school: úsalo como diccionario 1. Tutorial para principiantes: úsalo como diccionario 3. Nota 4. Operación : 1: Éxito: 101 - ¿Qué es CSS? 1. Éxito: Comprender qué es CSS 4. Operación: 2:102-Descargar e instalar HBuilder1. Descarga: Se encuentra que el sitio web oficial no tiene HBuilder (ya la versión anterior), todos son HBuilderX1. Crear un proyecto. https ://blog.csdn.net/qq_40544338/article/details/120968455

7. Web Front End Season 3 (JavaScript): mi propio blog para tomar notas

Web Front End Temporada 3 (JavaScript): 1: Capítulo 1: Conceptos básicos de JavaScript: 101-Qué es el lenguaje JavaScript +102-Escribir el primer código JavaScript +103-Tres formas de escribir código js_Directorio Blog-CSDN Blog de Smart_zy 1. Propósito 1 .Piense: aprenda el conocimiento de front-end 2. Piense: tome notas, la próxima vez que no necesite ver el video, solo mire las notas para recordar rápidamente. 2. Referencia 1. URL de GitHub de mi propio código 1. Academia SIKI: me refiero a este video para practicar 1. Sitio web oficial de W3school: úsalo como diccionario 1. Tutorial para principiantes: úsalo como diccionario 3. Nota 4. Operación : 1: Éxito: 101 - ¿Qué es el lenguaje JavaScript? 1. Introducción a JS 4. Operación: 2: Éxito: 102-Escriba el primer código JavaScript 1. Nuevo proyecto: 1. Resultado en ejecución: Éxito: Saltar fuera de la ventana de advertencia 4. Operación: 3: Éxito: 103- Redacción j. https://blog.csdn.net/qq_40544338/article/details/121351279

3. Atención

Acción: 1: Éxito: 301 - Filtro básico de jQuery (par e impar)

1. Resultado de ejecución: éxito:

 Cambia el color de cada fila de la tabla
Función: Es conveniente distinguir la diferencia entre filas

No es necesario encontrar el nivel padre-hijo, jQuery puede reconocerlo directamente; por ejemplo: el índice 1 es un subconjunto del índice 0, pero también cambia de 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>

Acción: 2: Éxito: 302 - Cambio de color entrelazado

1. Resultado de ejecución: éxito:

Cambia el color de cada fila de la tabla
Función: Es conveniente distinguir la diferencia entre filas

  • // $("#myTable tr:even").css("background-color", "aliceblue");
  •                 // #myTable: selector de antepasados:, solo funciona en la tabla myTable
  •                 //tbody: solo funciona en tbody
  •                 // tr:even: líneas pares
  •                 // tr.odd: fila base
  •     <!-- etiqueta del encabezado del anuncio: haga este contenido al principio de la tabla --> 
  • <!-- tbody etiqueta del cuerpo de la tabla -->
  • <!-- tfoot footer tag: el contenido está al final de la tabla -->
<!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>

Acción: 3: Éxito: 401 - Selector de antepasados ​​y selector de niños

1. Resultado de ejecución: éxito:

  1. Selector de descendientes: si es hijo, nieto, etc., siempre que sea descendiente
  2. Hijo: debe ser una relación padre-hijo, excluyendo nieto y otras relaciones
<!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>

 

Supongo que te gusta

Origin blog.csdn.net/qq_40544338/article/details/121679772
Recomendado
Clasificación
Diario
Más
2024-05-28(0)
2024-05-27(1)
2024-05-26(1)
2024-05-25(0)
2024-05-24(13)
2024-05-23(34)
2024-05-22(10)
2024-05-21(34)
2024-05-20(5)
2024-05-19(0)

Code World

© 2018 codetd.com