Freecodecamp

無料のCodeCampナレッジポイントの終了：jQuery



Free Code Camp Knowledge Points Finishing



セクション2フロントエンド開発

3、jQuery

1.スクリプトタグとドキュメントレディがどのように機能するかを学ぶ

<script> $(document).ready(function(){ }) script> <div class='container-fluid'> <h3 class='text-primary text-center'>jQuery Playgroundh3> <div class='row'> <div class='col-xs-6'> <h4>#left-wellh4> <div class='well' id='left-well'> <button class='btn btn-default target' id='target1'>#target1button> <button class='btn btn-default target' id='target2'>#target2button> <button class='btn btn-default target' id='target3'>#target3button> div> div> <div class='col-xs-6'> <h4>#right-wellh4> <div class='well' id='right-well'> <button class='btn btn-default target' id='target4'>#target4button> <button class='btn btn-default target' id='target5'>#target5button> <button class='btn btn-default target' id='target6'>#target6button> div> div> div> div>
  • それでは、最も人気のあるJavaScriptライブラリjQueryの学習を始めましょう。JavaScript自体については気にしないでください。後で説明します。
  • jQueryの使い方を学ぶ前に、HTMLファイルにコードを追加する必要があります。
  • 最初にページの上部に行を追加しますscript要素、次にターミネータを記述します。
  • ブラウザはscript jQueryを含むすべてのJavascriptを実行します。
  • あなたのscriptここに、このメソッドを追加します：$(document).ready(function() {あなたのscript，次の使用})このメソッドを終了します
  • 次に、書き方を学びますmethod、method内部のコードはブラウザによってロードされます。
  • document ready functionがない場合、以前は、HTMLがレンダリングされる前にコードが実行され、バグが発生していました。

2.jQueryを使用してセレクターでHTML要素をターゲットにする

<script> $(document).ready(function() { $('button').addClass('animated bounce') }) script>
  • 今、私たちはすでに知っていますdocument ready function使用法。
  • それでは、最初のjQueryステートメントの記述を始めましょう。すべてのjQueryメソッドは$最初で、通常はDollar sign、または単にblingと呼ばれます。
  • jQueryが渡されましたSelector要素を選択し、要素を操作して変更を加えます。
  • たとえば、all Buttonリバウンド効果を実行するには、次のコードをdocument ready function内部に記述します：$('button').addClass('animated bounce')
  • jQueryライブラリとAnimate.cssライブラリをバックグラウンドで導入したので、これら2つのライブラリをエディターで直接使用してから、jQueryを介してbutton要素の追加bounceリバウンドアニメーション効果を使用できます。 。

3.jQueryを使用したクラス別のターゲット要素

<script> $(document).ready(function() { $('button').addClass('animated bounce') $('.well').addClass('animated shake') }) script>
  • 私たちがどのようにそれをすべてに与えたかがわかりますButtonリバウンド効果はありますか？使用する$('button')ボタンを選択して使用する.addClass('animated bounce')ボタンにCSSクラスを追加する。
  • jQuery .addClass()メソッドを使用するだけで、要素にクラスを追加できます。
  • まず、$('.well')を使用してすべてのクラスをwell of div elementとして取得します。
  • なぜ必要なのかを慎重に考えてくださいwell前に追加.。
  • 次に、jQuery .addClass()メソッドを使用して2つのクラスを追加します：animated、shake。
  • たとえば、次のコードをdocument ready function inに記述できます：$('.text-primary').addClass('animated shake')
  • 上記のコードは、すべてのクラスをtext-primary追加された要素のshakeクラスとして提供します。

4.jQueryを使用したIDによるターゲット要素

<script> $(document).ready(function() { $('button').addClass('animated bounce') $('.well').addClass('animated shake') $('#target3').addClass('animated fadeOut') }) script>
  • id属性に基づいて要素を取得することもできます。最初に$('#target3')を使用してid target3 of button要素を選択します。
  • CSSと同様に、id #の前に名前を追加することに注意してください。
  • 次に、jQuery .addClass()メソッドを使用してanimated with fadeOut classを追加します。
  • 例：次のコードは、id target6 of button要素にフェードアウト効果を追加するためのものです：$('#target6').addClass('animated fadeOut')

5.jQuery関数を削除します

<script> $(document).ready(function() { }) script>
  • これらのアニメーション効果は最初はかっこいいですが、アニメーションが多すぎると少しうるさいです。
  • あなたのdocument ready functionこれらの3つの文を削除し、document ready functionのみを残します。

6.複数のjQueryセレクターで同じ要素をターゲットにする

<script> $(document).ready(function() { $('button').addClass('animated') $('.btn').addClass('shake') $('#target1').addClass('btn-primary') }) script>
  • これで、3種類のセレクターを学習しました。要素セレクター：$('button')、クラスセレクター：$('.btn')、IDセレクター：$('#target1')。
  • 使用.addClass()この方法でさまざまなクラスを追加できますが、さまざまな方法で要素にクラスを追加してみましょう。
  • jQueryセレクターを使用して.addClass()メソッド：
    • すべてのタイプbutton追加された要素のanimatedクラス。
    • すべてのクラスを.btnボタンを追加shakeクラスとして指定します。
    • すべてのIDを#target1ボタンを追加btn-primaryクラスとして指定します。

