1
00:00:00,270 --> 00:00:05,870
いくつかのビデオを前に、要素を選択して操作するという概念を紹介しました。

2
00:00:06,120 --> 00:00:13,050
そこで、H1またはすべての画像タグを選択してから、それらをクリックすると、色を変更したり、アニメートしたり、何かを行うことができます。

3
00:00:13,050 --> 00:00:14,660
 

4
00:00:14,670 --> 00:00:18,360
これまでのところ、私たちは半分とこのビデオを選択するだけをカバーしました。

5
00:00:18,360 --> 00:00:24,090
要素を選択すると、要素を操作するためのさまざまな方法のいくつかを紹介します。

6
00:00:24,120 --> 00:00:26,760
ここで私が話したいと思う4つの主要なことがあります。

7
00:00:26,970 --> 00:00:29,320
最初の要素スタイルはどのように変更するかです。

8
00:00:29,340 --> 00:00:32,050
どのように青くするか、隠すか。

9
00:00:32,070 --> 00:00:34,070
フォントサイズを変更します。

10
00:00:34,080 --> 00:00:40,320
次に、javascriptを使ってクラスを追加したり削除したりして、タグの内容を変更する方法について説明します。

11
00:00:40,320 --> 00:00:40,920
 

12
00:00:41,010 --> 00:00:44,490
では、H-1タグの内部のテキストをどのように変更するのですか？

13
00:00:44,490 --> 00:00:46,590
最後に属性を変更します。

14
00:00:46,590 --> 00:00:52,040
では、イメージタグのソースやAAタグのリファレンスをどのように変更するのですか？

15
00:00:52,230 --> 00:00:55,260
まず、スタイルプロパティについて説明します。

16
00:00:55,260 --> 00:01:00,900
したがって、DOMが構築され、個々のノードが作成されるか、オブジェクトがすべての要素に対して作成されると、スタイルと呼ばれるプロパティがあり、スタイルプロパティは、設定可能なCSSAプロパティごとに膨大な数のプロパティです。

17
00:01:00,900 --> 00:01:07,560
 

18
00:01:07,830 --> 00:01:11,220
 

19
00:01:11,370 --> 00:01:15,460
だから我々はスタイルと要素を別々に行くjavascriptを書くことができます。

20
00:01:15,480 --> 00:01:23,580
そこでここでは、Idハイライトで要素を選択していますので、タグと呼ばれる変数に保存してから操作してください。

21
00:01:23,580 --> 00:01:24,730
 

22
00:01:24,750 --> 00:01:26,370
そして、私がしていることは、私が設定していることです。

23
00:01:26,370 --> 00:01:34,190
青色のタグドットスタイルにドットスタイルのドットカラーを割り当てるドットの境界線は、10ピクセルの赤色になります。

24
00:01:34,200 --> 00:01:37,830
右辺は文字列でなければならないことに注意することが重要です。

25
00:01:38,280 --> 00:01:43,430
したがって、C Sでは、青または約70 P xの周りに引用符を入れる必要はありません。

26
00:01:43,440 --> 00:01:44,730
これはC Ssではありません。

27
00:01:44,730 --> 00:01:45,720
これはJavaScriptです。

28
00:01:45,720 --> 00:01:48,820
だから私たちはまだ通常のjavascriptのルールに従わなければなりません。

29
00:01:49,080 --> 00:01:53,550
だから私は、これらのプロパティのいくつかを示すために使用するシンプルなWebページを設定しました。

30
00:01:54,240 --> 00:02:00,190
したがって、このWebページは、その段落の代わりに段落を1つだけH-1段落させたものです。

31
00:02:00,200 --> 00:02:05,310
強いタグがあり、2つの愛らしいコルギのミックスの2つのイメージがあります。

32
00:02:05,640 --> 00:02:11,100
私がやるべきことは、領事に行き、何かを選ぶことから始める必要があり、私はこのH-1の色と境界を変更するつもりです。

33
00:02:11,100 --> 00:02:13,770
 

34
00:02:13,770 --> 00:02:19,470
だから私はそれを選択する必要があり、クエリセレクタH-1を使う新しい文書でこれを行うには複数の方法があります。

35
00:02:20,650 --> 00:02:22,800
 

