1
00:00:00,110 --> 00:00:00,530
大丈夫。

2
00:00:00,530 --> 00:00:01,500
お帰りなさい。

3
00:00:01,500 --> 00:00:03,350
だから、いくつかのコードを書いてみましょう。

4
00:00:03,480 --> 00:00:07,290
そして、どのようにするかを学ぶつもりは、要素を選択する方法です。

5
00:00:07,290 --> 00:00:13,190
だから、通常の支配的な関係や音声学のようにはい、私たちは物事を選択して操作する必要があります。

6
00:00:13,380 --> 00:00:17,880
私はそこに壊れた記録があることは分かっていますが、それは本当に重要なプロセス選択であり、次に物事を変えます。

7
00:00:17,880 --> 00:00:18,300
 

8
00:00:18,300 --> 00:00:23,790
このビデオは主に、J Queryを使用して要素を2つの主な目的で選択することに重点を置く予定です。

9
00:00:23,790 --> 00:00:24,230
 

10
00:00:24,390 --> 00:00:30,600
最初の方法は、ドル記号機能を持つ要素を選択する方法を学習してから、C評価メソッドを使用して要素をスタイルする方法です。

11
00:00:30,740 --> 00:00:33,500
 

12
00:00:33,630 --> 00:00:38,160
 

13
00:00:38,160 --> 00:00:44,010
だから、選択したものだけをプリントアウトするだけでなく、より視覚的にすることができます。それらを選択し、背景色とジェイクエリーを変更します。

14
00:00:44,010 --> 00:00:45,210
 

15
00:00:45,570 --> 00:00:46,800
ドル記号。

16
00:00:46,920 --> 00:00:52,860
だからバニラ・Jと違って S.

17
00:00:52,920 --> 00:00:55,650
idで要素を取得するドキュメントがあるクエリセレクタクエリセレクタすべてのクラス名の要素を取得タグ名で要素を取得します。

18
00:00:55,650 --> 00:01:00,660
ドル記号を選択するには非常に多くの異なる方法があり、Jayのクエリはそれらのすべてを置き換えます。

19
00:01:00,990 --> 00:01:07,230
基本的にはクエリセレクタのように動作し、Csスタイルのセレクタを提供します。

20
00:01:07,320 --> 00:01:12,370
そしてJayクエリーは、私たちがそれを与えるセレクタと一致するすべての一致する要素を返します。

21
00:01:12,720 --> 00:01:18,360
 

22
00:01:18,360 --> 00:01:25,460
だから私はここで例を挙げておきますが、ページ上のイメージタグをすべて選択したければ、スケールの尺度ですべての要素を選択したい場合はこのように見えます。

23
00:01:25,620 --> 00:01:28,380
スタイルセレクタが設定されていることを忘れないでください。

24
00:01:28,380 --> 00:01:33,840
だから、IDのためには、ドットを必要とするクラスのためにThorpeへの弧が必要であり、リスト要素の内側にあるすべてのアンカータグを選択するなど、もっと高度な処理を行うこともできます。

25
00:01:33,840 --> 00:01:39,000
 

26
00:01:39,360 --> 00:01:41,900
だから私はこれがどのように動作するかについてここで簡単にデモを行います。

27
00:01:42,060 --> 00:01:47,750
だから私たちはJake QuerreyのデモでCdnが含まれている場所に彼のページを設定しました。

28
00:01:48,300 --> 00:01:53,190
N単語を使用するかどうかは関係ありません。ダウンロードしたコピーを使用する場合も同様です。

29
00:01:53,190 --> 00:01:54,180
 

30
00:01:54,180 --> 00:01:58,110
だから、ここにそのスクリプトが必要ですし、それから遊ぶためにいくつかのコンテンツが必要です。

31
00:01:58,110 --> 00:02:00,410
だから私はH-1 Sを保つつもりです。 J. コアデモ

32
00:02:00,510 --> 00:02:05,970
私はこれらの味方をちょっとユニークなものに変えて、私が好きな動物をいくつか入れておきます。

33
00:02:06,480 --> 00:02:08,260
ですから、ニュートにとっては終わりです。