7.jQueryを使用して要素からクラスを削除します

<script> $(document).ready(function() { $('button').addClass('animated bounce') $('.well').addClass('animated shake') $('#target3').addClass('animated fadeOut') $('button').removeClass('btn-default') }) script>
  • これは、jQuery .addClass()メソッドを使用して要素にクラスを追加するか、jQuery removeClass()メソッドを使用して要素のクラスを削除することで実行できます。このように：$('#target2').removeClass('btn-default')
  • すべて試してみてくださいbuttonエレメンタルbtn-defaultクラスを削除しました。

8.jQueryを使用して要素のCSSを変更する

<script> $(document).ready(function() { $('#target1').css('color','red') }) script>
  • jQueryを使用して、HTML要素のCSSスタイルを変更できます。
  • jQueryには.css()このメソッドを使用すると、要素のCSSスタイルを変更できます。
  • 次のように色を青に変更します：$('#target1').css('color', 'blue')
  • これは、CSSのプロパティと値が引用符で囲まれ、コンマで区切られている通常のCSS構文とは少し異なります。
  • あなたのdocument ready function空を入れて、入れてみてくださいtarget1赤に変えてください。

9.jQueryを使用して要素を無効にする

<script> $(document).ready(function() { $('#target1').css('color', 'red') $('#target1').prop('disabled',true) }) script>
  • jQueryを使用して、CSS以外のプロパティを変更することもできます。たとえば、ボタンを選択不可にすることができます。
  • ボタンを選択不可にすると、ボタンが灰色になり、クリックできなくなります。
  • jQueryにはa .prop()があります。このメソッドを使用すると、要素の属性を調整できます。
  • ボタンを選択できないようにするためにこれを行います：$('button').prop('disabled', true)
  • ぜひお試しくださいtarget1ボタンは選択できません。

10.jQueryを使用して要素内のテキストを変更する

<script> $(document).ready(function() { $('#target1').css('color', 'red') $('#target4').html(' #target4 ') }) script>
  • jQueryは、要素の開始タグと終了タグの間のテキストを変更できるだけでなく、要素タグ自体も変更できます。
  • jQuery .html()メソッドはHTMLタグとテキストを要素に追加でき、要素の前のコンテンツはメソッドのコンテンツに置き換えられます。
  • タイトルテキストを書き直して強調するために、em [emphasize]タグを使用しています：$('h3').html(' jQuery Playground ')
  • jQueryには.text()と呼ばれる同様のメソッドがあり、テキストのみを変更でき、マークは変更できません。つまり、このメソッドは、渡されたもの（マークアップを含む）のみをテキストとして表示します。
  • タスク：IDがtarget4であるボタンのテキストを強調します。

11.jQueryを使用して要素を削除します

<script> $(document).ready(function() { $('#target1').css('color', 'red') $('#target1').prop('disabled', true) $('#target4').remove() }) script>
  • それでは、jQueryを使用してページ上のHTML要素を削除しましょう。
  • jQueryには.remove()メソッドがHTML要素を削除できます。
  • .remove()メソッドを使用してtarget4要素を削除してみてください。

12.appendToを使用してjQueryで要素を移動する

<script> $(document).ready(function() { $('#target1').css('color', 'red') $('#target1').prop('disabled', true) $('#target4').remove() $('#target2').appendTo('#right-well') }) script>
  • それでは、要素をa div別の要素に移動div inから削除してみましょう。
  • jQueryにはappendTo()メソッドがあり、選択した要素を他の要素に追加できます。
  • たとえば、次のようにしますtarget4 from right-well Move to left-well、次のように使用できます：$('#target4').appendTo('#left-well')
  • 試してみてくださいtarget2要素from left-well移動right-well in。

13.jQueryを使用して要素のクローンを作成する

<script> $(document).ready(function() { $('#target1').css('color', 'red') $('#target1').prop('disabled', true) $('#target4').remove() $('#target2').appendTo('#right-well') $('#target5').clone().appendTo('#left-well') }) script>
  • 要素の移動に加えて、要素をコピーすることもできます。簡単な理解：要素の移動は切断であり、要素のコピーはコピーです。
  • jQuery clone()メソッドは要素をコピーできます。
  • たとえば、target2 From left-well Copy to right-wellの場合、次のように記述できます。$('#target2').clone().appendTo('#right-well')
  • 2つのjQueryメソッドが一緒に使用されていることに気づきましたか？これはメソッドチェーンfunction chainingと呼ばれ、使いやすいです。
  • コピーtarget5追加された要素left-well。

14.jQueryを使用して要素の親をターゲットにする