36
00:02:25,320 --> 00:02:33,030
そして、私はあなたに巨大なオブジェクトトンとたくさんのプロパティであるH-1スタイルを見せます。

37
00:02:33,600 --> 00:02:41,680
だから私はH-1スタイルの暗い色のようなものの1つを変えて、それを黄色にしてみるつもりです。

38
00:02:42,520 --> 00:02:45,560
そしてそれはすぐに黄色に変わったのを見ることができました。

39
00:02:45,570 --> 00:02:54,300
ボーダーH-1と同じことは、ボーダーが等しいというスタイルは、5ピクセルのソリッドピンクをします。

40
00:02:56,100 --> 00:02:56,950
そしてそこに行く。

41
00:02:57,210 --> 00:03:01,190
もちろん、ピンクのボーダーで黄色にしたい場合はもちろんです。

42
00:03:01,290 --> 00:03:04,910
ページがロードされてから、それを行うためにjavascriptを使用する理由はありません。

43
00:03:04,920 --> 00:03:09,990
 

44
00:03:09,990 --> 00:03:15,210
 

45
00:03:15,210 --> 00:03:18,670
CSSAファイルに入れておくと、ユーザーがページに5秒間いるときにイエローに変わり、ピンクの境界線がある場合や、ユーザーがページの特定の部分にスクロールしたときに表示されるようにしたい場合はjavascriptを使用しますページまたはユーザーが何かをクリックした。

46
00:03:18,690 --> 00:03:23,450
物事をインタラクティブにすることがすべてです。すぐにそれを行う方法がわかります。

47
00:03:24,960 --> 00:03:29,310
 

48
00:03:29,310 --> 00:03:35,430
スタイルプロパティを使うことについての素晴らしい点は、ここでやっているように個々の要素にたくさんのファイルを操作して、この1つのタグで5つの異なるプロパティを変更することが間違いなく良い方法だということです。

49
00:03:35,430 --> 00:03:38,150
 

50
00:03:38,460 --> 00:03:40,740
そして、より良い方法があるという理由がいくつかあります。

51
00:03:40,740 --> 00:03:43,350
最初の1つは、これは非常に乾燥したコードではないということです。

52
00:03:43,350 --> 00:03:46,740
繰り返しタグ付けされたスタイルのタグ付きスタイルがたくさんあります。

53
00:03:46,740 --> 00:03:50,670
もっと重要なのは、懸念の分離と呼ばれるこのコンセプトがあることです。

54
00:03:50,820 --> 00:03:57,210
したがって、懸念の分離は、私たちのH M L R C Sがjavascriptではないというこのコンセプトです。

55
00:03:57,210 --> 00:04:00,840
それぞれが自分の小さなドメインに責任があり、私たちはそれを望んでいません。

56
00:04:00,840 --> 00:04:02,830
私たちはそれらの間に多くのクロスオーバーを望んでいません。

57
00:04:02,850 --> 00:04:08,190
したがって、この図では、各チーム間にクロスオーバーがあり、構造とJavaScriptの動作が交錯し、評価がプレゼンテーションであることがわかります。

58
00:04:08,190 --> 00:04:12,930
 

59
00:04:12,930 --> 00:04:18,690
Htmlのjavascriptと少しオーバーラップしていますが、実際にスタイル属性を使用するすべての要素に個別にスタイルを記述しなければならなかったのはC

60
00:04:18,690 --> 00:04:25,050
Ssが来る前のことでした。

61
00:04:25,050 --> 00:04:25,840
 

62
00:04:26,130 --> 00:04:32,310
その場合、スタイリングは実際に構造体に織り込まれていました.C Sでは、これを分離しました。

63
00:04:32,310 --> 00:04:33,500
 

64
00:04:33,570 --> 00:04:38,710
HMOは純粋な構造であり、その成功は純粋なスタイルです。

65
00:04:38,880 --> 00:04:44,430
 

66
00:04:44,460 --> 00:04:50,490
 

67
00:04:50,490 --> 00:04:52,620
だから、javascriptには、ページの振る舞いを制御しなければならないということがあります。時には、JavaScriptのスタイルを変更することを意味します。

68
00:04:52,680 --> 00:04:57,530
私たちができることは、CSSAファイルの内部でそれらを有効または無効にすることです。

