よろしくお願いします。
だからこのビデオは少し違ってくるだろう。
私たちはDOMを操作するための新しい方法を紹介するつもりはありませんが、私たちが学んだことを受け取り、コードを少しずつ実行します。
だからGoogleのホームページで遊ぶつもりだ。
だから、私はあなたと一緒にこれを行うか、あなたがビデオを見た後にあなた自身でこれを行うGoogleを開くことをお勧めします。
そして、ロゴの変更などの楽しいことをやっていきます。
今度は、すべてのリンクを変更してドットコムやそのようなものになるように、すべての猫愛好家に公平になるように、今回は子猫の写真を撮ります。
このレッスンで強調したい点の1つは、ループを使用して複数の要素を操作できるため、必ずしも1つのものを選択して色を変更したり、1つの画像を選択してソースを変更する必要はありません。
すべての画像を選択し、そのリストをループし、それぞれの画像を元に戻すことができます。
だから私はここでそれをどうやってやるのかを見せてくれるだろう。
だから私たちは簡単に始めるでしょう。
このロゴを選択して始めましょう。
この通常のロゴの代わりにGoogle Doodleを持っている日にGoogleにいらっしゃいましたら、迅速なご注意をお願いします。
ここのイメージではないかもしれません。
時には彼らは派手なアニメーションやインタラクティブなゲームを持っています。
その場合、キャンバス要素のようなものかもしれません。
ですから、あなたがそれを遭遇したときにそれが遭遇したら、それは大丈夫です。あなたはこの部分をちょうど見ることができます。
すでに画像ソースを変更する方法を見てきましたが、誰かのウェブサイトでこれを行うことができるので、選択するだけです。
それはイメージであり、それはIDを持っているので、簡単です。
HPロゴ
だから、それを私たちのロゴと呼ぶことを選択しましょう。
もちろんIDで要素を使用することもできます。
だから我々はそれに等しいロゴで終わる。
だから我々はこれを選択した。
そして、イメージを変更したい場合は、ソースを変更します。
私たちはset属性を使う必要があり、ここにはただのイメージしかありません。
ニースの子猫。
だから私はあなたがこのキダンを取るつもりです。
私はそれをコピーし、私はそれを行うためにこのロゴのソースを更新するつもりです。
恐怖の代わりにロゴのドットセット属性を使用します。
ソースを書くだけです。
そして2番目の引数は新しいソースで、私はenterを押して、私は素敵な小さな猫Roquetteが表示されます。
このようなメッセージが表示されることがあります。
使用する画像によって異なります。
そこで、これについて簡単に説明します。
表示されているようにTTPがロードされたページにあり、Bにソースを設定したイメージがH
TTPであることだけを言及しています。
それを短くするために、HTPはHGPより安全です。
だから、それはすべてのHTPでなければならないと不平を言っているはい、私たちはあまり安全ではないものを使うべきではありません。
それは本当にシンプルなバージョンですが、それでも私たちはそれを可能にします。
私たちがここでやろうとしていることはGoogleで遊んでいるだけの大きな問題ではありません。
あなたのアプリケーションでこのようなことをしているのかどうかを検討したいのですが、それは問題になります。
だからここのコンテンツに戻る。
この猫の幅と高さを変更して、元のGoogleロゴと同じスペースを占めるようにしました。
私は実際に高さが元々92であったのを見ることができます。
そして、それはここで起こっていることです。
私はこれを変更したいのかどうかを知ることができます。私はこのロゴドットスタイルドットのような何かをすることができますし、文字列を取るだけで500ピクセルに変更します。
あなたはそれが伸びているのを見ることができ、私は同じことをすることができます。
1000ピクセルに変更します。
素敵なストレッチキティを取得し、幅を変更することができます。
私は身長を意味し、それを500または貧しい猫にしましょう。
それはちょうどその場所のいたる所に伸びている。
それでは、高さをもう少し適切なものに戻しましょう。
高さが約100ピクセル、幅が約200になるようにしましょう。
今のところ私たちのためにもう少し練習をしてもうまくいくように。
そのイメージの周りにも境界線を付けて、そのスタイル境界線が等しくなるようにして、2ピクセルのパープルの紫色の境界線を作成し、そのイメージの周りに素晴らしいパートナーがいます。
それでは、一度にたくさんの要素を選択し、ループを使って個別に行うのではなく、それらを操作するビデオの冒頭で紹介した内容に移りましょう。
では、ページ上のすべてのアンカータグを選択することになります。
このページには多くのリンクがあります。
私たちはそれぞれを取ってref属性を変更し、どこに行くのではなく、他のいくつかのWebサイトに行きます。
開始するには、すべてのアンカータグを選択する必要があります。そのためには、さまざまな方法があります。
私はそれをリンクと呼ぶつもりで、私たちは文書をやるでしょう。
私たちはクエリーレターをすべて行うことができますが、タグ名のアンカータグで要素を取得します。リンクを参照すると、このページで多くの情報が得られるので、これをループします。
リンクを行うことはできませんドットセット属性は存在しません。
そして、その属性は個々の要素とリンク上にのみ存在するからです。
このノードの集合です。
だから、オブジェクトのような他の配列をループするようにループする必要があります。
実際の配列ではないので、私はそれぞれのために使用することはできません。
ですから、私はforループを使う必要がありますし、技術的にはwhileループを使うこともできます。
ほとんどの人はforループを使います。
ですから、ゼロは等しい長さのリンクは長さよりも小さく、1を追加してから、ループ内で個々のリンクリンクにアクセスします。
テキストコンテンツを印刷することから始めましょう。
したがって、そのテキストコンテンツをリンクし、そのログを取り消します。
だから、これは要素の束をループして何かをする一般的なパターンですが、コンソールでそれを印刷するのではなく、何らかの形でそれを表示したり、色を変える何かを変えたりします。
そこでEnterキーを押すと、これがページ上のすべてのリンクのテキストコンテンツであることがわかります。
だから、写真のようなものを知って、Googleとドライブの翻訳をするYouTubeを再生するこれらすべてのリンクはこのページのどこかにあり、Googleのホームページであることが分かります。
だから、ちょうどヒットの上矢印で物事を印刷し、このループに戻って実際にスタイルを変更して、長さがわかるようにしてみましょう。別の色にして、それらの周りに境界線を作ってみましょう。
だから私はログと私はスタイルのlynxをやるつもりだ私のコンソールを取り除くつもりだ、私たちはバックグラウンドを開始するように変更し、ピンクにしましょう。
私たちがenterを押すと、コンソールを閉じることができます。
ページ上のリンクはすべてピンクになりました。
私はピンクの背景を持っています。
だからここのところはリンクです。
これらのナフはすべてサインインボタンの項目です。
それはまたリンクです。
それでもう一つやりましょう。
もう一度ループしましょう。
上向きの矢印を押して、いくつかのことをやってみましょう。スタイルを作ってみましょう。
枠線は1ピクセルに等しく、ダッシュ紫色にしましょう。
次のラインでは、私はスタイルを変え、色をオレンジ色に変えましょう。
だから2人が入りました。
そして、あなたは私たちのページの上にこれらの本当に美しいリンクを得ることができますピンクの背景小さな紫色のボーダーだけでなく、定期的なボーダーを参照してください。
それは非常に素晴らしいです。
そしてそこにはオレンジ色のテキストもあります。
しかし、それらをクリックすると、トラップはまだ変更されていないことがわかります。
だから私はそれらをすべてWDWに行くように変更したい。
ドットコムをしていることは、詐欺に行く必要があります。 私はすでに自分のリンクを選択しています。
この巨大なコレクションと私はすでにループが書かれているので、私はそれを再利用するつもりです。
そしてこれを繰り返すだけで、たくさんのことができます。
だから、あなたがそれぞれを使うことができないこれらの4つのループを書くことができれば、心地よくなります。
ですから、forループを使用する必要があります。
私たちはこれを常にしています。
そして、ここからJeyの質問に達するまで、このタイプの行をたくさん書いていきます。
だから我々はIをリンクするつもりだ。
そして、我々は始めるつもりですが、すべてのライトが消える場所を印刷して、そのログをキャンセルします。
そして、atraのそのlog get属性を取り消すつもりです。
ちょうどそれのように。
そして、私たちは技術的にそれを発明する必要はありませんが、あなたが見ているほうが簡単です。
私たちはここに見るために私たちの常時閉会のプリントを欠いています。そして今、私たちはすべてのリンクのリストを取得しています。興味深いことに、それらのいくつかを見ることができます。
これはjavascript forward zeroまたはnoへのリンクです。
だから、それらのうちのいくつかは空です。彼らは8つのトレフを持っていません。それらのうちのいくつかは別のウェブサイトに行くか、またはそれらのいくつかはここのような相対パスであり、
OK。
だから、今それらを変更しましょう。
Compton-Rockブログのリンク私は属性を設定しており、それを常に記録する必要はありません。
そして、それらをHGFに変えてHPFをWに変えたいと思っているものに変えましょう。 W. それはちょうどそのようなHTPコロンスラッシュスラッシュBWドットBingドットコムです。
そして我々はエンターを押した。
それは何か変わったようには見えません。
私たちがリンクを打つと、私たちが持っているものだけを見ます。
ひとりひとりがドットコムになり、要素インスペクタでも調べることができます。それはドットコムになります。
テストするために最後に行うことは、クリックすることです。
ですから、すぐにサインインボタンを押すか、Gmailを終了してみてください。
要約すると、一連のリンクを選択し、forループを使ってそのコレクションをループし、そのループ内で各要素に何かできるようにしてから、それらをすべて繰り返します。
だから私は背景色を境界線に変更しました。フォントの色を変更しました。数行しか書かず、このページに20〜30種類の長さがあります。
これは、次のいくつかのビデオで多く使用するパターンです。