<script> $(document).ready(function() { $('#target1').css('color', 'red') $('#target1').prop('disabled', true) $('#target4').remove() $('#target2').appendTo('#right-well') $('#target5').clone().appendTo('#left-well') $('#target1').parent().css('background-color','red') }) script>
  • 各HTML要素には、継承された属性に基づく親の親要素があります。
  • たとえば、h3要素の親要素は、親要素はbodyです。
  • jQueryにはparent()というメソッドがあり、指定した要素の親要素にアクセスできます。
  • 例：左ウェル要素の親要素の親（）の背景色を青にします：$('#left-well').parent().css('background-color', 'blue')
  • ＃target1要素の親要素の背景色を赤にしてみてください。

15.jQueryを使用して要素の子をターゲットにする

<script> $(document).ready(function() { $('#target1').css('color', 'red') $('#target1').prop('disabled', true) $('#target4').remove() $('#target2').appendTo('#right-well') $('#target5').clone().appendTo('#left-well') $('#target1').parent().css('background-color', 'red') $('#right-well').children().css('color','orange') }) script>
  • DNA、外観、血液型、体型など、誰もが両親のいくつかの属性を継承します。HTMLも例外ではありません。
  • 多くのHTML要素にはchildren（子要素）があり、各子要素は親要素からいくつかの属性を継承します。
  • たとえば、すべてのHTML要素はbody「jQueryPlayground」の子要素ですh3要素はisChild要素です。
  • jQueryにはchildren()というメソッドがあり、指定した要素の子要素にアクセスできます。
  • 例：let left-well子要素children()テキストの色が青になります：$('#left-well').children().css('color', 'blue')
  • タスク：Let #right-well要素のすべての子要素のテキストの色がオレンジ色に変わります。

16.jQueryを使用して要素の特定の子をターゲットにする

<script> $(document).ready(function() { $('#target1').css('color', 'red') $('#target1').prop('disabled', true) $('#target4').remove() $('#target2').appendTo('#right-well') $('#target5').clone().appendTo('#left-well') $('#target1').parent().css('background-color', 'red') $('#right-well').children().css('color', 'orange') $('.target:nth-child(2)').addClass('animated bounce') }) script>
  • jQueryセレクターを使用してid属性で要素を選択するのがいかに便利かを見てきましたが、そのようなきちんとしたIDを常に記述できるとは限りません。
  • 幸い、jQueryには、同じ効果を実現するためのいくつかの追加のトリックがあります。
  • jQueryはCSSセレクターを使用して要素を選択しますtarget:nth-child(n) CSSセレクターを使用すると、ターゲット要素のすべての子要素をインデックス順に（1から）選択できます。
  • 例：ターゲット要素の3番目の子要素に追加できますbounceクラス：$('.target:nth-child(3)').addClass('animated bounce')
  • タスク：ターゲット要素の2番目の子要素に必ず追加してくださいanimated with bounceクラス。パスtargetクラスを使用してターゲット要素を選択できます。

17.jQueryを使用して偶数の要素をターゲットにする

<script> $(document).ready(function() { $('#target1').css('color', 'red') $('#target1').prop('disabled', true) $('#target4').remove() $('#target2').appendTo('#right-well') $('#target5').clone().appendTo('#left-well') $('#target1').parent().css('background-color', 'red') $('#right-well').children().css('color', 'orange') $('#left-well').children().css('color', 'green') $('.target:nth-child(2)').addClass('animated bounce') $('.target:even').addClass('animated shake') }) script>
  • 例：クラスがターゲットでインデックスが奇数であるすべての要素を取得し、それらにクラスを追加します：$('.target:odd').addClass('animated shake')
  • jQueryのインデックスは0から始まることを忘れないでください。つまり、:oddターゲット＃2（インデックスは1）、ターゲット＃4（インデックスは3）、およびtarget6（インデックス）であるため、2番目、4番目、6番目の要素を選択します。 5）です。
  • タスク：クラスを次のように取得targetそして、偶数のインデックスを持つすべての要素、つまりターゲット＃1（インデックス0）、ターゲット＃3（インデックス2）、ターゲット5（インデックス4）、およびクラスを追加animated with shake。

18.jQueryを使用してページ全体を変更する

<script> $(document).ready(function() { $('#target1').css('color', 'red') $('#target1').prop('disabled', true) $('#target4').remove() $('#target2').appendTo('#right-well') $('#target5').clone().appendTo('#left-well') $('#target1').parent().css('background-color', 'red') $('#right-well').children().css('color', 'orange') $('#left-well').children().css('color', 'green') $('.target:nth-child(2)').addClass('animated bounce') $('.target:even').addClass('animated shake') $('body').addClass('animated hinge') }) script>
  • 私たちは長い間jQueryプレイグラウンドで遊んでいますが、このセクションを終了する時が来ました。
  • 全体をbodyすべてにフェードアウト効果を持たせます：$('body').addClass('animated fadeOut')
  • もっとエキサイティングなことをしましょう、与えるbodyクラスを追加animated with hinge。

注：情報はFCC中国局から編集されています