34
00:02:08,520 --> 00:02:14,100
私の5歳の自己の動物のアルファベットの歌のお気に入りの部分は、私のお気に入りのアルバムの別の猿に追加されます。

35
00:02:14,410 --> 00:02:15,510
 

36
00:02:15,870 --> 00:02:19,050
そして最後に松のマーティン。

37
00:02:19,680 --> 00:02:24,820
そして、あなたが松の牧場を見たことがないなら、彼らは同じように愛らしい恐ろしい動物です。

38
00:02:24,950 --> 00:02:27,190
だからあなたはここでかなり愛らしいが見えます。

39
00:02:28,060 --> 00:02:32,690
しかし、あなたが実際にそれらを見てみると、彼らはクレイジーな捕食者で、かなり恐ろしいものです。

40
00:02:33,000 --> 00:02:33,270
OK。

41
00:02:33,300 --> 00:02:38,770
だから私の好きな動物のいくつかはリストに保存され、これを今開いてみましょう。

42
00:02:39,720 --> 00:02:41,150
私たちが正しいディレクトリにいることを確認してください。

43
00:02:41,200 --> 00:02:47,730
Jayは、それぞれのChimoと私がやることは、これを独自のウィンドウで移動するというデモを行い、フォントサイズを少し大きめにしてコンソールに入るだけで、これらのいくつかを選択するクエリを使用しましょう。

44
00:02:47,730 --> 00:02:53,190
 

45
00:02:53,640 --> 00:02:56,100
だから、ドル記号は関数であることを忘れないでください。

46
00:02:56,520 --> 00:03:00,490
私がちょうどドル記号をタイプすればそれはカッコなしでそれ自身です。

47
00:03:00,720 --> 00:03:06,930
括弧や詐欺を使わずにアラートを入力するのと同じです。 括弧なしのドットログは、私に教えてくれる以外は何もしません。

48
00:03:06,930 --> 00:03:08,700
 

49
00:03:08,940 --> 00:03:12,610
うん、私はそのコードについて知っているが、実際にはそれを実行しない。

50
00:03:13,170 --> 00:03:16,860
ページ上で唯一のH-1を選択して始めましょう。

51
00:03:16,860 --> 00:03:24,550
ドル記号とsセレクターを使用してh個のものを選択するだけでH-1で、Enterキーを押します。

52
00:03:24,600 --> 00:03:27,480
あなたはそれがJのqueeryのデモH-1を返すのを見ることができます。

53
00:03:27,630 --> 00:03:30,110
それで、それがリストの中にあることに気づくでしょう。

54
00:03:30,300 --> 00:03:36,480
したがって、最初のインスタンスを返すクエリセレクタとは異なり、ドル記号セレクタが使用されます。

55
00:03:36,480 --> 00:03:42,360
実際に役に立つアイテムが1つしかない場合でも、クエリはリストを返します。これは少しだけわかります。

56
00:03:42,360 --> 00:03:43,310
 

57
00:03:43,320 --> 00:03:51,570
それで、すべての同盟国を今選ぶようにしましょう。そうすれば、Dollar Sign Allyのようなことをすることができ、私たちはそれと同じように3つの味方を得ることができます。

58
00:03:51,570 --> 00:03:53,150
 

59
00:03:53,490 --> 00:03:59,130
身体をタイプして体を選択したり、物事を少し面白くすることもできます。

60
00:03:59,130 --> 00:04:08,550
私たちの年齢のEメールに戻り、私を追加してみましょう。 D.

61
00:04:08,550 --> 00:04:16,560
パインマーティンに私たちはそれをイードとして愛らしいと呼ぶでしょうし、私たちはハウラーの猿にもAタグのハウラーの猿を加えることができます。そしてそれはちょうど猿のドットコムに行きます、そして、これはちょうど猿のドットコムになります。

62
00:04:16,620 --> 00:04:20,430
 

63
00:04:20,730 --> 00:04:28,640
私はそのリンクを選択したい場合は、私はドル記号を使用し、私はアンカータグを行うことができ、それは私にそれを与えるだろうと私はリフレッシュしてください。