69
00:04:57,570 --> 00:05:04,270
したがって、実際に一般的なパターンの1つは、ハイライトのようなCSSAクラスを定義することです。ハイライトクラスは、変化している5つまたは6つの異なるプロパティを持ちます。

70
00:05:04,270 --> 00:05:08,380
 

71
00:05:08,380 --> 00:05:13,210
そして、javascriptで要素を選択し、そのハイライトクラスを与えることができます。

72
00:05:13,210 --> 00:05:18,930
だから1行のJavascriptでは、5つの異なるプロパティを変更するクラスを追加できます。

73
00:05:19,150 --> 00:05:22,660
これがJavascriptでどのように実装されるかを見てみましょう。

74
00:05:22,690 --> 00:05:29,020
 

75
00:05:29,020 --> 00:05:35,770
だから、タグを選択してスタイルを変えるのではなく、色を青にして境界線を上にして、10ピクセルの赤色にすることができます。代わりに、そのクラスのクラスを見つけることができます。

76
00:05:36,250 --> 00:05:41,940
通常、それはクラスが何をすることになっているかを反映するために、いくらか意義があることを望みます。

77
00:05:42,040 --> 00:05:45,040
それは強調表示されているか、それとも正解かです。

78
00:05:45,040 --> 00:05:49,840
試しにクラスを適用している理由が何であれ、高い得点が得られます。

79
00:05:50,170 --> 00:05:56,320
だから、これは良い名前ではありませんが、いくつかのクラスは、いくつかのクラスは、青と境界線10ピクセルの赤色になるように色を変更しています。

80
00:05:56,320 --> 00:05:57,820
 

81
00:05:57,820 --> 00:06:06,280
次に、自分のタグを選択してから、ドットクラスリストのドットをタグ付けすることで、いくつかのクラスを追加すると、これらのスタイルのすべてでいくつかのクラスと呼ばれる新しいクラスが強調表示されます。

82
00:06:06,310 --> 00:06:12,730
 

83
00:06:12,730 --> 00:06:13,790
 

84
00:06:13,810 --> 00:06:16,030
クラスリストでできることがいくつかあります。

85
00:06:16,270 --> 00:06:22,990
だから、この例では私が既に見た3つのメソッドaddを示します。これはクラス名を取るclass

86
00:06:23,020 --> 00:06:29,200
removeをどのように追加することができ、そのクラス名をクラスリストから削除して、クラスリストトグルを非常に便利にします。

87
00:06:29,230 --> 00:06:30,760
 

88
00:06:30,760 --> 00:06:31,960
クラス名が必要です。

89
00:06:32,080 --> 00:06:37,570
そして、与えられた要素が既にそのクラスを持っているなら、要素がそのクラスを持っていなければそれを削除し、次にそれを有効にします。

90
00:06:37,570 --> 00:06:39,270
 

91
00:06:39,280 --> 00:06:40,550
非常に便利です。

92
00:06:40,630 --> 00:06:42,180
私たちはいつもそれを後で使用します。

93
00:06:42,400 --> 00:06:46,990
それで私がここに私の例に戻る前にあなたにそれを実証させてください。

94
00:06:46,990 --> 00:06:49,300
私は実際に新しいクラスを定義しようとしています。

95
00:06:49,690 --> 00:06:58,630
したがって、新しいスタイルシートを作成し、リンクを使用するのではなく、ちょうど時間のためにスタイルタグを使用するつもりです。

96
00:06:59,500 --> 00:07:00,390
 

97
00:07:00,530 --> 00:07:04,140
だから私はあなたがそれを大きなと呼ぶクラスを定義しようと思います。

98
00:07:04,990 --> 00:07:14,320
そして私がしようとしていることは、フォントサイズを100ピクセルに変更し、色をオレンジ色に変更することです。

99
00:07:15,010 --> 00:07:22,540
最後に、5ピクセルの赤の境界線を付けましょう。

100
00:07:22,960 --> 00:07:24,280
だから私はそれを残すでしょう。

101
00:07:24,370 --> 00:07:30,700
私のページをリフレッシュしても、コースは変わりませんが、私がしたいときは、そのクラスを何かに適用することです。

102
00:07:30,950 --> 00:07:37,120
だから、私はこの段落にこれまでにそれを選択する必要があることをするための大きなクラスを持たせるつもりです。

