Webフロントエンドシーズン4（jQuery）：4：301-jQuery基本フィルター（奇数および偶数）+302-インターレースカラー変更の実装+401-祖先セレクターと子セレクター

開発 2022-03-23 17:51:59 訪問数: null

コンテンツ

まず、目的

1.考える：フロントエンドの知識を学ぶ

2.考える：メモを取る。次にビデオを見る必要がないときは、メモを見るだけですぐに思い出すことができます。

2.リファレンス

1.自分のコードのGitHubURL

2. SIKI Academy：練習のためにこのビデオを参照します

3.w3school公式ウェブサイト：辞書として使用する

4.新人チュートリアル：辞書として使用

5. Webフロントエンドシーズン1（HTML）：私自身のメモ取りブログ

6. Webフロントエンドシーズン2（CSS）：私自身のメモブログ

7. Webフロントエンドシーズン3（JavaScript）：私自身のメモを取るブログ

3.注意

アクション：1：成功：301-jQuery基本フィルター（奇数および偶数）

1.実行結果：成功：

アクション：2：成功：302-インターレースの色の変更

1.実行結果：成功：

アクション：3：成功：401-祖先セレクターと子セレクター

1.実行結果：成功：

まず、目的

1.考える：フロントエンドの知識を学ぶ

2.考える：メモを取る。次にビデオを見る必要がないときは、メモを見るだけですぐに思い出すことができます。

2.リファレンス

1.自分のコードのGitHubURL

GitHub-xzy506670541 / WebTest：SIKIアカデミーのWebフロントエンド

2. SIKI Academy：練習のためにこのビデオを参照します

ログイン-SiKiAcademy-人生は無限大、学習は無限大！Teacher sikiのUnity3Dプロフェッショナルビデオ学習プラットフォームは、学生がオンラインで視聴できる数千のリアルタイム更新コースであり、国内の開発者向けに最新の最も完全で最速のビデオ学習コースを提供しますhttp://www.sikiedu.com/my/course/212

  1. 練習のためにこのビデオを参照します

3.w3school公式ウェブサイト：辞書として使用する

w3schoolオンラインチュートリアル

4.新人チュートリアル：辞書として使用

ルーキーチュートリアル-学習はテクノロジーであるだけでなく、夢でもあります。

5. Webフロントエンドシーズン1（HTML）：私自身のメモ取りブログ

Webフロントエンドシーズン1（HTML）：1：101-なぜWebフロントエンドを学ぶのですか？+102-HTMLとは何ですか？+103-インストールツールと学習方法+04-最初のWebページファイルを作成しますアクション：成功1.HTMLとは何ですか。1.なぜHTMLを学ぶのですか？1.このコースの対象は？1。Webフロントエンドエンジニアとバックエンドの関係1.どの開発ツールが使用されていますか？1.勉強する方法は？1.操作：最初のWebページ：1。目的1.2.リファレンス1.SIKIアカデミーログイン-SiKiアカデミー-人生は無限であり、学習は無限です！私はこのビデオ練習を参照します1.Nodepad++公式ウェブサイトhttps：https: //blog.csdn.net/qq_40544338/article/details/120907015

6. Webフロントエンドシーズン2（CSS）：私自身のメモブログ

Webフロントエンドシーズン2（CSS）：1：101-CSS+102とは-HBuilder+103とは-divタグとspanタグとは+104-ブロック要素とインライン要素の違い+105-CSS基本構文_Smart_zyブログ-CSDNブログディレクトリ1.目的1.考える：フロントエンドの知識を学ぶ2.考える：メモを取る。次回はビデオを見る必要はありません。メモを見るだけですぐに思い出せます。2.参照1.自分のコードのGitHubURL1. SIKI Academy：練習のためにこのビデオを参照します1. W3school公式Webサイト：辞書として使用します1. Rookieチュートリアル：辞書として使用します3.注4.操作：1：成功：101-CSSとは何ですか？1.成功：CSSとは何かを理解する4.操作：2：102-HBuilder1をダウンロードしてインストールします。ダウンロード：公式ウェブサイトにHBuilder（以前のバージョン）がなく、すべてHBuilderX1であることがわかりました。プロジェクトを作成します。https ：//blog。csdn.net/qq_40544338/article/details/120968455

7. Webフロントエンドシーズン3（JavaScript）：私自身のメモを取るブログ

Webフロントエンドシーズン3（JavaScript）：1：第1章：JavaScriptの基本：101-JavaScript言語とは+102-最初のJavaScriptコードを書く+103-jscode_Smart_zyのブログを書く3つの方法-CSDNブログディレクトリ1.目的1 .考える：フロントエンドの知識を学ぶ2.考える：メモを取る、次にビデオを見る必要がないときは、メモを見るだけですぐに思い出すことができます。2.参照1.自分のコードのGitHubURL1. SIKI Academy：練習のためにこのビデオを参照します1. W3school公式Webサイト：辞書として使用します1. Rookieチュートリアル：辞書として使用します3.注4.操作：1：成功：101-JavaScript言語とは1. JSの概要4.操作：2：成功：102-最初のJavaScriptコードを記述します1.新しいプロジェクト：1。実行結果：成功：警告ウィンドウから飛び出します4.操作：3：成功：103-書き込みj。https: //blog.csdn.net/qq_40544338/article/details/121351279

3.注意

アクション：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
おすすめ
TIOBE 5 月リスト: Fortran がトップ 10 に「復活」
GCC 14.1 发布
ランキング
Linuxの一般的なコマンドの緊急対応
FPGAの設計者は、5つの基本的なスキルです
Javaの研究では、2019年6月12日ノート
Golang底层原理剖析之内存逃逸
VIM - Viは、プログラマーのテキストエディタを改善しました
魔法書（MagicTable）入門チュートリアルは、CADの一括転送複数のテーブルExcelをExcelを回し--CAD
mockitoとの望ましくないモック
EVE-NG MPLS L2VPN BGP pw -- スタティック ルート、スタティック mpls lsp
抵抗性タッチスクリーンドライバ（II）
PHP 安装扩展 Api Version 和扩展extensions路径不匹配的问题
アーカイブ
もっと
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)

コードワールド

© 2018 codetd.com