64
00:04:29,130 --> 00:04:30,550
 

65
00:04:30,600 --> 00:04:34,740
私はまた、同盟国の内部にアンカータグを言うことができます。

66
00:04:34,980 --> 00:04:40,040
意志の代わりに同盟者の中にアンカータグだけを本当に言いたいのであれば、私もできます。

67
00:04:41,100 --> 00:04:43,990
これまでのすべての場合において、それらは同一である。

68
00:04:44,160 --> 00:04:51,270
しかし、ページの一番下に別のアンカータグを追加すると、Googleドットコムが更新されます。

69
00:04:51,810 --> 00:04:55,290
そして、今私はドル記号アンカータグを行います。

70
00:04:55,290 --> 00:04:57,350
私は両方のアンカータグを取得します。

71
00:04:57,820 --> 00:05:05,370
私がアンカータグを持った同盟国とドル記号のULをしているのであれば、このアンカータグだけが私に与えられます。

72
00:05:05,370 --> 00:05:05,820
 

73
00:05:05,970 --> 00:05:13,660
それとも、ここでこれを短縮して、アイデアが好きなアイテムを選択することができました。それはちょうど奇妙な選択、またはすべての質問セレクタまたはC

74
00:05:13,950 --> 00:05:19,700
Ssのように動作し、北極またはハッシュ記号が必要です。

75
00:05:19,770 --> 00:05:27,890
IDネームは愛らしい、それは私にパインマ​​ートンの味方を与える。

76
00:05:27,940 --> 00:05:32,250
だから私たちがどのように選んだのか分かりましたし、物事をコンソールに印刷したり、ここに戻ってくるのを見るだけではそれほどエキサイティングではありません。

77
00:05:32,250 --> 00:05:33,660
 

78
00:05:33,670 --> 00:05:38,530
SSと呼ばれ、セレクタのドル記号とセレクタをタイプして、その最後にDotsie

79
00:05:38,520 --> 00:05:43,300
SSを追加して、プロパティや値を渡して変更することができます。

80
00:05:43,300 --> 00:05:51,060
 

81
00:05:51,060 --> 00:05:57,580
しかし、私が実際にやりたがっていることは、次のいくつかのビデオでもっと多くの方法を見ていく方法を紹介することですが、今私はビジュアルを作り、スタイリングを変えるのに役立つものを見せますメソッドはDotsie

82
00:05:57,610 --> 00:06:00,440
 

83
00:06:00,450 --> 00:06:07,150
だから私は特別なアイデアを使って何かを選んで、その上にCSSAを走らせて境界線を2ピクセルの赤色に変えている例を示します。

84
00:06:07,140 --> 00:06:11,220
 

85
00:06:11,500 --> 00:06:13,190
だから私はそれを実証させてください。

86
00:06:13,300 --> 00:06:15,400
H-1にやってみましょう。

87
00:06:15,390 --> 00:06:21,390
だからドル記号H-1 Dotsie SSをこのように選ぶ。

88
00:06:21,610 --> 00:06:30,380
そして、ここではなく、色を黄色に変えてみましょう。

89
00:06:30,630 --> 00:06:31,480
そして私はエンターを押した。

90
00:06:31,600 --> 00:06:34,980
そして、あなたはそれが素晴らしい黄色に変わるのを見ることができます。

91
00:06:35,310 --> 00:06:39,420
だから、あなたがj Querreyなしでこれをどうやってやるのか、常に覚えておいてください。

92
00:06:39,630 --> 00:06:49,270
だから、ドキュメントクエリーセレクタH-1ドットを取得し、BにそのC

93
00:06:49,260 --> 00:06:54,840
Sを持たせないドキュメントのようなことをするでしょう。だから、ドットスタイルのドットカラーを等しくする必要があります。

94
00:06:54,940 --> 00:06:56,700
それをオレンジ色に変えましょう。

95
00:06:57,690 --> 00:06:58,400
そしてそこに行く。