103
00:07:37,120 --> 00:07:44,900
段落は、クエリセレクタの段落に対応するドキュメントに相当します。

104
00:07:47,180 --> 00:07:47,820
OK。

105
00:07:48,010 --> 00:07:53,130
クラスリストを見てみましょう。空であることがわかります。

106
00:07:53,140 --> 00:07:55,970
この段落にまだ割り当てられているクラスはありません。

107
00:07:56,140 --> 00:08:04,090
ですから、私がする必要があるのは、P-Dubクラスリストのドットを追加するだけです。クラスを大きく追加したいのです。

108
00:08:04,180 --> 00:08:05,310
 

109
00:08:06,190 --> 00:08:07,240
そしてそこに行く。

110
00:08:07,720 --> 00:08:11,370
したがって、私のスタイルシートからの新しい変更が自動的に反映されます。

111
00:08:11,440 --> 00:08:13,540
私がしなければならなかったのは、大きなクラスを追加することだけでした。

112
00:08:13,780 --> 00:08:18,880
だからうまくいけば、これはずっと簡単で、責任を分けていることが分かります。

113
00:08:18,880 --> 00:08:24,940
だから、javascriptは、個々のプロパティを実際に手動で操作するのではなく、SSの特定の部分をオンまたはオフにすることです。

114
00:08:24,940 --> 00:08:27,610
 

115
00:08:27,610 --> 00:08:32,120
私たちは現在、Javascriptではなく、できるだけ小さなものを変更しています。

116
00:08:32,470 --> 00:08:42,430
だから、もし私がそれを取り除きたいのであれば、クラスを持たないクラスはクラスを削除せず、私が言及した私の好きなものは、非常に便利なトグルです。

117
00:08:42,610 --> 00:08:45,940
 

118
00:08:45,940 --> 00:08:52,170
だから私が今トグルを打って打ち込んだ場合、クラスは割り当てられていないので、それをクラスの大きなものに割り当てます。

119
00:08:52,180 --> 00:08:52,940
 

120
00:08:53,320 --> 00:08:56,420
今はbigがすでに割り当てられているため、削除されます。

121
00:08:56,440 --> 00:09:04,030
だから、これは明らかに巨大なフォントクラスでこのクレイジーオレンジを作るのには便利ではありませんが、ユーザーがそれをクリックできるようにするには、リストを行うなどの方法があります。

122
00:09:04,030 --> 00:09:09,610
 

123
00:09:09,880 --> 00:09:11,440
そして、それはそれを越えるでしょう。

124
00:09:11,650 --> 00:09:15,400
しかし、彼らは再びクリックすることができますし、クロスオーバーしたり、正常に戻ったりします。

125
00:09:15,430 --> 00:09:16,400
それが行われるだろう。

126
00:09:16,410 --> 00:09:23,080
または、クラスを切り替えることでそれを行うことができますので、クラスと呼ばれるクラスを持つことができます。そして、クリックをもう一度クリックします。

127
00:09:23,080 --> 00:09:23,700
 

128
00:09:23,800 --> 00:09:24,820
削除されました。

129
00:09:24,820 --> 00:09:27,000
これはトグルを使用する場合の1つの例です。

130
00:09:27,100 --> 00:09:29,740
しかし、それは本当に本当に便利です。

131
00:09:29,740 --> 00:09:34,090
クラスリストについて最後に述べるのは、それが技術的に配列ではないということです。

132
00:09:34,090 --> 00:09:37,840
つまり、クラスを追加するには広告を使用する必要があります。

133
00:09:37,870 --> 00:09:39,900
プッシュのようなことはできません。

134
00:09:40,150 --> 00:09:44,000
ですから、それは技術的には配列ではないことを知っておくことが重要です。

135
00:09:44,470 --> 00:09:48,260
そこで、javascriptを使用してスタイルを操作する2つの異なる方法について説明しました。

136
00:09:48,280 --> 00:09:53,980
最初のものは一度に手動で1つのプロパティを手動で実行しています.1つか2つのことをしているのであれば正直です。

137
00:09:53,980 --> 00:09:55,340
 

138
00:09:55,690 --> 00:10:01,150
しかし、バッチでそれをやっているのであれば、それを複数の要素に分けてやっているのであれば、クラスを使用してクラスをオンまたはオフにする方が、

139
00:10:01,180 --> 00:10:04,930