96
00:06:58,440 --> 00:07:04,110
私たちはそれをオレンジ色に変えましたが、ここのこのラインは実際にはもっと強力であり、ここでこの1行でできるよりもはるかに多くを行うことができます。

97
00:07:04,380 --> 00:07:06,300
 

98
00:07:06,550 --> 00:07:11,490
このH-1について複数のスタイルを変更したかったとしましょう。色と背景色と境界を変更したいと思いました。

99
00:07:11,680 --> 00:07:14,100
 

100
00:07:14,110 --> 00:07:19,240
私ができることは、オブジェクトにスタイルを定義し、オブジェクトを渡します。

101
00:07:19,480 --> 00:07:24,250
だから、私はちょうど文字列ポーターをポーターの値にする必要はありません。

102
00:07:24,550 --> 00:07:29,920
複数のプロパティを持つオブジェクトを複数のキー値のペアとして定義して渡すと、それらがすべて適用されます。

103
00:07:29,910 --> 00:07:31,070
 

104
00:07:31,360 --> 00:07:32,500
それでは、今やってみましょう。

105
00:07:32,760 --> 00:07:37,080
私たちのスタイルを定義しましょう。別のオブジェクトを作る必要はありません。

106
00:07:37,120 --> 00:07:38,250
私はあなたにそれを見せます。

107
00:07:38,350 --> 00:07:50,220
そして、ここではなく、色は赤い背景がピンクでなければならないと言うでしょう、そして、私たちは国境を行うでしょう。

108
00:07:50,230 --> 00:07:56,340
 

109
00:07:56,740 --> 00:08:02,460
そしてEnterを押すと、今度はスタイルのオブジェクトと何かを呼び出すことができます。

110
00:08:02,740 --> 00:08:05,060
それでは、H-1を選択します。

111
00:08:05,310 --> 00:08:14,200
だから、ドル記号H-1は再び私たちを誇りに思って、私たちはスタイルオブジェクトを渡して、それらのスタイルすべてが適用されます。

112
00:08:14,190 --> 00:08:14,950
 

113
00:08:15,190 --> 00:08:19,720
したがって、jクエリを使用しないでこれを行うには、3つの別々の行を実行する必要があります。

114
00:08:19,750 --> 00:08:26,830
あなたは、質問者があなたのH-1スタイルの濃い色を赤に等しくし、そしてドットスタイルのドットバックグラウンドがピンクに等しく、ボーダーが2ピクセルのパープルパープルに等しくなるような文書を作成する必要があります。

115
00:08:26,880 --> 00:08:32,400
 

116
00:08:32,710 --> 00:08:35,580
うまくいけば、すでに数行だけでそれを見ることができます。

117
00:08:35,640 --> 00:08:38,240
J Queryはすでにかなり強力であることが証明されています。

118
00:08:38,520 --> 00:08:44,020
それがなくてもすべてを行うことができますが、間違いなく時間を節約し、コードをきれいにすることができます。

119
00:08:44,710 --> 00:08:51,330
 

120
00:08:51,340 --> 00:08:57,570
ドットCSSAメソッドのもう1つの機能は、私ができることは、実際には最初のものを選択して黄色にするのではなく、一度に複数の要素をスタイルすることです。

121
00:08:57,580 --> 00:08:58,160
 

122
00:08:58,260 --> 00:09:03,290
私たちはすべての味方を選択することができ、それを行うには1行だけ必要です。

123
00:09:03,340 --> 00:09:04,110
だから私はあなたにそれを見せます。

124
00:09:04,110 --> 00:09:06,430
今、すべての嘘をつくりましょう。

125
00:09:06,970 --> 00:09:09,580
だから私は同盟国を選択する必要があります。

126
00:09:09,730 --> 00:09:11,550
そうですね。

127
00:09:11,550 --> 00:09:12,650
そして私がエンターを押した場合。

128
00:09:12,780 --> 00:09:19,120
3人の同盟国すべてが変更される。

129
00:09:19,120 --> 00:09:28,410
あなたはそれが私に3人の味方を与えてくれることを知っているでしょう。そして、私はC

130
00:09:28,410 --> 00:09:31,940
Sにチェーンを張る必要があります。そして私はちょうどそれを単一の財産の色にし、それを青色に変えて、私はエンターを押して、

131
00:09:32,350 --> 00:09:34,610
だから間違いなく非常に強力です。

132
00:09:34,650 --> 00:09:41,990
私たちが行うことはセレクターのドル記号の同盟国で選択することです。それは私たちに3人の同盟国を与え、ALWISのこの同盟国のリストにDotsie

133
00:09:42,000 --> 00:09:46,030
SSを配置することで実現します。

134
00:09:46,240 --> 00:09:51,310
実際にはそれらはすべて青色になり、照会なしで手動でループする必要はありません。

135
00:09:51,340 --> 00:09:52,320
 

136
00:09:52,360 --> 00:09:58,410
だから、私はそれらをすべて緑色に変えたいのであれば、最初にそれらのすべてを選択する必要があります。

137
00:09:58,480 --> 00:09:59,360
 

138
00:09:59,500 --> 00:10:06,570
したがって、varの同盟者は、クエリセレクタがすべて文字列allyを渡すという文書に等しい。

139
00:10:06,790 --> 00:10:08,390
それから私はループする必要があります。

140
00:10:08,520 --> 00:10:15,350
したがって、var Iはゼロに等しく、Elvisesの長さはIプラスになります。

141
00:10:16,260 --> 00:10:22,410
そしてループの中で私たちは同盟関係を遂行する必要があります。そのスタイルはその色と同じです。私たちはそれと同じように緑色にし、エンターを押します。

142
00:10:25,170 --> 00:10:30,100
 

143
00:10:30,390 --> 00:10:32,850
そして、あなたは彼らがすべて緑に変わるのを見ることができます。

144
00:10:32,860 --> 00:10:36,800
だからもう一度それはクエリなしで行うことができますが、それははるかに多くのコードです。

145
00:10:36,900 --> 00:10:40,780
私たちはそれらをすべて最初に選択する必要があり、選択するだけでも苦痛です。

146
00:10:40,770 --> 00:10:43,820
これはちょうどドル記号よりもはるかに長いです。

147
00:10:43,870 --> 00:10:49,060
そして、forループまたはwhileループを使って手作業でループし、それぞれを個別に変更する必要があります。

148
00:10:49,060 --> 00:10:53,450
 

149
00:10:53,560 --> 00:11:01,030
我々が青に戻すためにしなければならなかったのは、すべての同盟国のDotsie SSを選択して青色の青色である私たちの財産を渡すことです。

150
00:11:01,090 --> 00:11:02,900
 

151
00:11:03,420 --> 00:11:05,260
ここでもう少し具体例を説明します。

152
00:11:05,430 --> 00:11:13,710
すべてのアンカータグをCsと同じように選択し、フォントサイズを大きくしてフォントサイズを40ピクセルにしてみましょう。

153
00:11:13,710 --> 00:11:20,970
 

154
00:11:20,980 --> 00:11:27,460
私たちは大きなリンクを取得する私は以前のようにスタイルがいっぱいのオブジェクトを定義でき、それを使って複数の要素を1つではなくスタイル付けすることができることを示します。

155
00:11:27,450 --> 00:11:31,140
 

156
00:11:31,240 --> 00:11:39,120
だから、私たちはすべての嘘を選び、一緒にスタイルを設定し、SSをやって、色のような文字列を渡すのではなく、オブジェクトに与え、ここでそれを定義します。

157
00:11:39,120 --> 00:11:44,890
 

158
00:11:45,550 --> 00:11:47,920
そしてここにいくつかのスペースを追加してタイプします。

159
00:11:48,420 --> 00:11:52,340
最初に行うことは、すべてのフォントサイズを変更することです。

160
00:11:52,540 --> 00:12:00,300
だからNCSAフォントサイズはフォントDaschのサイズまたは高さとJavaScriptのサイズで、私たちはラクダの大文字小文字を使用する必要があります。

161
00:12:00,310 --> 00:12:01,300
 

162
00:12:01,480 --> 00:12:09,540
 

163
00:12:09,820 --> 00:12:20,930
だから、フォントサイズはスペースもダッシュもありませんが、Kimbalの大文字の大文字のメンバーを10にして10ピクセルを作ってから、ボーダーに追加して、これを3ピクセルのダッシュパープルにします。

164
00:12:21,340 --> 00:12:23,610
それらの破線の境界線は常に素晴らしいです。

165
00:12:23,980 --> 00:12:27,840
最後に背景色の背景を追加します。

166
00:12:28,140 --> 00:12:30,490
それでは、自分のRを作りましょう。 G. 色。

167
00:12:30,660 --> 00:12:31,670
だからR. G. B.

168
00:12:31,710 --> 00:12:33,540
そして私たちはG. P。 A. 実際に

169
00:12:33,690 --> 00:12:36,640
そして最初のものも読まれます。

170
00:12:37,070 --> 00:12:43,340
89赤45緑20青。

171
00:12:43,480 --> 00:12:49,490
そして0。 5不透明度または透明度のチャンネルであるアルファ。

172
00:12:49,620 --> 00:12:54,490
そして、もしあなたがenterを押すと、それらのすべてが一度に適用されることがわかります。

173
00:12:54,630 --> 00:12:58,110
だから私たちのフォントサイズは小さくなります。10ピクセルあります。

174
00:12:58,260 --> 00:13:05,910
我々は、3ピクセルが紫色である同盟国の周りにこれらの素晴らしい境界線を持っています。そして、この色が明るい茶色の色のように見えることが判明した背景色を持っています。

175
00:13:05,910 --> 00:13:11,620
 

176
00:13:11,620 --> 00:13:13,060
 

177
00:13:13,090 --> 00:13:13,360
大丈夫。

178
00:13:13,360 --> 00:13:18,330
だからうまくいけば、あなたはその迅速なデモンストレーションから、ドル記号で選択している2つの異なるものだけを見ることができ、それ自体は信じられないほど強力です。

179
00:13:18,340 --> 00:13:22,070
 

180
00:13:22,090 --> 00:13:26,390
基本的には、キューリなSlichterと奇妙なセレクタがすべて組み合わされたように機能します。

181
00:13:26,640 --> 00:13:29,620
そして構文がはるかに短くて簡単です。

182
00:13:29,910 --> 00:13:36,270
 

183
00:13:36,270 --> 00:13:42,300
 

184
00:13:42,310 --> 00:13:45,040
CSSAメソッドも非常に強力です。なぜなら、ここで行ったように個々のプロパティを変更することができますが、キー値ペアでいっぱいのオブジェクトに渡したようにCSSAプロパティをマスカードすることもできます。

185
00:13:45,100 --> 00:13:51,270
おそらくこのすべての中で最も重要な部分は、私がここでやったようにすべての同盟国のようなコレクションを選択すると、手作業でループして個々に何かを適用する必要はないということです。

186
00:13:51,280 --> 00:13:57,550
Jクエリを使用して一度に1つずつ色を変更します。

187
00:13:57,550 --> 00:14:03,830
 

188
00:14:03,930 --> 00:14:10,710
私が要素の集合を持っていれば、それは自動的にそれをループし、Dotsieの評価をすべてのものに適用します。

189
00:14:10,710 --> 00:14:12,990
 

190
00:14:12,990 --> 00:14:14,600
それは非常に強力です。

191
00:14:14,770 --> 00:14:19,770
それがサイドノートとして、なぜここに配列を返すのかという理由です。

192
00:14:19,890 --> 00:14:25,260
IDのある要素が1つだけあっても、背後にあるすべてのロジックがそのリストをループするので、常にリストに戻します。

193
00:14:25,270 --> 00:14:28,370
 

194
00:14:28,470 --> 00:14:31,860
だから、これをループして、ここには1つの項目があるだけです。

195
00:14:31,890 --> 00:14:33,030
だから、実際にはループしません。

196
00:14:33,040 --> 00:14:34,540
それはちょうど1回以上行きます。

197
00:14:34,890 --> 00:14:38,070
うまくいけばそれを楽しんで、エリーの力を見始めている